一、实验内容
用HTML+CSS实现如下页面，要求兼容主流浏览器，代码规范。
二、实验代码及成品
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>环球互联网产业园</title>
<link rel="stylesheet" href="css1.css">
</head>
<body>
<div class="all">
<div id="bg">
<div class="top">
<img class="logo" src="LOGO.png">
<!-- 先读取bar中的设置 再读取homePage中的设置 -->
<div class="bar homePage"><a>首页</a></div>
<div class="bar survey"><a>园区概况</a></div>
<div class="bar dynamic"><a>园区动态</a>
<div class="dynamicList" style="top: 22px">园区新闻</div>
<div class="dynamicList" style="top: 62px">产业动态</div>
<div class="dynamicList" style="top: 102px">园区公告</div>
<div class="dynamicList" style="top: 142px">工作简报</div>
</div>
<div class="bar attractInvestment"><a>招商引资</a></div>
<div class="bar service"><a>园区服务</a></div>
<div class="bar contact"><a>联系我们</a></div>
<img class="bar search" src="Search.png">
</div>
<img src="back.png">
<div class="middle">
<div class="crumbs">
<img class="place" src="place.png">
<div class="crumbsWord homePage"><a>首页</a> /</div>
<div class="crumbsWord dynamic"><a>园区动态</a> /</div>
<div class="crumbsWord news"><a>园区新闻</a> /</div>
<div class="crumbsWord details"><a>详细信息</a></div>
</div>
<hr class="cut">
<div class="info">
<div class="leftInfo">
<div class="header">园区动态</div>
<a><div class="form">园区新闻</div></a>
<a><div class="form">产业动态</div></a>
<a><div class="form">园区公告</div></a>
<a><div class="form">工作简报</div></a>
<a><div class="form">园区新闻</div></a>
</div>
<div class="rightInfo">
<div class="mainTitle">
<h4>黄奇帆调研园区工作 大力发展现代服务业</h4>
</div>
<div class="subTitle">
来源：重庆市环球互联网产业园办公室 时间：2015-08-04
</div>
<div class="photo">
<img src="material_1.png">
</div>
<div class="photo material_2">
<img src="material_2.png">
</div>
<div class="photo material_1">
<img src="material_1.png">
</div>
<div class="mainText">
<p>
8月3日，重庆市长黄奇帆在渝中区委书记唐英瑜、区长扈万泰的陪同下调研了移动APP产业园，
一起参观调研的还有渝中区副区长黄孝明、区科委科委副主任乔伟。<br>
黄市长一行首先来到园区大学生创业团队云威科技。在实地走访过程中听取了云威科技总经理
李力的介绍后，黄市长充分的肯定了云威团队的创造精神和创新意识，鼓励云威团队在今后的
发展道路上更创辉煌。随后黄市长一行来到园区公共服务平台和园区众创空间。在听取渝中区
科委副主任乔伟对该园区的工作汇报后，黄市长说，渝中区作为都市功能核心区，上半年经济
保持了平稳较快发展势头，成绩值得肯定，但与功能定位相似的沿海发达地区相比，还有较大
差距，仍然需要把加快发展作为首要任务。渝中区要打造新的经济增长点，增强发展后劲，关
键是要围绕推动现代服务业发展来动脑筋、下功夫。要顺应时代发展潮流，通过搭建众创空间、
孵化器等平台，有针对性地出台扶持政策措施，吸引和集聚优秀人才，大力推动大众创业、万众创新。
</p>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottomText">
渝中区创新创业服务中心<br>
Copyright all right reserved<br>
ICP备 06046172号
</div>
</div>
</div>
</div>
</body>
</html>
/* 选择鼠标指针浮动在其上的元素，并设置其样式 */
.all {
width: 1366px;
height: 1116px;
margin: auto;
}
a:hover{
color: #3399cc;
cursor: pointer;
}
a div:hover{
border-left: #3399cc 6px solid;
}
#bg{
width: 1366px;
height: 1116px;
/*自适应居中*/
margin: auto;
}
.top{
width: 1366px;
height: 145px;
}
.logo{
/*绝对定位 没有设置上下左右时，会默认显示在左上角*/
position: relative;
left: 250px;
top: 40px;
}
.bar{
position: relative;
top: -8px;
}
.bar.homePage{
left: 630px;
}
.bar.survey{
left: 700px;
top: -29px;
}
.bar.dynamic{
left: 800px;
top: -50px;
}
.dynamicList{
display: none;
position: absolute;
left: -13px;
text-align: center;
width: 90px;
height: 40px;
font-size: 14px;
color: #fff;
line-height: 2.8;
background-color: #f09a08;
}
.dynamicList:hover{
background-color: #3399cc;
}
.bar.dynamic:hover .dynamicList{
display: block;
}
.bar.attractInvestment{
left: 900px;
top: -71px;
}
.bar.service{
left: 1000px;
top: -92px;
}
.bar.contact{
left: 1100px;
top: -113px;
}
.bar.search{
left: 1200px;
top: -136px;
}
.middle{
width: 1366px;
height: 564px;
}
.place{
position: relative;
top: 30px;
left: 180px;
}
.crumbsWord{
position: relative;
top: 440px;
}
.crumbsWord.homePage{
left: 210px;
top: 5px;
}
.crumbsWord.dynamic{
left: 260px;
top: -16px;
}
.crumbsWord.news{
left: 340px;
top: -37px;
}
.crumbsWord.details{
left: 420px;
top: -58px;
}
.cut{
position: relative;
width: 1000px;
top: -56px;
left: 0px;
}
.info{
width: 1366px;
height: 800px;
}
.leftInfo{
width: 210px;
height: 490px;
position: relative;
top: -48px;
left: 182px;
background-color: #f5f5f5;
}
.rightInfo{
width: 745px;
height: 470px;
position: relative;
left: 440px;
top: -516px;
}
.header{
width: 210px;
height: 40px;
background-color: #3399cc;
color:#fff;
text-align: center;
line-height: 2;
font-size: 20px;
}
.form{
width: 210px;
height: 40px;
background-color: #f5f5f5;
text-align: center;
line-height: 2.3;
font-size: 16px;
border-bottom: 1.1px solid #fff;
border-left: 4px solid #999;
/* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 */
box-sizing: border-box;
}
.mainTitle{
position: relative;
top: -20px;
left: 200px;
font-size: 20px;
font-family: 宋体;
}
.subTitle{
position: relative;
top: -33px;
left: 206px;
font-size: 14px;
color: #999999;
}
.photo{
position: relative;
top: -18px;
left: 24px;
}
.material_1 {
left: 555px;
top: -308px;
}
.material_2{
left: 282px;
top: -163px;
}
.mainText{
position: relative;
width: 752px;
top: -310px;
left: 0px;
font-size: 14px;
/* 首行缩进两个字符 */
text-indent: 2em;
}
.bottom{
width: 1366px;
height: 120px;
background-color: #e2e2e1;
}
.bottomText{
text-align: center;
line-height: 1.8;
color: dimgray;
position: relative;
top: 17px;
}
