您的位置：首页 > 其它

简单切个图

2016-04-10 13:55 281 查看
多练多看

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="简单页面">
<title>小小练习下</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="left">
<ul id="nav_1">
<li>编辑推荐</li><hr/>
<li>最受欢迎</li><hr/>
<li>最新启动</li><hr/>
<li>快要结束</li><hr/>
<li>成功案例</li>
</ul>
<ul id="nav_2">
<li>音乐  |<span>Music</span></li>
<li&g
4000
t;电影  |<span>Movie</span></li>
<li>戏剧  |<span>Music</span></li>
</ul>
</div>

<div id="right">
<div class="main">

<h1>音乐/ Music</h1>
<img src="image/008.jpg" alt="JJ" >
<div class="background">
<h4>华人音乐</h4>
<h5>创建人：火火</h5>
<p>关注和支持华人的文化创意从这里开始!</p>
<div class="runtime">5000/9000</div>
<div class="time">还有9天</div>
</div>
</div>
<div class="main">

<h1>音乐/ Music</h1>
<img src="image/008.jpg" alt="JJ" >
<div class="background">
<h4>华人音乐</h4>
<h5>创建人：火火</h5>
<p>关注和支持华人的文化创意从这里开始!</p>
<div class="runtime">5000/9000</div>
<div class="time">还有9天</div>
</div>
</div>
<div class="main">

<h1>音乐/ Music</h1>
<img src="image/008.jpg" alt="JJ" >
<div class="background">
<h4>华人音乐</h4>
<h5>创建人：火火</h5>
<p>关注和支持华人的文化创意从这里开始!</p>
<div class="runtime">5000/9000</div>
<div class="time">还有9天</div>
</div>
</div>
<div class="main">

<h1>音乐/ Music</h1>
<img src="image/008.jpg" alt="JJ" >
<div class="background">
<h4>华人音乐</h4>
<h5>创建人：火火</h5>
<p>关注和支持华人的文化创意从这里开始!</p>
<div class="runtime">5000/9000</div>
<div class="time">还有9天</div>
</div>
</div>
<div class="main">

<h1>音乐/ Music</h1>
<img src="image/008.jpg" alt="JJ" >
<div class="background">
<h4>华人音乐</h4>
<h5>创建人：火火</h5>
<p>关注和支持华人的文化创意从这里开始!</p>
<div class="runtime">5000/9000</div>
<div class="time">还有9天</div>
</div>
</div>
<div class="main">

<h1>音乐/ Music</h1>
<img src="image/008.jpg" alt="JJ" >
<div class="background">
<h4>华人音乐</h4>
<h5>创建人：火火</h5>
<p>关注和支持华人的文化创意从这里开始!</p>
<div class="runtime">5000/9000</div>
<div class="time">还有9天</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


*{
margin:0;
padding:0;
font-size:12px;
font-family: arial, 'Microsoft YaHei', '微软雅黑', sans-serif;
}
li{
list-style-type:none;
}
#container{
height:950px;
width:1100px;
background:black;
margin:0 auto;
}
#left{
height:350px;
width:178px;
background-color:#CCC;
float:left;
margin-top:10px;
margin-left:120px;
text-align:center;
}
#nav_1{
height:200px;
width:170px;
back
b8f8
ground-color:#fffafa;
margin-top:4px;
margin-left:4px;
}
#nav_1 li{
list-style: none;
margin:0px 10px 10px 10px;line-height: 28px;font-size: 15px;font-weight:500;color:#483d8b;
}
hr{
height:2px; width:130px;margin:0 auto;color:#CCC;border:none;border-top:2px solid;}
}

#nav_2{list-style: none;}
#nav_2 li{display: block;height:25px;margin:15px 22px 0px 22px;letter-spacing:1px;background-color:#808080;font-size:15px;}
#nav_2 li span{margin:10px;color:white;}
#right{
width: 700px;height:900px;margin:10px 30px 0px 15px;float:left;background-color:white;
}
.main{
height:400px;width:200px;background-color:#CCC;margin:20px 10px 10px 20px;float:left;position:relative;
}
img{height:244px;width:180px;margin-left:10px;}
h1{
color:white;font-size:18px;padding-left:10px;
}
.background{
background-color:white;height:120px;;width:180px;position:absolute;bottom:10px;left:10px;
}
h4{color:red;font-size:19px;padding-left:4px;}
h5{font-weight:200;padding-left:4px;color:#808080}
p{
padding-left:4px;font-weight:700;font-size:13px;
}
.runtime{width:100px;
margin-left:2px;margin-top: 5px;padding-top:5px;height:25px;background-color:rgb(190,190,190);float: left;text-align: center;font-size: 18px;}
.time{width:76px;
margin-right:2px;height:30px;margin-top:5px;background-color:rgb(215,215,215);float: right;text-align: center;font-size: 18px; }


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航