<!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>
