摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿php中文網(wǎng)導(dǎo)航及視頻模塊布局</title> </head> <style> *{ margin: 0px; padding:&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿php中文網(wǎng)導(dǎo)航及視頻模塊布局</title>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background: #F3F5F7;
}
.daohang{
background:#000000;
height:60px;
}
.logo{
margin-left:0px;
display: inline-block;
}
.daohang ul{
margin: -2px 30px;
position: absolute;
line-height: 60px;
display: inline-block;
}
.daohang li{
padding: 0 25px;
display: inline-block;
vertical-align: middle;
color:rgba(255,255,255,.7);
}
.daohang ul .active{
padding: 0 25px;
display: inline-block;
vertical-align: middle;
background:#363C41;
}
.pic{
margin:0px 15px;
padding: 15px;
display: inline-block;
float: right;
}
.pic img{
border-radius: 14px;
}
.video{
width: 780px;
height: 520px;
background: #FFFFFF;
margin: 50px 50px;
border-radius: 20px
}
h4{
margin: 0px 25px;
padding: 10px;
}
.lesson{
margin: 30px 8px;
display: inline-block;
width: 240px;
height: 180px;
}
.lesson img{
border-radius: 25px;
box-shadow: 3px 12px 15px #ccc;
}
</style>
<body>
<!-- 導(dǎo)航 -->
<div>
<div>
<a href="ipnx.cn"><img height="60px" src="http://ipnx.cn/static/images/logo.png" /></a>
</div>
<ul>
<li>首頁</li>
<li>視頻教程</li>
<li>社區(qū)問答</li>
<li>編程詞典</li>
<li>手冊下載</li>
<li>工具下載</li>
<li>特色課程</li>
<li>菜鳥學(xué)堂</li>
</ul>
<div><img src="http://img.php.cn/upload/avatar/000/126/153/5b592fa41732b439.jpg" width="28px" height="28px" /></div>
</div>
<!-- 視頻教程 -->
<div>
<h4>最新課程</h4>
<hr/>
<div><img src="http://img.php.cn/upload/course/000/000/001/5c36af3ee3a3c542.jpeg" width="240px" height="180px" ></div>
<div><img src="http://img.php.cn/upload/course/000/000/001/5c36af3ee3a3c542.jpeg" width="240px" height="180px" ></div>
<div><img src="http://img.php.cn/upload/course/000/000/001/5c36af3ee3a3c542.jpeg" width="240px" height="180px" ></div>
<div><img src="http://img.php.cn/upload/course/000/000/001/5c36af3ee3a3c542.jpeg" width="240px" height="180px" ></div>
<div><img src="http://img.php.cn/upload/course/000/000/001/5c36af3ee3a3c542.jpeg" width="240px" height="180px" ></div>
<div><img src="http://img.php.cn/upload/course/000/000/001/5c36af3ee3a3c542.jpeg" width="240px" height="180px" ></div>
</div>
</body>
</html>
批改老師：天蓬老師批改時間：2019-01-13 09:38:21
老師總結(jié)：background:#000000;以后不要這樣寫了, 要么簡寫: background:#000, 要么用英文: background:blank;