1. 新闻
代码:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box {
width: 600px;
height: 500px;
border: 1px solid #aaa;
margin: 0 auto;
margin-top: 20px;
border-top:5px solid blue;
}
div .title {
margin: 20px 20px 0px 20px;
/* background-color: red; */
text-align: center; /* 运用父级居中 */
border-bottom:1px solid #CCCCCC;
}
.title h2 {
font-weight: normal;
margin-bottom: 5px;
}
.title h6 {
font-size: 12px;
font-weight: normal;
margin-bottom: 5px;
}
div .content {
margin:0 auto;
width: 500px;
height: 295px;
margin-top: 10px;
}
span {
font-size: 12px;
font-weight: normal;
color:#990000;
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<h2>大话西游2</h2>
<h6>2019年01月02日 18:19 <span>网易新闻</span>（106712人参与） 收藏本文</h6>
</div>
<div class="content">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553937018724&di=e8b91d301733d2575d7b9d2cad8e58da&imgtype=0&src=http%3A%2F%2Fimages.17173.com%2F2015%2Fnews%2F2015%2F06%2F29%2Fmj0629bs01s.jpg">
</div>
</div>
</body>
</html>
个人资料
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box {
width: 200px;
height: 359px;
border: 1px solid #aaa;
margin: 10px auto;
}
.box .title {
background-color: #aaa;
padding: 3px;
}
.box .poto {
border: 2px solid #aaa;
margin: 10px auto;
width: 160px;
height: 160px;
}
.box .poto img {
border-radius: 16px;
}
.box .soft {
text-align: center;
border-bottom:1px dotted #aaa;
padding-bottom: 10px;
}
.friend{
text-align:center;
padding-top:20px;
}
.friend input{
width:67px;
height:21px;
outline-style:none;
margin-bottom:5px;
}
</style>
</head>
<body>
<div class="box">
<div class="title">个人资料 </div>
<div class="poto">
<img
width="160px"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553938225934&di=0f6125565e6b2e9be4349047897a8993&imgtype=0&src=http%3A%2F%2Fimgtu.5011.net%2Fuploads%2Fcontent%2F20170301%2F4167621488340521.jpg">
</div>
<div class="soft">
<span > 醉小义 </span> <br />
<button style="margin-top:3px">大话西游2</button>
</div>
<div class="friend">
<input type="button" value="一世朋友">
<input type="button" value="大话西游2">
<input type="button" value="一路有你">
<input type="button" value="粉丝">
</div>
</div>
</body>
</html>
3. 新闻简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style >
*{
margin: 0px;
padding: 0px;
}
.box {
height: 300px;
width: 200px;
background-image:url('bg.gif');
border: solid 1px #009900;
margin: 0 auto;
}
.title {
color:whitesmoke;
margin: 10px;
border-left: #009900 5px solid;
font-family: "微软雅黑";
padding-left: 5px;
font-size: 16px;
line-height: 30px
}
.content {
width: 180px;
height: 243px;
background-color: white;
margin: 0 auto;
overflow: hidden;
}
ul li{
height: 30px;
line-height: 30px;
border-bottom: 1px dashed #666666;
padding-left: 10px;
background-image: url('tb.gif');
background-repeat: no-repeat;
background-position: left center
}
ul li a{
text-decoration: none;
}
/*另一种
*{
margin:0;
padding:0;
}
ul li{
list-style:none;
}
.box{
width:240px;
height:167px;
border:1px solid #d9e0ee;
border-top:2px solid #ff8400;
margin:10px auto;
}
.title{
border-bottom:1px solid #d9e0ee;
height:36px;
line-height:36px;
padding-left:20px;
}
.content li{
background-image:url("li_bg.jpg");
background-repeat:no-repeat;
background-position:left center;
padding-left:10px;
line-height:20px;
}
.content ul{
margin-left:10px;
margin-top:10px;
}
.content a{
color:#666666;
font-size:14px;
text-decoration:none;
}
.content a:hover{
color:#DB6B12;
text-decoration:underline;
}
*/
</style>
<body>
<div class="box">
<div class="title">
大话西游2
</div>
<div class="content">
<ul class="list">
<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>
</body>
</html>
