<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="13_prac.css">
</head>
<body>
<!-- 頁面頭部分 -->
<header>
<nav>
<div class="logo">
<img src="images/logo.png">
</div>
<div class="navbar">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">課程</a></li>
<li><a href="#">職業規劃</a></li>
</ul>
</div>
<div class="personal">
<a href="#">個人中心 <img src="images/ld.png"></a>
<a href="#"><img src="images/pic.png">xiaoqian</a>
</div>
<div class="search"><!-- 搜索框 -->
<input type="text" placeholder="請輸入關鍵詞" /><!-- 佔位符 -->
<input type="submit" value="" />
</div>
</nav>
</header>
<div class="banner">
<div class="banner-in container">
<div class="slidebar">
<ul>
<li><a href="#">前端開發 <span> > </span> </a></li>
<li><a href="#">後端開發 <span> > </span> </a></li>
<li><a href="#">移動開發 <span> > </span> </a></li>
<li><a href="#">人工智能 <span> > </span> </a></li>
<li><a href="#">商業預測 <span> > </span> </a></li>
<li><a href="#">雲計算&大數據 <span> > </span> </a></li>
<li><a href="#">運維&從測試 <span> > </span> </a></li>
<li><a href="#">UI設計 <span> > </span> </a></li>
<li><a href="#">產品 <span> > </span> </a></li>
</ul>
</div>
<dl class="timetable">
<dt>我的課程表</dt>
<dd>
<h4>繼續學習 程序語言設計</h4>
<p>正在學習-使用對象</p>
</dd>
<dd>
<h4>繼續學習 程序語言設計</h4>
<p>正在學習-使用對象</p>
</dd>
<dd>
<h4>繼續學習 程序語言設計</h4>
<p>正在學習-使用對象</p>
</dd>
<dd>
<a href="#">全部課程</a>
</dd>
</dl>
<ul class="circle">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="recommend container">
<a href="#">精品推薦</a>
<a href="#">JQuery</a>
<a href="#">Spart</a>
<a href="#">MySQL</a>
<a href="#">JavaWeb</a>
<a href="#">MySQL</a>
<a href="#">JavaWeb</a>
<a href="#">修改興趣</a>
</div>
<div class="recom-products container clearfix"><!-- 精品推薦，未給高度則需清除浮動 -->
<div class="recom-hd">
<h4>精品推薦</h4>
<a href="#">查看全部</a>
</div>
<div class="recom-bd">
<ul>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
<li>
<img src="images/pic1.png">
<h5>Think PHP 5.0 博客系統實戰項目演練</h5>
<p><span>高級</span> · 1125人在學習</p>
</li>
</ul>
</div>
</div>
<footer>
<div class="container footer-in">
<div class="footer-l">
<img src="images/logo.png">
<p>學成在線致力於普及中國最好的教育它與中國一流大學和機構合作提供在線課程。<br />© 2017年XTCG Inc.保留所有權利。-滬ICP備15025210號</p>
<a href="#">下載APP</a>
</div>
<div class="footer-r">
<dl>
<dt>關於學成網</dt>
<dd>關於</dd>
<dd>管理團隊</dd>
<dd>工作機會</dd>
<dd>客戶服務</dd>
<dd>幫助</dd>
</dl>
<dl>
<dt>關於學成網</dt>
<dd>關於</dd>
<dd>管理團隊</dd>
<dd>工作機會</dd>
<dd>客戶服務</dd>
<dd>幫助</dd>
</dl>
<dl>
<dt>關於學成網</dt>
<dd>關於</dd>
<dd>管理團隊</dd>
<dd>工作機會</dd>
<dd>客戶服務</dd>
<dd>幫助</dd>
</dl>
</div>
</div>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;/*清除內外邊距*/
}
ul {
list-style: none;/*去掉列表樣式小點*/
}
.clearfix:before, .clearfix:after {/*清除浮動*/
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
a {
color: #050505;
text-decoration: none;/*取消下劃線*/
}
.container {/*公共類,版心*/
width: 1200px;
margin: 0 auto;
}
body {
background-color: #f3f5f7;/*整個頁面的背景色*/
}
input {
border: 0;
box-sizing: border-box;/*css3盒子模型，border和padding包含到width裏面*/
}
header {/*頁面頭部分*/
height: 100px;
overflow: hidden;
}
nav {
height: 42px;
margin: 26px auto;/*盒子水平居中*/
}
.logo {
float: left;
}
.navbar {/*導航欄*/
float: left;
height: 42px;
line-height: 42px;/*文字垂直居中，子元素繼承*/
margin-left: 50px;
}
.navbar li {
float: left;/*三個標籤一行顯示*/
}
.navbar li a {
padding: 0 8px;/*左右內邊距*/
display: block;/*a是行內元素，須轉換爲塊級，繼承高度*/
}
.navbar li a:hover{
border-bottom: 2px solid #00a4ff;/*鼠標放上時底邊框*/
}
.search {/*搜索框*/
width: 410px;
height: 38px;
border: 1px solid #00a4ff;
float: right;/*兩個右浮動注意順序*/
}
.search input[type=text] {/*屬性選擇器*/
width: 360px;
height: 38px;
padding-left: 20px;
float: left;
}
.search input[type=submit] {
width: 50px;
height: 38px;
background: #00a4ff url(images/fa-search.phg) center center no-repeat;
float: left;/*行內塊元素之間會有空白縫隙，浮動消除空隙*/
}
.personal {/*個人中心*/
float: right;
height: 42px;
line-height: 42px;
margin: 0 15px 0 35px;
}
.personal img {
margin: 0 8px;
}
.banner {
height: 420px;
background-color: #1c036c;
}
.banner-in {
height: 420px;
background: url(images/banner.jpg);
position: relative;/*子絕父相*/
}
.slidebar {
float: left;
height: 420px;
width: 190px;
background: rgba(0,0,0,0.3);
}
.slidebar li a{
color: #fff;
font-size: 14px;
padding: 0 20px;
display: block;/*轉換成塊級元素*/
height: 45px;/*單行垂直居中，有了行高不用給高度*/
line-height: 45px;
}
.slidebar li a:hover {
color: #00a4ff;
}
.slidebar li a span {
float: right;
font-family: arial;/*符號常用字體*/
}
.timetable {
float: right;
width: 230px;
height: 300px;
margin-top: 50px;
background-color: #fff;
}
.timetable dt {
height: 50px;
line-height: 50px;
background-color: #9bceea;
text-align: center;/*文字水平居中*/
color: #fff;
font-weight: 700;/*加粗*/
letter-spacing: 2px;/*字符間距*/
margin-bottom: 10px;
}
.timetable dd {
width: 193px;
height: 60px;
margin: 0 auto;
border-bottom: 1px solid #ccc;
padding-top: 12px;
box-sizing: border-box;
}
.timetable dd:last-child {/*結構僞類選擇器*/
border: 0;
}
.timetable dd h4 {
font-size: 16px;
font-weight: normal;
color: #4e4e4e;
}
.timetable dd p {
color: #a5a5a5;
font-size: 14px;
margin-top: 5px;
}
.timetable dd a {
height: 38px;
border: 1px solid #00a4ff;
display: block;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-weight: 700;
}
.timetable dd a:hover {
color: #fff;
background-color: #00a4ff;
}
.circle {
width: 180px;
height: 22px;
position: absolute;/*絕對定位*/
bottom: 10px;
left: 50%;
margin-left: -90px;
}
.circle li {
width: 12px;
height: 12px;
float: left;
background-color: rgba(255,255,255,0.4);
margin: 6px 8px;
border-radius: 50%;
cursor: pointer;
}
.circle .current {
width: 19px;
border-radius: 5px;
background-color: #fff;
}
.recommend {
height: 60px;
line-height: 60px;
background-color: #fff;
margin-top: 8px;
box-shadow: 0 2px 2px rgb(0,0,0,0.2);/*盒子陰影*/
}
.recommend a {
padding: 0 30px;
border-right: 1px solid #ccc;
}
.recommend a:first-child {
color: #00a4ff;
}
.recommend a:hover {
color: #00a4ff;
}
.recommend a:last-child {
color: #00a4ff;
border: 0;
float: right;
font-size: 14px;
}
.recom-products {
margin-top: 35px;
}
.recom-hd {
height: 40px;
}
.recom-hd h4 {
float: left;
color: #494949;
}
.recom-hd a {
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 14px;
color: #a5a5a5;
}
.recom-hd a:hover {
color: #00a4ff;
}
.recom-bd ul li {
width: 228px;
height: 270px;
overflow: hidden;/*溢出隱藏*/
box-shadow: 0 4px 4px rgba(0,0,0,0.2);
float: left;
margin-right: 15px;
margin-top: 15px;
}
.recom-bd ul li:nth-child(5n) {
margin-right: 0;
}
.recom-bd li h5,
.recom-bd li p {
padding: 0 20px 0 24px;
margin-top: 12px;
}
.recom-bd li h5 {
font-size: 14px;
line-height: 22px;
font-weight: normal;
}
.recom-bd li p {
font-size: 12px;
color: #999;
}
.recom-bd li span {
color: #ff7c2d;
}
footer {
height: 270px;
margin-top: 100px;
}
.footer-in {
padding-top: 30px;
}
.footer-l {
float: left;
}
.footer-l p {
font-size: 12px;
line-height: 18px;
color: #999;
margin-top: 20px;
}
.footer-l a {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
font-size: 16px;
text-align: center;
line-height: 33px;
margin-top: 15px;
color: #22b0ff;
}
.footer-r {
float: right;
color: #333;
}
.footer-r dl {
float: left;
width: 226px;
}
.footer-r dt {
font-size: 16px;
height: 30px;
}
.footer-r dd {
font-size: 12px;
height: 20px;
}
.footer-r dd a:hover {
color: #00a4ff;
text-decoration: underline;
}
代碼效果參考網站http://www.like.bj.cn/#或者下圖：
