<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin:0; background-color: #F5F5F5; line-height: 1.8; font-size: 16px; font-weight: 300; } #head{ height:320px; background-image: url("__STATIC__/images/titlepic.jpg"); } #title{ width:100%; position: fixed; background-color: rgba(0,0,0,0.5);/*fixed不会占据文档流*/ padding-top: 10px; padding-bottom: 10px; padding-left: 250px; } #title a{ color:white; font-size: 20px; margin-left:90px; text-decoration:none; } #title a:hover{ color:pink; } #title #msc{ position: fixed; top:0; right:0; } #desc{ height:149px; position: relative; top:106px; } #kratos{ height:1700px; padding-top: 20px; padding-bottom: 20px; } #row{ width:1100px; height:100%; margin:0 auto; } #main{ width:66%; height:100%; float:left; } .content{ width:100%; height:220px; border:1px solid blue; margin-bottom: 15px; } .content .tu{ margin-left:20px; margin-top:20px; width:234px; height: 139px; padding:2px; border: 0.2px solid yellow; } .content .tu img{ width:234px; height: 139px; } .content .title{ position: relative; top:-143px; left:260px; width:450px; height:28px; padding-left: 20px; } .content .title span{ font-size: 20px; font-weight:588; } .content .neirong{ position: relative; width:420px; height:109px; top:-153px; left:260px; padding-left: 20px; } .content .contentinfo{ position: relative; top:-126px; width:100%; height:35px; } .content .contentinfo a{ text-decoration:none; margin-left: 20px; color:black; } .quanwen{ float:right; } #sidebar{ height:100%; width:32%; background-color: yellow; float: right; } #toutu{ width:100%; height:228px; margin-bottom: 15px; border:1px solid black; } #pinglun{ width:100%; height:400px; margin-bottom: 15px; border:1px solid black; } #lunbotu{ width:100%; height:255px; margin-bottom: 15px; border:1px solid black; } #paihang{ width:100%; height:350px; margin-bottom: 15px; border:1px solid black; } #footer{ height:182px; background-color: black; } #info{ width:60%; height:60%; margin:0 auto; position: relative; top:20%; background-color: red; text-align: center; } #info span{ margin-top:20px; font-size: 40px; } </style> </head> <body> <!--头部开始--> <div id="head"> <div id="title"> <a href=?>首页</a> <a href=?>文章</a> <a href=?>功能</a> <a href=?>友链</a> <a href=?>留言</a> <a href=?>关于</a> <div id="but"> <button id="msc">背景音乐点我开启</button> </div> </div> <div id="desc"> 这里可以弄个签名logo 这里可以弄个签名logo 这里可以弄个签名logo </div> </div> <!--头部结束--> <!--主体开始--> <div id="kratos"> <div id="row"> <div id="main"> <?php $x = 0; while($x<7){ ?> <div class="content"> <div class="tu"><img src="__STATIC__/images/baozi.jpg"></div> <div class="title"><span>买包子误付14万 支付宝付款为什么会误付14万元</span></div> <div class="neirong"><p>近日，河南郑州一包子店，月底查账时，老板发现有顾客竟支付了14万多元人民币！一个多月过去，顾客愣是没发现多支付十几万。老板说，这么多钱不是自己的，</p></div> <div class="contentinfo"><a href=?>2018-5-8</a><a href=?>81条评论</a><a href=?>666次阅读</a><a href=?>作者：cl</a> <a href=? class="quanwen">>>阅读全文</a></div> </div> <?php $x++; } ?> <div class="fanye">1234567我是翻页</div> </div> <div id="sidebar"> <div id="toutu">这里可以放我的资料/头像</div> <div id="pinglun">我是最近评论<br>我是最近评论我是最近评论<br>我是最近评论</div> <div id="lunbotu">我是轮播图</div> <div id="paihang">我是随机/排行文章</div> 这里可以空着备用 </div> </div> </div> <!--主体结束--> <!--尾部开始--> <div id="footer"> <div id="info"> <span id="beian">我是备案信息</span> </div> </div> <!--尾部结束--> </body> </html>