HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07
生活随笔
收集整理的這篇文章主要介紹了
HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
myday6-day07 網(wǎng)頁的制作實(shí)戰(zhàn)（附自己的代碼）（仿一個網(wǎng)站的網(wǎng)頁）
網(wǎng)頁效果圖
自己的代碼實(shí)現(xiàn)：
<!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>/* 導(dǎo)航欄出問題 *//* 布局用浮動+ul li和盒子模型做 區(qū)域用div劃分可以，最好用ul li比較方便*//* padding值要內(nèi)減 注意，還沒有解決右面藍(lán)色可視區(qū)溢出，隱藏了滾動條只是*//* .borderBottom{border-bottom:1px solid #d8d8d8;給盒子單獨(dú)加線，很靈活，很好用} */* {padding: 0;margin: 0;}/* html{overflow-x:hidden;overflow-y:auto;} */body{/* body的最小寬度min-width設(shè)置成上面的固定寬度一致就可以解決瀏覽器縮小頁面右面截斷和留白的問題，這個很有用。但是放大頁面還是會有些問題。不設(shè)置的話會更糟糕，中國地方鐵路協(xié)會原網(wǎng)站也是出現(xiàn)這種問題,是縮小的時候主圖會留白，但是我的問題是圖片小的放的話原窗口會留白，縮小沒有。已解決，不是隱藏水平滾動條，而是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;}/* 寫到這里，都是從外向里寫的是最順手的，但是結(jié)構(gòu)越簡便越好，按順序一步一步來是比較好的，能用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;}/* 為什么這樣設(shè)置不成功.bottomBorder2{border-bottom: 1px solid #ffffff;} *//* show6卡了一下，不設(shè)置高度main里面，都全下去了。 */</style> </head> <body><div class="broswer"><div class="header"><div class="h-left"></div><div class="mid">請輸入關(guān)鍵字</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="#">協(xié)會概況</a></li><li><a href="#">協(xié)會動態(tài)</a></li><li><a href="#">政策法規(guī)</a></li><li><a href="#">行業(yè)資訊</a></li><li><a href="#">會員專區(qū)</a></li><li><a href="#">協(xié)會刊物</a></li><li><a href="#">交流培訓(xùn)</a></li><li><a href="#">咨詢服務(wù)</a></li><li><a href="#">統(tǒng)計工作</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>公告：中國地方鐵路協(xié)會網(wǎng)站已經(jīng)開通，網(wǎng)站是協(xié)會的“窗口”...</span></div><div class="rightContent"><a href="">查看更多</a><img src="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>社會動態(tài)</span></div><div class="rightShow1" class="clearFix"><a href="#">更多 </a><img src="./images/doubleRight.gif" alt="" class="showMany"></div></div><div class="mainShow1"><ul><li><a href="#" class="mark">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li></ul></div></li><li class="show1-right"><div class="show1-top"><div class="leftShow1"><img src="./images/navbg1.png" alt=""><span>社會動態(tài)</span></div><div class="rightShow1"><a href="#">更多 </a><img src="./images/doubleRight.gif" alt="" class="showMany"></div></div><div class="mainShow1"><ul><li><a href="#" class="mark2">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark2">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark2">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark2">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark2">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark2">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark2">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a></li><li><a href="#" class="mark2">中國地方鐵路協(xié)會一屆二次監(jiān)事會...</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="#">中國地方鐵路協(xié)會一屆二次監(jiān)事會中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a><span>2019/5/20</span></li><li class="borderBottom"><a href="#">中國地方鐵路協(xié)會一屆二次監(jiān)事會中國地方鐵路協(xié)會一屆二次監(jiān)事會...</a><span>2019/5/07</span></li><li><a href="#">中國地方鐵路協(xié)會一屆二次監(jiān)事會中國地方鐵路協(xié)會一屆二次監(jiān)事會...</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">協(xié)會刊物</div><div class="many" ><a href="#">更多 </a><img src="./images/doubleRight.gif" alt="" ></div></div><ul ><li>《地方鐵路信息》中國鐵路科技創(chuàng)新成就展</li><li>長三角地區(qū)省會高鐵站全部實(shí)現(xiàn)空鐵無縫隙換乘...</li><li>我國鐵路2018年底開通10條新線高鐵運(yùn)輸能...</li><li>上海局集團(tuán)公司創(chuàng)新物資管理促進(jìn)降本增效</li><li>蒙煤外運(yùn)大通道準(zhǔn)碩鐵路開通運(yùn)營</li><li>京張高鐵八達(dá)嶺隧道貫通</li></ul></div><div class="show5Right"><div class="show5Right-top"><div class="article">會員風(fēng)采</div></div><ul><li><img src="./images/show5.png" alt=""></li><li><a>中鐵上海設(shè)計院集團(tuán)有限公司（簡稱上鐵院）</a></li><li><a>中鐵上海設(shè)計院集團(tuán)有限公司（簡稱上鐵院）</a></li><li><a>中鐵上海設(shè)計院集團(tuán)有限公司（簡稱上鐵院）</a></li><li><a>中鐵上海設(shè)計院集團(tuán)有限公司（簡稱上鐵院）</a></li><li><a>中鐵上海設(shè)計院集團(tuán)有限公司（簡稱上鐵院）</a></li><li><a>中鐵上海設(shè)計院集團(tuán)有限公司（簡稱上鐵院）</a></li><li><a>中鐵上海設(shè)計院集團(tuán)有限公司（簡稱上鐵院）</a></li><li><a>中鐵上海設(shè)計院集團(tuán)有限公司（簡稱上鐵院）</a></li></ul></div></div><h1>交流培訓(xùn)</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="#"> 培訓(xùn)動態(tài)</a></div><div class="iconAndLetterRight"><a href="#">更多 </a><img src="./images/icon2-j-t.png" alt="" width="18px" height="18px"></div></div><div class="show6Right-main"><h5>禹毫鐵路公司邀請鐵路專家楊建興一行蒞臨指導(dǎo)及培訓(xùn)</h5><span>2019-08-20</span><span>5月12日至13日，禹毫鐵路公司邀請?jiān)w味到副總工程師楊建興等鐵路專家一行蒞臨禹毫鐵路公司幫助、指導(dǎo)工作。禹毫公司總經(jīng)理王子華、常務(wù)副總經(jīng)理甘立尚等領(lǐng)導(dǎo)參加...</span><h5>禹毫鐵路公司邀請鐵路專家楊建興一行蒞臨指導(dǎo)及培訓(xùn)</h5><span>2019-08-20</span><span>5月12日至13日，禹毫鐵路公司邀請?jiān)w味到副總工程師楊建興等鐵路專家一行蒞臨禹毫鐵路公司幫助、指導(dǎo)工作。禹毫公司總經(jīng)理王子華、常務(wù)副總經(jīng)理甘立尚等領(lǐng)導(dǎo)參加...</span><h5>禹毫鐵路公司邀請鐵路專家楊建興一行蒞臨指導(dǎo)及培訓(xùn)</h5><span>2019-08-20</span><span>5月12日至13日，禹毫鐵路公司邀請?jiān)w味到副總工程師楊建興等鐵路專家一行蒞臨禹毫鐵路公司幫助、指導(dǎo)工作。禹毫公司總經(jīng)理王子華、常務(wù)副總經(jīng)理甘立尚等領(lǐng)導(dǎo)參加...</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">國家鐵路集團(tuán)所屬各單位</a></li><li><a href="#" class="triangle">鐵路相關(guān)單位</a></li></ul></div><div class="center"><ul><li><a href="#">常見問題</a></li><li><a href="#">在線客服</a></li><li><a href="#">網(wǎng)站地圖</a></li><li><a href="#">安全提示</a></li><li><a href="#">內(nèi)部郵箱</a></li><li><a href="#">門戶網(wǎng)站</a></li></ul><img src="./images/48bottom.png" alt=""><img src="./images/48bottom2.png" alt=""></div><div class="bottom"><p>中國地方鐵路協(xié)會 | 電話：010-09098989 | 北京市豐臺區(qū)科學(xué)城海鷹路9號院3號樓 | 京ICP證7889768號</p><p>【京ICP備13032135號】 【京公網(wǎng)安備11010602004570號】</p></div></div></div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UART通信
- 下一篇： 二进制bit0是什么意思_什么是ip地址