《Web前端设计与开发》实验三：HTML+CSS综合实验

一、实验内容

用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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黄市长一行首先来到园区大学生创业团队云威科技。在实地走访过程中听取了云威科技总经理李力的介绍后，黄市长充分的肯定了云威团队的创造精神和创新意识，鼓励云威团队在今后的发展道路上更创辉煌。随后黄市长一行来到园区公共服务平台和园区众创空间。在听取渝中区科委副主任乔伟对该园区的工作汇报后，黄市长说，渝中区作为都市功能核心区，上半年经济保持了平稳较快发展势头，成绩值得肯定，但与功能定位相似的沿海发达地区相比，还有较大差距，仍然需要把加快发展作为首要任务。渝中区要打造新的经济增长点，增强发展后劲，关键是要围绕推动现代服务业发展来动脑筋、下功夫。要顺应时代发展潮流，通过搭建众创空间、孵化器等平台，有针对性地出台扶持政策措施，吸引和集聚优秀人才，大力推动大众创业、万众创新。</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;
}

《Web前端设计与开发》实验三：HTML+CSS综合实验相关推荐

web前端设计与开发期末作品HTML5+CSS大作业——明星杨洋(7页)
HTML5+CSS大作业--明星杨洋(7页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化 ...
HTML+CSS+JS 生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品_期末大作业
HTML5期末大作业:生鲜水果蔬菜商城网站设计--天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
HTML5期末大作业：餐饮网站设计——餐饮店铺(1页) web前端设计与开发期末作品/期末大作业
HTML5期末大作业:餐饮网站设计--餐饮店铺(1页) web前端设计与开发期末作品/期末大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. ...
HTML5期末大作业：甜品奶茶网站设计——大气的甜品奶茶(23页) web前端设计与开发期末作品/期末大作业
HTML5期末大作业:甜品奶茶网站设计--大气的甜品奶茶(23页) web前端设计与开发期末作品/期末大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶 ...
HTML5期末大作业：服装商城网站设计——2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品/期末大作业
HTML5期末大作业:服装商城网站设计--2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品/期末大作业常见网页设计作业题材 ...
HTML5期末大作业：服装商城网站设计——2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品_期末大作业
HTML5期末大作业:服装商城网站设计--2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品/期末大作业常见网页设计作业题材 ...
HTML5期末大作业：生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业
HTML5期末大作业:生鲜水果蔬菜商城网站设计--天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
HTML5期末大作业：管理系统后台网站设计——代理商销售管理系统后台(8页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业
HTML5期末大作业:管理系统后台网站设计--代理商销售管理系统后台(8页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：土王酒业网站设计——土王酒业(7页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业
HTML5期末大作业:土王酒业网站设计--土王酒业(7页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅 ...
《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-6
Web前端设计与开发-课后任务-漫步时尚广场任务第五章源码前台模块 shoppingShow_goods.html shoppingShow_goods_byScript.html 后台模块 css ...

《Web前端设计与开发》实验三：HTML+CSS综合实验

一、实验内容

二、实验代码及成品

《Web前端设计与开发》实验三：HTML+CSS综合实验相关推荐

最新文章

热门文章