簡介
這是一個簡單的案例會把之前博客中講到的CSS的基本知識串起來姥闭,算是一個稍微綜合一點的案例了!這里我會詳細(xì)的每一部分的進(jìn)行介紹皂贩!
分析首頁的結(jié)構(gòu)
學(xué)成網(wǎng)首頁.jpg
從這張圖中我們可以看到首頁大致分為如下的幾個部分:
- 導(dǎo)航欄部分
- 精品推薦部分
- 頁面尾部部分
準(zhǔn)備工作
CSS初始化
/* css初始化 */
* {
/* 清除所有HTML標(biāo)記的默認(rèn)邊距 */
margin: 0px;
padding: 0px;
}
.clearfix:before,
.clearfix:after {
/* 清楚浮動 */
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
ul {
/* 清楚li的小圓點 */
list-style: none;
}
a { /* 超鏈接的樣式 */
color: #050505;
text-decoration: none;
}
input {
border: 0; /* 所有的表單邊框為0 */
box-sizing: border-box; /* CSS3盒子模型 border 和 padding 都包含到 width 里面去 */
}
.container { /*版心的寬度都是1200,所以集體聲明*/
width: 1200px;
margin: 0 auto;
}
/* css初始化結(jié)束 */
確定版心的大小
可以使用PS的矩陣選框工具確定
版心的大小.png
如圖所示版心的寬為1200px;
導(dǎo)航欄
導(dǎo)航欄的大小為1366px
導(dǎo)航欄的大小.png
可以分為四部分來做:logo、navbar罚渐、search、personal
頁面結(jié)構(gòu)部分:
<!-- 頁面頭 -->
<header>
<nav>
<!-- logo -->
<div class="logo">
<img src="images/logo_03.png" alt="">
</div>
<!-- 導(dǎo)航欄 -->
<div class="navbar">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">課程</a></li>
<li><a href="#">職業(yè)規(guī)劃</a></li>
</ul>
</div>
<!-- 個人中心部分 -->
<div class="personal">
<a href="#">個人中心<img src="images/ling_06.png" alt=""></a>
<a href="#"><img src="images/tou_03.png" > 劉德華</a>
</div>
<!-- 搜索框部分 -->
<div class="search">
<form action="">
<input type="text" placeholder="請輸入關(guān)鍵字">
<input type="submit" value="">
</form>
</div>
</nav>
</header>
CSS的樣式部分
/* 頁面頭開始 */
body {
background-color: #f3f5f7;
}
header {
height: 100px;
overflow: hidden; /* 嵌套的盒字margin合并消除影響 */
}
nav {
width: 1366px;
height: 42px;
margin: 30px auto; /*嵌套的子盒子margin合并*/
}
.logo {
float: left;
}
.navbar {
float: left;
height: 42px;
line-height: 42px; /*讓文字水平居中斑举,行高給父親搅轿,行高可以繼承*/
margin-left: 50px;
}
.navbar li {
float: left;
font-size: 16px;
}
.navbar li a{
display: block; /*行內(nèi)元素給高需要轉(zhuǎn)化為行內(nèi)塊*/
padding: 0 9px;/*行內(nèi)元素不給上下內(nèi)邊距,左右給內(nèi)邊距*/
height: 42px;
}
.navbar li a:hover {
border-bottom: 1px solid #00a4ff; /*鼠標(biāo)放入底邊框*/
}
/* 搜索框部分 */
.search {
width: 410px;
height: 38px;
border: 1px solid #00a4ff;
float: right;
}
.search input[type=text] { /*屬性選擇器*/
width: 360px;
height: 38px;
padding-left: 20px;
box-sizing: border-box; /*css3的屬性富玷,防止padding撐大盒子*/
float: left; /*文本框?qū)儆谛袃?nèi)元素璧坟,行內(nèi)元素之間并排顯示,中間有空隙赎懦,所以添加浮動*/
}
.search input[type=submit] {
width: 50px;
height: 38px;
float: left;
background: #00a4ff url(images/search_06.png) no-repeat center center;
}
/*個人中心部分*/
.personal {
float: right;
height: 42px;
line-height: 42px; /* 這個行高給父親雀鹃, 行高會繼承 */
margin: 0 15px 0 35px; /* 上0 右 15 下0 左 35 */
}
.personal img {
margin: 0 8px;
vertical-align: middle; /*用來控制圖片/表單與文字的對齊*/
}
/* 個人中心部分結(jié)束 */
其中需要注意的幾個點是:
- 因為頁面的底色不是白色所以給body一個大的背景色#f3f5f7
- 導(dǎo)航使用的是ul>li>a的形式
- head里面嵌套著nav盒子,使用overflow: hidden消除影響
- 是文字文水平居中對齊時励两,行高可以給父親盒子黎茎,并且此時不用給父盒子高度,行高是可以繼承的
-
box-sizing: border-box
css3的屬性当悔,防止padding撐大盒子 -
vertical-align: middle
用來控制圖片/表單與文字的對齊
banner部分
結(jié)構(gòu)
<!-- banner部分 -->
<div class="banner">
<div class="banner-in container">
<!-- 左側(cè)導(dǎo)航欄 -->
<div class="slidebar">
<ul>
<li><a href="#">前端開發(fā)<span>></span></a></li>
<li><a href="#">后端開發(fā)<span>></span></a></li>
<li><a href="#">移動開發(fā)<span>></span></a></li>
<li><a href="#">人工智能<span>></span></a></li>
<li><a href="#">商業(yè)預(yù)測<span>></span></a></li>
<li><a href="#">云計算&大數(shù)據(jù)<span>></span></a></li>
<li><a href="#">運維&測試<span>></span></a></li>
<li><a href="#">UI設(shè)計<span>></span></a></li>
<li><a href="#">產(chǎn)品<span>></span></a></li>
</ul>
</div>
<!-- 右側(cè)課表 -->
<dl class="timetable">
<dt>我的課程表</dt>
<dd>
<h4>繼續(xù)學(xué)習(xí) 程序語言設(shè)計</h4>
<p>正在學(xué)習(xí)-使用對象</p>
</dd>
<dd>
<h4>繼續(xù)學(xué)習(xí) 程序語言設(shè)計</h4>
<p>正在學(xué)習(xí)-使用對象</p>
</dd>
<dd>
<h4>繼續(xù)學(xué)習(xí) 程序語言設(shè)計</h4>
<p>正在學(xué)習(xí)-使用對象</p>
</dd>
<dd>
<a href="#">全部課程</a>
</dd>
</dl>
<!-- 小圓圈 -->
<ul class="circle">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
css樣式為:
/* banner開始 */
.banner {
height: 420px;
background-color: #1c036c;
}
.banner-in {
height: 420px ;
background: url(images/banner_03.png) 0 0 no-repeat;
position: relative;
}
.slidebar {
height: 420px;
width: 190px;
background-color: rgba(0,0,0,0.3); /* 盒字背景半透明*/
float: left;
}
.slidebar li a {
color: #fff;
font-size: 14px;
padding: 0 20px; /*上下0 左右20px*/
display: block;
height: 45px;
line-height: 45px; /*大多數(shù)情況下有了行高就不需要給定高度*/
}
.slidebar li a span {
float: right;
font-family: arial; /*符號一般使用這個字體*/
}
.slidebar li a:hover {
color: #00a4ff;
}
.timetable {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.timetable dt {
height: 50px;
background-color: #9bceea;
text-align: center; /*文字水平居中*/
line-height: 50px;
color: #fff;
font-weight: 700;
letter-spacing: 2px; /*設(shè)置字間距*/
margin-bottom: 5px;
}
.timetable dd {
width: 193px;
height: 60px;
margin: 0 auto;
border-bottom: 1px solid #ccc;
padding-top:12px;
box-sizing: border-box;
}
.timetable dd h4{
font-weight: normal;
font-size: 16px;
color: #4e4e4e;
}
.timetable dd p {
color: #a5a5a5;
font-size: 14px;
}
.timetable dd:last-child {
border: 0; /*消除最后一個底邊框*/
}
.timetable dd a {
display: block;
height: 38px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-weight: 700;
}
.timetable dd a:hover {
background-color: #00a4ff;
color: #fff;
}
/* 小圓點模塊 */
.circle {
width: 180px;
height: 22px;
position: absolute;
bottom: 10px;
left: 50%; /*父盒子寬度的一半*/
margin-left: -90px; /*自己寬度的一半*/
}
.circle li {
float: left;
width: 12px;
height: 12px;
margin: 6px 8px;
border-radius: 50%;
background-color: rgba(255,255,255,0.4);
}
/* banner結(jié)束 */
注意點:
- 因為banner里面有個透明的盒子括授,和課程表泡孩,使用子絕父相進(jìn)行定位
- 盒子背景半透明的寫法需要注意
-
font-family: arial
; 符號一般使用這個字體 - 子盒子水平居中對齊的方法
精品推薦模塊
結(jié)構(gòu)
<!-- 精品推薦部分 -->
<div class="recommand container">
<a href="#">精品推薦</a>
<a href="#">Jquery</a>
<a href="#">Spark</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">
<!-- 頭部 -->
<div class="recom-hd clearfix">
<h4>精品推薦</h4>
<a href="#">查看全部</a>
</div>
<!-- 精品推薦主題部分 -->
<div class="recom-bd clearfix">
<ul>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/icon1.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
</ul>
</div>
</div>
CSS樣式:
/* 精品推薦開始 */
.recommand {
height: 60px;
background-color: #fff;
margin-top: 8px;
line-height: 60px;
/* 盒子陰影 水平位置 垂直位置 模糊距離 影子顏色 */
box-shadow: 0 2px 2px rgba(0,0,0,0.2)
}
.recommand a {
padding: 0 30px;
/* 行內(nèi)元素可以設(shè)置border */
border-right: 1px solid #ccc;
}
.recommand a:hover {
color: #00a4ff;
}
.recommand a:first-child {
color: #00a4ff;
font-weight: 700;
}
.recommand a:last-child {
float: right;
border: 0;
color: #00a4ff;
}
.recom-products {
margin-top: 35px;
}
.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,
.prom-bd-l-bottom ul li {
width: 228px;
height: 270px;
background-color:#fff;
overflow: hidden; /*溢出的部分隱藏*/
/* box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內(nèi)/外陰影; */
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
float: left;
margin-right: 15px;
margin-top: 15px;
}
.recom-bd ul li:nth-child(5n) { /*第五個第十個的外邊距為0*/
margin-right: 0;
}
.recom-bd ul li h5,
.recom-bd ul li p,
.prom-bd-l-bottom ul li h5,
.prom-bd-l-bottom ul li p {
padding: 0 20px 0 24px;
margin-top: 12px;
}
.recom-bd ul li h5,
.prom-bd-l-bottom ul li h5 {
line-height: 22px;
font-weight: normal;
font-size: 14px;
}
.recom-bd ul li p ,
.prom-bd-l-bottom ul li p {
font-size: 12px;
color: #999;
}
.recom-bd span,
.prom-bd-l-bottom ul li p span {
color: #ff7c2d;
}
/* 精品推薦結(jié)束 */
需要注意的是
- 精品推薦的大模塊是使用的是父盒子不給高度,讓子盒子撐大父盒子此時需要清除浮動
- 注意靠最右邊的盒子是如何清除邊距的
入門編程部分
結(jié)構(gòu)
<!-- 編程入門 -->
<div class="programer container">
<!-- 頭部 -->
<div class="progm-hd clearfix">
<h4>編程入門</h4>
<ul>
<li><a href="#">熱門</a></li>
<li><a href="#">初級</a></li>
<li><a href="#">中級</a></li>
<li><a href="#">高級</a></li>
</ul>
<a href="#">查看全部</a>
</div>
<!-- 主題部分 -->
<div class="prom-bd clearfix">
<div class="prom-bd-l">
<img src="images/rumen.png" alt="">
</div>
<div class="prom-bd-r">
<div class="prom-bd-l-top">
<img src="images/rumen2.png" alt="">
</div>
<div class="prom-bd-l-bottom">
<ul>
<li>
<div class="over"><img src="images/rumen3.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/rumen3.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/rumen3.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
<li>
<div class="over"><img src="images/rumen3.png" alt=""></div>
<h5>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h5>
<p><span>高級</span> ? 1125人在學(xué)習(xí)</p>
</li>
</ul>
</div>
</div>
</div>
</div>
樣式
/* 編程入門開始 */
.programer {
margin-top: 35px;
}
.progm-hd h4 {
float: left;
color: #494949;
margin-right: 352px;
}
.progm-hd > a {
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 14px;
color: #a5a5a5;
}
.progm-hd a:hover {
color: #00a4ff;
}
.progm-hd ul {
float: left;
}
.progm-hd ul li{
float: left;
font-size: 16px;
padding: 0 36px;
}
.progm-hd ul li a{
color: #a7a8a9;
}
.prom-bd {
margin-top: 15px;
}
.prom-bd-l {
width: 228px;
height: 390px;
float: left;
margin-right: 15px;
overflow: hidden;
}
.prom-bd-r {
float: right;
}
.prom-bd-l-bottom ul li:nth-child(4n) {
margin-right: 0;
}
注意:
- 注意結(jié)構(gòu)是如何劃分的
- css的樣式代碼和之前的精品推薦有重疊的部分晚伙,大部分一致
底部
結(jié)構(gòu)
<div class="footer">
<div class="footer-in container">
<div class="footer-l">
<img src="images/logo_03.png" alt="">
<p>學(xué)成在線致力于普及中國最好的教育它與中國一流大學(xué)和機構(gòu)合作提供在線課程韧衣。<br />
? 2017年XTCG Inc.保留所有權(quán)利其弊。-滬ICP備15025210號</p>
<a href="#">下載APP</a>
</div>
<div class="footer-r">
<dl>
<dt>關(guān)于學(xué)成網(wǎng)</dt>
<dd><a href="#">關(guān)于</a></dd>
<dd><a href="#">管理團(tuán)隊</a></dd>
<dd><a href="#">工作機會</a></dd>
<dd><a href="#">客戶服務(wù)</a></dd>
<dd><a href="#">幫助</a></dd>
</dl>
<dl>
<dt>關(guān)于學(xué)成網(wǎng)</dt>
<dd><a href="#">關(guān)于</a></dd>
<dd><a href="#">管理團(tuán)隊</a></dd>
<dd><a href="#">工作機會</a></dd>
<dd><a href="#">客戶服務(wù)</a></dd>
<dd><a href="#">幫助</a></dd>
</dl>
<dl>
<dt>關(guān)于學(xué)成網(wǎng)</dt>
<dd><a href="#">關(guān)于</a></dd>
<dd><a href="#">管理團(tuán)隊</a></dd>
<dd><a href="#">工作機會</a></dd>
<dd><a href="#">客戶服務(wù)</a></dd>
<dd><a href="#">幫助</a></dd>
</dl>
</div>
</div>
</div>
樣式css
/* 頁面底部分 */
.footer {
height: 270px;
background-color: #ffffff;
margin-top: 100px;
}
.footer-in {
padding-top: 30px; /*盒子沒有給高度不用擔(dān)心撐開盒子*/
}
.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;
text-align: center;
font-size: 16px;
line-height: 33px;
margin-top: 15px;
}
.footer-r {
float: right;
color: #333;
}
.footer-r dl {
float: left;
width: 225px;
}
.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; /* 添加下劃線 */
}
注意
- 這里最值得學(xué)習(xí)的地方時高度和寬度剩余法
結(jié)果
學(xué)成在線首頁.gif