时间：2023-09-28 06:48:01 | 来源：网站运营
时间：2023-09-28 06:48:01 来源：网站运营
网页布局案例：
在线咨询
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/index.css"></head><body> <!--头部--> <div class="header"> <div class="logo"> <img src="image/logo.png" alt="logo"> </div> <div class="nav"> <ul> <li>首页</li> <li>图片</li> <li>视频</li> <li>手记</li> </ul> </div> </div> <!--主体--> <div class="main"></div> <!--底部--> <div class="footer"></div></body></html>2、CSS部分*{ padding:0; margin: 0;}.header{ width: 100%; height: 100px;}.header img{ width: 300px; height: 85px; padding-left: 100px;}.header .logo{ float: left;}.header .nav{ float: right;}.header .nav ul{ padding-right: 100px;}.header .nav ul li{ float: left; list-style: none; width: 80px; height: 100px; line-height: 100px; font-size: 15px; font-weight: bolder; color: #7d7d7d;}<div class="top"> <img src="image/1.jpeg"></div><div class="topLayer"></div><div class="topLayer-top"> <div class="word">MY BEAUTIFUL LIFE</div> <button>LOOK MORE ></button></div>2、CSS部分.main .top{ width: 100%; height: 600px;}.main .top img{ width: 100%; height: 600px;}.main .toplayer{ position: absolute; top: 100px; left: 0; background-color: #000; width: 100%; height: 600px; opacity: 0.5;}.main .topLayer-top{ width: 500px; height: 300px; position: absolute; top: 400px; margin-top: -150px; z-index: 2; right: 50%; margin-right: -250px;}.main .topLayer-top .word{ padding-top: 100px; color: #fff; font-size: 45px; font-weight: bolder; text-align: center; font-family: "微软雅黑";}.main .topLayer-top button{ width: 200px; height: 60px; margin-top: 50px; color: #fff; background-color: #F5704F; font-family: "微软雅黑"; text-align: center; font-weight: bolder; font-size: 14px; border-radius: 8px; clear: both; margin-left: 150px;}<div class="middle"> <div class="m-top"> <div class="commen weibo"> <img src="image/weibo.png"> <div class="comm">MIMCROBLOG</div> </div> <div class="commen weixin"> <img src="image/weixin.png"> <div class="comm">WECHAT</div> </div> <div class="commen qq"> <img src="image/QQ.png"> <div class="comm">QQ</div> </div> </div> <div class="m-middle"> "I want to give good things to record dawn,<br> after the recall will be very beautify." </div> <div class="m-bottom"> <div class="m-com"> <img src="image/03-01.jpg"> <div class="des1">Cool Image</div> <div class="des2">Record The Picture</div> </div> <div class="m-com"> <img src="image/03-02.jpg"> <div class="des1">Cool Image</div> <div class="des2">Record The Picture</div> </div> <div class="m-com"> <img src="image/03-03.jpg"> <div class="des1">Cool Image</div> <div class="des2">Record The Picture</div> </div> </div></div>2、CSS部分.main .middle{ width: 1000px; margin: 0 auto;}.main .middle .m-top .commen{ float: left; width: 33.3%; padding-top: 50px; text-align: center;}.main .middle .m-top .commen .comm{ font-size: 20px; color: #7d7c7f; font-weight: bold; padding-top: 20px;}.main .middle .m-middle{ font-size: 22px; color: #e19796; font-weight: bold; padding-top: 50px; font-style: italic; text-align: center; padding-bottom: 50px;}.clear{ clear: both;}.main .middle .m-bottom .m-com{ padding: 10px; float: left; text-align: center; font-size: 20px; font-weight: bold;}.main .middle .m-bottom .m-com img{ width: 310px; height: 260px;}.main .middle .m-bottom .m-com .des1{ color: #7d7d7f; padding-top: 20px;}.main .middle .m-bottom .m-com .des2{ padding-top: 10px; color: #bdbdbc;}<div class="bottom"> <div class="content"> <div class="titile"> FROM THE PHOTO ALBUM </div> <div class="pic-content"> <dl> <dt><img src="image/04-01.jpg"></dt> <dd class="word">Life is like a book, just read more and more refined, more write more carefully. When read ,mind open, all things have been indifferent to heart. Life is the precipitation. </dd> </dl> <dl> <dt><img src="image/04-02.jpg"></dt> <dd class="word">Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more. </dd> </dl> </div> <div class="clear"></div> </div></div>2、CSS部分.main .bottom{ background-color: #f9f9f9;}.main .bottom .content{ width: 1000px; margin: 0 auto;}.main .bottom .content .titile{ text-align: center; font-size: 20px; font-weight: bold; color: #7d7c7f; font-family: "微软雅黑"; padding-top: 50px; padding-bottom: 50px;}.main .bottom .content .pic-content dl{ float: left; width: 470px; margin: 10px 12px;}.main .bottom .content .pic-content dl img{ width: 470px; height: 460px;}.main .bottom .content .pic-content dl .word{ padding-top: 20px; font-size: 20px; font-weight: bold; color: #7d7c7f; padding-bottom: 50px;}<div class="footer"> ©2020 123456.com </div>2、CSS部分.footer{ width: 100%; height: 70px; background-color: #292c35; color: #fff; font-size: 15px; font-family: "微软雅黑"; text-align: center; line-height: 70px;}关键词：布局
