7.18 阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS
作者：互联网
阿里巴巴企业黄页HTML实现、HTML标签介绍、frameset框架、HTML5标签、CSS
一、阿里巴巴企业黄页HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿里巴巴（中国）网络技术有限公司</title>
<style type="text/css">
.certification{
background-color: orange;
width:80px;
height: 22px;
color:white;
font-size:12px;
text-align: center;
text-decoration: none;
display: inline-block;
border:none;
}
.name{
width:600px;
height:23px;
margin-left:100px;
}
.nowfunction{
width:300px;
heigth:23px;
position: absolute;
top:20px;
right:0px;
}
.nowfunction a{
float:left;
margin-right:15px;
text-decoration:none;
}
.mainInfo{
width:1225px;
height:100px;
margin-left: 100px;
margin-top:20px;
background-color:#F2F9FC;
}
.InfoMeau{
width: 1070px;
height:44px;
position:absolute;
margin-left: 100px;
margin-top:50px;
}
.InfoOpt{
width:150px;
float:left;
text-align: center;
border: 0.5px solid #eee;
background-color: #eeeeee;
}
.InfoOpt a{
text-decoration:none;
}
.InfoOpt h2{
font-size:16px;
color: #000;
display: inline-block;
}
.InfoOpt span{
font-size: 12px;
color: #999;
font-weight: normal;
}
.foundInfo{
width:1070px;
margin-left: 100px;
margin-top:120px;
}
.ntable{
width: 100%;
margin: 0 auto;
margin-bottom: 20px;
}
.ntable td{
padding: 10px 10px 11px 10px;
border: #E4EEF6 1px solid;
word-break: break-all;
font-size: 14px;
line-height: 1.6;
color: #222;
word-wrap: break-word;
}
.ntable .tb{
background: #F2F9FC;
}
.SHInfo{
width:1070px;
margin-left:100px;
margin-top:50px;
}
.SHInfo a{
text-decoration:none;
position: relative;
top: -40px;
left: 1030px;
}
.SHInfo span{
font-size: 14px;
color: #999;
font-weight: normal;
}
.SHdetail{
width:1070px;
height: 600px;
margin-left: 100px;
}
.SHdetail div{
width: 500px;
height: 500px;
border:1px solid #eeeeee;
float:left;
margin-left: 20px;
}
.shareholder{
width:1070px;
margin-left: 100px;
}
.shareholder span{
font-size: 14px;
color: #999;
font-weight: normal;
}
</style>
</head>
<body>
<div class="header-panel">
<div style="float:left;">
<img src="${ctxPath}\images\aliLogo.png">
</div>
<div class="name">
<h3 style="width:500px;">阿里巴巴（中国）网络技术有限公司 <button class="certification">√ 我要认证</button></h3>
</div>
<div class="nowfunction">
<a href="#">风险监控</a>
<a href="#">递名片</a>
<a href="#">笔记</a>
<a href="#">对比</a>
<a href="#">关注</a>
</div>
<div class="mainInfo">
<a style="position: relative;top: 10px;left: 5px;">
电话：0571-8502****
<a href="#" style="position: relative;top: 10px;left: 10px;text-decoration:none;">更多号码</a>
<a href="#" style="position: relative;top: 10px;left: 10px;text-decoration:none;">编辑</a>
</a>
<a href="https://www.alibabagroup.com/cn/global/home" style="position: relative;top: 10px;left: 100px;text-decoration:none;">
官网：https://www.alibabagroup.com/cn/global/h...
<a href="#" style="position: relative;top: 10px;left: 110px;text-decoration:none;">认证</a>
</a>
<a href="#" style="position:absolute;top:72px;right:40px;text-decoration:none;color:orange;">
编辑企业信息
</a>
<a style="position: relative;top: 37px;left: -625px;">
邮箱：***@alibaba-inc.com
</a>
<a style="position: relative;top: 37px;left: -467px;">
地址： 浙江省杭州市滨江区网商路699号
<a href="#" style="position: relative;top: 37px;left: -457px;text-decoration:none;">附近企业</a>
</a>
<a style="position: relative;top: 64px;margin-left: -1175px;">
简介：阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立，他...
<a href="#" style="position: relative;top: 64px;margin-left: 10px;text-decoration:none;">详情</a>
</a>
</div>
<div class="InfoMeau">
<div class="InfoOpt" style="background-color: white;">
<a href="#">
<h2 style="color: #128bed;">基本信息</h2>
<span>282</span>
</a>
</div>
<div class="InfoOpt">
<a href="#">
<h2>法律诉讼</h2>
<span>539</span>
</a>
</div>
<div class="InfoOpt">
<a href="#">
<h2>经营状况</h2>
<span>999+</span>
</a>
</div>
<div class="InfoOpt">
<a href="#">
<h2>经营风险</h2>
<span>27</span>
</a>
</div>
<div class="InfoOpt">
<a href="#">
<h2>企业发展</h2>
<span>52</span>
</a>
</div>
<div class="InfoOpt">
<a href="#">
<h2>知识产权</h2>
<span>159</span>
</a>
</div>
<div class="InfoOpt">
<a href="#">
<h2>历史信息</h2>
<span>88</span>
</a>
</div>
</div>
</div>
<div class="container">
<div class="foundInfo">
<table class="ntable">
<tr>
<td width="20%" class="tb">注册资本</td>
<td width="30%" class="">512233万美元</td>
<td width="20%" class="tb">实缴资本</td>
<td width="30%" class="">59690万美元</td>
</tr>
<tr>
<td class="tb">经营状态</td>
<td class="">存续</td>
<td class="tb" width="18%">成立日期</td>
<td class="">1999-09-09</td>
</tr>
<tr>
<td class="tb">统一社会信用代码</td>
<td class="">91330100716105852F</td>
<td class="tb">纳税人识别号</td>
<td class="">91330100716105852F</td>
</tr>
<tr>
<td class="tb">注册号</td>
<td class="">330100400015575</td>
<td class="tb" width="15%">组织机构代码</td>
<td class="">71610585-2</td>
</tr>
<tr>
<td class="tb">企业类型</td>
<td class="">有限责任公司(台港澳与境内合资)</td>
<td class="tb">所属行业</td>
<td class="">信息传输、软件和信息技术服务业</td>
</tr>
<tr>
<td class="tb">核准日期</td>
<td class="" style="max-width:301px;">2019-04-08</td>
<td class="tb">登记机关</td>
<td class="">杭州市高新区（滨江）市场监督管理局</td>
</tr>
<tr>
<td class="tb">所属地区</td>
<td class="" style="max-width:301px;">浙江省</td>
<td class="tb">英文名</td>
<td class="">Alibaba (China) Technology Co., Ltd.</td>
</tr>
<tr>
<td class="tb">曾用名</td>
<td class="">
<span>阿里巴巴（杭州）网络技术发展有限公司 </span>
<span>阿里巴巴(中国)网络有限公司 </span>
</td>
<td class="tb">参保人数</td>
<td class="">759</td>
</tr>
<tr>
<td class="tb">人员规模</td>
<td class="">1000人以上</td>
<td class="tb">营业期限</td>
<td class="">1999-09-09 至 2040-09-08</td>
</tr>
<tr>
<td class="tb">企业地址</td>
<td class="" colspan="3">
浙江省杭州市滨江区网商路699号
<a href="#" class="m-l text-primary" style="text-decoration:none;"> 查看地图</a>
<a data-toggle="modal" data-target="#loginModal" href="#" class="m-l text-primary" style="text-decoration:none;"> 附近企业</a>
</td>
</tr>
<tr>
<td class="tb">经营范围</td>
<td class="" colspan="3">
开发、销售计算机网络应用软件;设计、制作、加工计算机网络产品并提供相关技术服务和咨询服务;服务:自有物业租赁,翻译,成年人的非证书劳动职业技能培训(涉及许可证的除外)。(依法须经批准的项目,经相关部门批准后方可开展经营活动)
</td>
</tr>
</table>
</div>
<div class="SHInfo">
<h3>股东信息统计分析</h3>
<a href="#"><span>↑收起</span></a>
</div>
<div class="SHdetail">
<div><a style="position: relative;top:10px;left: 10px;">股东持股比例（%）</a></div>
<div><a style="position: relative;top:10px;left: 10px;">股东认缴出资额（万美元）</a></div>
</div>
<div class="shareholder">
<h3>股东信息<a style="color:#128bed;">3</a></h3>
<span>(查看更多1条<span style="color:orange;">历史股东</span>)</span>
</div>
</div>
</body>
</html>
二、HTML标签介绍
三、frameset框架、iframe框架
frameset、iframe框架实例
1.frameset.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>frameset框架</title>
</head>
<frameset cols="25%,50%,*" boder="5">
<frame src="http://www.baidu.com" scrolling="no"></frame>
<frameset rows="50%,*" boder="5">
<frame src="http://www.qq.com" scrolling="no"></frame>
<frame src="http://www.weibo.com"></frame>
</frameset>
<frame src="http://www.sina.com"></frame>
</frameset>
</html>
运行结果：
2.iframe.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe框架</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="百度" frameborder="3"
width="100%" height="400"
scrolling="yes"></iframe>
<iframe src="http://www.qq.com" name="qq" frameborder="3" scrolling="yes"
width="50%" height="400"
></iframe>
<iframe src="http://www.sina.com" name="新浪" frameborder="3" scrolling="yes"></iframe>
</body>
</html>
运行结果如下：
3.iframe套iframe
iframe1.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe框架</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="百度" frameborder="3"
width="100%" height="400"
scrolling="yes"></iframe>
<iframe src="iframe2.html" name="_parent" frameborder="3" scrolling="yes"
width="50%" height="400"
></iframe>
<iframe src="http://www.sina.com" name="新浪" frameborder="3" scrolling="yes"></iframe>
</body>
</html>
iframe2.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe框架</title>
</head>
<body>
<iframe src="http://www.baidu.com" name="百度" frameborder="3"
width="100%" height="400"
scrolling="yes"></iframe>
<p>
<a href="http://www.baidu.com" target="_parent">百度</a>
<a href="http://www.sina.com">新浪</a>
</p>
<iframe src="http://www.sina.com" name="新浪" frameborder="3" scrolling="yes"></iframe>
</body>
</html>
*其中 target="_parent 将子页面上的链接点击后返回到父页面。不写这行代码即在子页面跳转。
运行结果：
四、HTML5标签
h5 canvas画布标签、拖放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5特特标签</title>
</head>
<body>
<h1>html5 canvas画页标签</h1>
<canvas id="myCanvas" width="200" height="150" style="border: 1px solid #000000"></canvas>
<br>
<h1>html5 拖放（drag 和 drop）</h1>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px;height:200px; border: 1px solid #000000;"></div>
<br>
<img id="drag1" src="girl.gif" draggable="true" ondragstart="drag(event)"> <!--设置图片为可拖放-->
</body>
</html>
<script>
/**
* canvas画图
*/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font="30px Arial"; //设置字体大小，字体
ctx.fillText("Hello World", 10,50); //在canvas上给制实心的文本
ctx.strokeText("Hello World", 10,100); //在canvas上给制空心的文本
/**
* html5拖放
*/
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
//通过调用ondragoverg事件规定拖放元素放在何处
function allowDrop(ev){
ev.preventDefault();
}
//放置被拖动数据时，会发生drop事件
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
运行结果：
鼠标拖动图片到框内：
HTML5 input类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5 input类型</title>
</head>
<body>
<input type="email" name="user_email" />
<input type="url" name="user_url" />
<input type="nymber" name="points" min="1" max="10" />
<input type="date" name="user_date" />
</body>
</html>
结果如下：
五、CSS
css样式分为：行内样式、内部样式表、外部样式表
HTML中选择样式时以最靠近的样式为准
css写法：选择器、属性、属性值
外部css引用方法：
<link href="外部CSS文件的URL路径" rel="stylesheet" type="text/css" />
内部css：
<style>
xxx
</style>
class选择器：
.xxx，.xxx{
xxx:xxx;
}
id选择器:
.name>#divId{
color:#00B83F;
}
标签选择器：
a,table{
font-family:"宋体"；
}
html{
background-color:#ffffff;
text-align:center;
maragin:auto;
}
通用选择器：
通用属性
*{
font-family:"宋体"；
}
级联选择器
.name>h3>span{
color:#00B83F;
}
相关资料
阿里巴巴矢量图标库：https://www.iconfont.cn/
标签：frameset,color,标签,width,HTML,font,margin,left 来源： https://blog.csdn.net/pyhkobe/article/details/96424527