myday6-day07 网页的制作实战（附自己的代码）（仿一个网站的网页）

网页效果图

自己的代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 导航栏出问题 *//* 布局用浮动+ul li和盒子模型做 区域用div划分可以，最好用ul li比较方便*//* padding值要内减 注意，还没有解决右面蓝色可视区溢出，隐藏了滚动条只是*//* .borderBottom{border-bottom:1px solid #d8d8d8;给盒子单独加线，很灵活，很好用} */* {padding: 0;margin: 0;}/* html{overflow-x:hidden;overflow-y:auto;} */body{/* body的最小宽度min-width设置成上面的固定宽度一致就可以解决浏览器缩小页面右面截断和留白的问题，这个很有用。但是放大页面还是会有些问题。不设置的话会更糟糕，中国地方铁路协会原网站也是出现这种问题,是缩小的时候主图会留白，但是我的问题是图片小的放的话原窗口会留白，缩小没有。已解决，不是隐藏水平滚动条，而是padding的影响撑开了，用calc减去即可*/min-width: 1349px;/* font-family: "宋体"; */}ul{list-style: none;}.header{width: calc(100% - 80px);height: 130px;background-color: #ffffff;padding: 20px 0px 0px 80px;}.h-left{float:left;width: 430px;height: 100px;background: url(./images/logo.jpg) no-repeat;/* padding:0px 0px 0px 0px; */background-size: 100%;margin-right:141px;}.mid{float:left;width: 300px;height: 50px;border:1px solid #d7d7d7;border-radius:10px;font-size:18px;line-height: 50px;text-indent:2em;margin-top:25px;margin-right:55px;background: url(./images/fdj.png) no-repeat 95% center;color:#888888;}.h-right{float: left;width: 100px;height: 100px;background: url(images/weima.png) no-repeat top;background-size:77px;text-align: center;line-height:175px;font-size:10px;color:#949494;margin-right:60px;margin-top:12px;}
/* 60 */.login{float:left;width: 88px;height: 38px;background-color: #0052d9;color:#ffffff;text-align: center;line-height: 38px;border-radius:38px;margin-top:31px;}.show0 ul {/* width:calc(100% + 600px); */list-style: none;width: calc(100% - 110px);height: 48px;background-color: #0052d9;padding: 0px 0px 0px 110px;line-height: 48px;}.show0 ul li {float: left;height: 44px;margin-right: 36px;padding: 0px 10px;}.show0 ul li a {text-decoration: none;color: #ffffff;}.show0 ul .first{border-bottom: 4px solid #ffffff;}.show0 ul li:hover{border-bottom: 4px solid #ffffff;}/* 1440 411 */.mainPic{width:1349px;height: 411px;background: url(images/mainPic.jpg) no-repeat;}.main-zone{width: 1202px;margin:0 auto;}.notice{width: 1170px;height: 50px;line-height: 50px;background-color: #e6f7ff;padding:0px 20px 0px 10px;margin:22px 0px;}.clearFix:before{content: "";display: inline-block;clear:both;}.clearFix:after{content: "";display: inline-block;clear:both;}.noticePic{width: 72px;float: left;margin-right:22px;margin-top:3px;}.leftContent{float: left;}.rightContent{float: right;}a{text-decoration: none;font-size:14px;color:#2b71e1;}.show1{width: 1200px;height: 346px;padding:1px;background-color: #f7fafa;}.show1 ul{list-style: none;}.show1Img{width: 565px;height: 345px;}.show1 ul li{float:left;}.show1-top{height: 43px;line-height: 44px;padding:0px 20px 0px 0px;border-bottom:1px solid #72adff;}.show1-mid{width: 324px;height: 344px;margin-right:10px;background-color: #ffffff;/* border:solid; */}.leftShow1{float:left;height: 44px;/* line-height: 44px; */}.leftShow1 img{float:left;margin-right:22px;}.leftShow1 span{height: 44px;float: left;}.show1-right{width: 300px;height: 344px;/* border:solid; */float:left;background-color: #ffffff;}.rightShow1{float:right;}.mainShow1 ul li a{color:#414141;text-align: center;}.mainShow1 ul li{margin-bottom: 10px;}.mainShow1{height: 330px;padding:30px 0px  0px 20px;}.mark::before{content: "";display: inline-block;width: 6px;height: 6px;border-radius:50%;background-color: #d3d3d3;vertical-align: middle;margin-right:12px;margin-top:-3px;}.mark2::before{content: "";display: inline-block;width: 6px;height: 6px;border-radius:50%;background-color: #d3d3d3;vertical-align: middle;margin-right:12px;margin-top:-3px;}.mark:after{font-family: Arial, Helvetica, sans-serif,"宋体";font-size:12px;content: "HOT";color:white;display: inline-block;width: 31px;height: 15px;line-height: 15px;padding-left:1px;padding-top:2px;background-color: #fc7171;margin-left:20px;border-radius:3px;}.show2{width: 1200px;height: 117px;background: url(./images/show2.png) no-repeat;margin:16px auto;}.show3{width:1200px;height: 466px;background-color: #ffffff;}.show3Left{width: 580px;height: 466px;float: left;overflow: hidden;background-color:#f3f5f6;margin-right:40px;}.show3Right{width: 580px;height: 466px;float: left;overflow: hidden;background-color:#f3f5f6;}.show3 ul li{width: 520px;height: 40px;margin:0 auto;/* margin-bottom:23px; *//* margin-top:15px; */margin-left:30px;/* border:1px solid black; */padding:20px 0px 20px 0px;}.borderBottom{border-bottom:1px solid #d8d8d8;}.show3 a{font-size:16px;color:#333333;margin-right:50px;width: 386px;height: 88px;float:left;}/* .show3 show3Left showNews a:nth-child(2){background-color: aqua;} */.show3 span{color:#b6b6b7;float:left;}.show4{width: 1200px;height: 92px;background:url(./images/img-03.png) no-repeat;margin:22px auto;}.show5{width: 1200px;height: 352px;margin-bottom: 40px;}.show5Left{width: 384px;height: 350px;float: left;/* 这个盒子不加浮动，下个盒子加浮动不上来，为什么要两个都加上才可以 */}.show5Left-top{width: 384px;height: 66px;line-height: 66px;border-bottom:2px solid #377ae2;}.article{font-size:24px;float: left;}.many{float: right;}.show5Left ul li{margin-top:20px;}.show5Left ul li:nth-child(1):before{content:"1";font-size:19px;color:#377ae2;font-weight: bold;margin-right:20px;}.show5Left ul li:nth-child(2):before{content:"2";font-size:19px;color:#377ae2;font-weight: bold;margin-right:20px;}.show5Left ul li:nth-child(3):before{content:"3";font-size:19px;color:#377ae2;font-weight: bold;margin-right:20px;}.show5Left ul li:nth-child(4):before{content:"4";font-size:19px;color:#377ae2;font-weight: bold;margin-right:20px;}.show5Left ul li:nth-child(5):before{content:"5";font-size:19px;color:#377ae2;font-weight: bold;margin-right:20px;}.show5Left ul li:nth-child(6):before{content:"6";font-size:19px;color:#377ae2;font-weight: bold;margin-right:20px;}.show5 .show5Right{width: 776px;height: 350px;float: right;;/* border:solid; */}.show5Right-top{width: 776px;height: 66px;line-height: 66px;border-bottom:2px solid #377ae2;}.show5Right ul li{float: left;margin-top:16px;}.show5Right ul li a{float: left;color:#7a7a7a;margin-left:14px;}h1{font-weight: normal;text-align: center;margin-bottom:17px;}/* 写到这里，都是从外向里写的是最顺手的，但是结构越简便越好，按顺序一步一步来是比较好的，能用ul li就不要用div，用div会很麻烦和累，要起很多的类名，很容易绕晕。越简便越好*/.show6{width: 1140px;height: 296px;border:1px solid #e5e5e5;padding:10px 30px;margin-bottom:60px;}.show6Left{float: left;margin-right: 0px;}.show6Right{float:right;}.show6Right-top{width: 540px;height: 40px;padding-left: 30px;}.iconAndLetterLeft img{float: left;margin-top:3px;}.iconAndLetterLeft{float: left;margin-top:3px;}.iconAndLetterRight{float:right;margin-top:3px;}.iconAndLetterRight img{float:right;margin-top:3px;}.show6Right-main{width: 540px;height: 280px;padding-left: 30px;}h5{display: inline-block;margin-bottom: 16px;}.show6Right-main span{display: inline-block;font-size:12px;margin-bottom: 16px;}.bottomNav{width: 100%;height: 304px;background-color: #00092b;color:#878b9a;}.bottomNav .top{width: 1200px;height: 88px;line-height: 88px;margin: 0 auto;border-bottom: 1px solid #25305b;}.bottomNav .top ul li .triangle::after{content: "";display:inline-block;width: 0px;height: 0px;border:6px solid #ffffff;border-color:transparent transparent #ffffff transparent;position: relative;top:-2px;margin-left: 10px;}.bottomNav .top ul li{float: left;margin-right:54px;}.bottomNav ul li a{color:#dadce0;}.bottomNav .center{width: 1200px;height: 88px;line-height: 88px;margin: 0 auto;border-bottom: 1px solid #25305b;}.bottomNav .center ul li{float: left;margin-right:54px;}.bottomNav .center img{float: right;margin-top:20px;}.bottomNav .center img:nth-child(2){margin-left:20px;}.bottomNav .bottom{height: 88px;margin-top: 44px;}p{color: #b8bbc4;margin: 0 auto;text-align: center;;font-size: 12px;color:#dadce0;}/* 为什么这样设置不成功.bottomBorder2{border-bottom: 1px solid #ffffff;} *//* show6卡了一下，不设置高度main里面，都全下去了。 */</style>
</head>
<body><div class="broswer"><div class="header"><div class="h-left"></div><div class="mid">请输入关键字</div><div class="h-right"><div>APP下载</div></div><div class="login">登录</div></div><div  class="show0"><ul class="clearFix"><li  class="first"><a href="#">首页</a></li><li><a href="#">协会概况</a></li><li><a href="#">协会动态</a></li><li><a href="#">政策法规</a></li><li><a href="#">行业资讯</a></li><li><a href="#">会员专区</a></li><li><a href="#">协会刊物</a></li><li><a href="#">交流培训</a></li><li><a href="#">咨询服务</a></li><li><a href="#">统计工作</a></li><li><a href="#">通知公告</a></li></ul></div><div class="mainPic"></div><div class="main-zone" class="clearFix"><div class="notice"><div class="leftContent"><img src="./images/smallhuoche.png" alt="" class="noticePic"><span>公告：中国地方铁路协会网站已经开通，网站是协会的“窗口”...</span></div><div class="rightContent"><a href="">查看更多</a><img src="data:images/doubleRight.gif" alt="" class="showMany"></div></div><div class="show1" class="clearFix"><ul><li><img src="./images/show1.png" alt="" class="show1Img"></li><li class="show1-mid"><div class="show1-top"><div class="leftShow1"><img src="./images/navbg1.png" alt=""><span>社会动态</span></div><div class="rightShow1" class="clearFix"><a href="#">更多&nbsp;</a><img src="./images/doubleRight.gif" alt="" class="showMany"></div></div><div class="mainShow1"><ul><li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark">中国地方铁路协会一届二次监事会...</a></li></ul></div></li><li class="show1-right"><div class="show1-top"><div class="leftShow1"><img src="./images/navbg1.png" alt=""><span>社会动态</span></div><div class="rightShow1"><a href="#">更多&nbsp;</a><img src="./images/doubleRight.gif" alt="" class="showMany"></div></div><div class="mainShow1"><ul><li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li><li><a href="#" class="mark2">中国地方铁路协会一届二次监事会...</a></li></ul></div></li></ul></div><div class="show2"></div> <div class="show3" class="clearFix()"><div class="show3Left"><div><img src="./images/zcfg.png" alt=""></div><ul class="showNews"><li class="borderBottom"><a href="#">中国地方铁路协会一届二次监事会中国地方铁路协会一届二次监事会...</a><span>2019/5/20</span></li><li class="borderBottom"><a href="#">中国地方铁路协会一届二次监事会中国地方铁路协会一届二次监事会...</a><span>2019/5/07</span></li><li><a href="#">中国地方铁路协会一届二次监事会中国地方铁路协会一届二次监事会...</a><span>2019/5/20</span></li></ul></div><div class="show3Right"><div><img src="./images/hyzx.png" alt=""></div><ul class="showNews"><li class="borderBottom"><a href="#">荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市</a><span>2019/5/20</span></li><li class="borderBottom"><a href="#">荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市</a><span>2019/5/07</span></li><li><a href="#">荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市荆州市</a><span>2019/5/20</span></li></ul></div></div><div class="show4"></div><div class="show5"><div class="show5Left"><div class="show5Left-top" ><div class="article">协会刊物</div><div class="many" ><a href="#">更多&nbsp;</a><img src="./images/doubleRight.gif" alt="" ></div></div><ul ><li>《地方铁路信息》中国铁路科技创新成就展</li><li>长三角地区省会高铁站全部实现空铁无缝隙换乘...</li><li>我国铁路2018年底开通10条新线高铁运输能...</li><li>上海局集团公司创新物资管理促进降本增效</li><li>蒙煤外运大通道准硕铁路开通运营</li><li>京张高铁八达岭隧道贯通</li></ul></div><div class="show5Right"><div class="show5Right-top"><div class="article">会员风采</div></div><ul><li><img src="./images/show5.png" alt=""></li><li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li><li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li><li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li><li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li><li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li><li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li><li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li><li><a>中铁上海设计院集团有限公司（简称上铁院）</a></li></ul></div></div><h1>交流培训</h1><div class="show6"><div class="show6Left"><img src="./images/show6.png" alt=""></div><div class="show6Right"><div class="show6Right-top" class="clearFix"><div class="iconAndLetterLeft"><img src="./images/kj_icon@2x.png" alt="" width="18px" height="18px"><a href="#">&nbsp;培训动态</a></div><div class="iconAndLetterRight"><a href="#">更多&nbsp;</a><img src="./images/icon2-j-t.png" alt=""  width="18px" height="18px"></div></div><div class="show6Right-main"><h5>禹毫铁路公司邀请铁路专家杨建兴一行莅临指导及培训</h5><span>2019-08-20</span><span>5月12日至13日，禹毫铁路公司邀请原体味到副总工程师杨建兴等铁路专家一行莅临禹毫铁路公司帮助、指导工作。禹毫公司总经理王子华、常务副总经理甘立尚等领导参加...</span><h5>禹毫铁路公司邀请铁路专家杨建兴一行莅临指导及培训</h5><span>2019-08-20</span><span>5月12日至13日，禹毫铁路公司邀请原体味到副总工程师杨建兴等铁路专家一行莅临禹毫铁路公司帮助、指导工作。禹毫公司总经理王子华、常务副总经理甘立尚等领导参加...</span><h5>禹毫铁路公司邀请铁路专家杨建兴一行莅临指导及培训</h5><span>2019-08-20</span><span>5月12日至13日，禹毫铁路公司邀请原体味到副总工程师杨建兴等铁路专家一行莅临禹毫铁路公司帮助、指导工作。禹毫公司总经理王子华、常务副总经理甘立尚等领导参加...</span></div></div></div></div><div class="bottomNav"><div class="top" class="bottomBorder2"><ul><li><a href="#">友情链接</a></li><li><a href="#" class="triangle">中央和国家部委</a></li><li><a href="#" class="triangle">国家铁路集团所属各单位</a></li><li><a href="#" class="triangle">铁路相关单位</a></li></ul></div><div class="center"><ul><li><a href="#">常见问题</a></li><li><a href="#">在线客服</a></li><li><a href="#">网站地图</a></li><li><a href="#">安全提示</a></li><li><a href="#">内部邮箱</a></li><li><a href="#">门户网站</a></li></ul><img src="./images/48bottom.png" alt=""><img src="./images/48bottom2.png" alt=""></div><div class="bottom"><p>中国地方铁路协会 | 电话：010-09098989 | 北京市丰台区科学城海鹰路9号院3号楼 | 京ICP证7889768号</p><p>【京ICP备13032135号】 【京公网安备11010602004570号】</p></div></div></div>
</body>
</html>

HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07相关推荐

html css3 向上气泡,html5+css3气泡组件的实现_css3_CSS_网页制作
前言气泡组件在实际工作中非常普遍,无论是网页中还是app中,比如: 我们这里所谓气泡组件是指列表型气泡组件,这里就其dom实现,css实现,js实现做一个讨论,最后对一些细节点做一些说明,希望对各位 ...
html5 x5引擎,HTML5+CSS3从入门到精通之快速了解X5内核浏览器，video兼容
本篇文章主要讲述HTML5+CSS3从入门到精通之快速了解X5内核浏览器,video兼容,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. 使用vue-video-player在移 ...
CSS3快速入门：三、美化网页
美化网页 CSS系列文章目录 CSS3快速入门:一.三种CSS导入方式 CSS3快速入门:二.CSS选择器 CSS3快速入门:三.美化网页 CSS3快速入门:四.盒子模型 CSS3快速入门:五.浮动 ...
HTML5+CSS3从入门到精通中文pdf版
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...
HTML5 CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...
html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
CSS3快速入门：五、浮动
浮动在CSS中,浮动是非常重要的一个功能,主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动. CSS系列文章目录 CSS3快速入门:一.三种CSS导入方式 CSS3快速入门:二.CSS ...
html 线条样式,HTML5+CSS3从入门到精通线条样式如何设置
本篇教程探讨了HTML5+CSS3从入门到精通线条样式如何设置,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < lineWidth: 设置线条的宽度,值是一 ...
Java快速入门-01-基础篇
Java快速入门-01-基础篇如果基础不好或者想学的很细,请参看:菜鸟教程-JAVA 本笔记适合快速学习,文章后面也会包含一些常见面试问题,记住快捷键操作,一些内容我就不转载了,直接附上链接,嘻嘻 ...

HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07

myday6-day07 网页的制作实战（附自己的代码）（仿一个网站的网页）

网页效果图

自己的代码实现：

HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07相关推荐

最新文章

热门文章