Web基礎之CSS實戰
一、前言：
好久沒有更新我的博客了，最近實在太忙了；不過，再累也要堅持更新博客；最近會把沒有更新的博客補上來，順便複習和整理一下以前學的知識；
通過前面的學習，我們已經對HTML和CSS樣式有了一定的瞭解；我們不能總是紙上談兵，還是得真槍實彈的操練起來，尤其對我們這種特別需要動手能力的專業來說；
好吧，不說廢話了；直接上項目：我們需要用我們前面學的知識完成下面的網頁效果圖：
不要看起來很簡單，做起來就沒你想的那麼容易了；這裏你會見識到DIV+CSS的厲害之處，可能剛學起來你會覺得好難調出這種效果；這時候你就需要有點耐心了，慢慢來；不會的地方可以去W3CSchool查一下API；
二、難點解析和注意事項：
這裏需要用PS切圖，把我們用到的圖片切下來；首先我們的注意一下網頁的整體佈局；然後不要圖簡單，網頁中有文字的地方就儘量自己把文字寫上去；舉個栗子，上圖中微博微信下的文字，就是我們自己寫上去的，而不是把整個圖片截取下來放上去；這樣做利於後面的維護，而且，很多網頁的頭部和底部基本是一樣的，可以稍微修改下就能重用了；
三：項目框架圖：
這裏我們用的工具是HBuilder，當然有像SubText，WebStorm，DreamWave，EditPlus等等工具；個人覺得這款工具很好用，像Eclipse一樣，有強大的提示功能；
四、項目源代碼：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>美迪官網</title>
<link rel="stylesheet" type="text/css" href="css/mainpage.css" />
</head>
<body>
<!--頂部橫線-->
<div class="top-line"></div>
<div class="top">
<!--頂部LOGO-->
<div class="top-logo float-left"></div>
<!--頂部文字-->
<div class="top-content float-left">
國家二級施工資質企業<br/> 湖湘唯一榮獲全國200餘項室內設計大獎企業
<br/> 官方唯一指定《中國高級家裝標準》實施單位
<br/>
</div>
<!--微博和微信LOGO以及文字-->
<div class="float-left">
<div class="weibo-logo float-left"> </div>
<div class="weibo-font">美迪官方微博</div>
</div>
<div class="float-left">
<div class="weixin-logo float-left"></div>
<div class="weixin-font">美迪官方微信</div>
</div>
<!--聯繫電話-->
<div class="top-pnone-logon float-left"></div>
<div class="top-pnone1 float-left">0731-</div>
<div class="top-pnone2 float-left">
82221078<br/> 82228608
<br/>
</div>
</div>
<!--導航條-->
<div class="menu float-left">
<div class="menu-center">
<div class="menu-btn float-left">首 頁 </div>
<div class="menu-btn float-left">走進美迪</div>
<div class="menu-btn float-left">新聞資訊</div>
<div class="menu-btn float-left">精品案例</div>
<div class="menu-btn float-left">頂級團隊</div>
<div class="menu-btn float-left">博格工藝</div>
<div class="menu-btn float-left">視頻欣賞</div>
<div class="menu-btn float-left">客戶評價</div>
<div class="menu-btn float-left">小區團購</div>
<div class="menu-btn float-left" style="border-right: 0px solid rgb(23,56,131);">美迪大宅</div>
</div>
</div>
<div class="select">
<div class="select-font">
美迪簡介><span style="color: rgb(23,56,131);" ;>董事長致辭</span> >獲獎榮譽>美迪大事記>美迪文化>分支機構>人才招聘
</div>
</div>
<hr/>
<div class="center-content">
<div class="center-logo"></div>
</div>
</body>
</html>mainpage.css
/*body裏面的元素都居中顯示*/
body{
text-align: center;
}
/*頂部橫條樣式*/
.top-line{
width: 100%;
height: 5px;
background-color: rgb(23,56,131);
}
/*底部佈局*/
.top{
width: 942px;
margin: 0 auto;
}
/*浮動樣式*/
.float-left{
float: left;
}
/*底部LOGO樣式*/
.top-logo{
margin-top: 25px;
margin-right: 10px;
width: 251px;
height: 75px;
background-image: url(../img/4_03.jpg);
}
/*頂部logo旁邊字體樣式*/
.top-content{
margin-top: 25px;
margin-right: 10px;
color: rgb(168,168,168);
font-size: 12px;
line-height:25px;
text-align: left;
font-family: "微軟雅黑" "仿宋";
}
/*微博logo樣式*/
.weibo-logo{
margin-top: 40px;
margin-right: 30px;
margin-left: 35px;
width: 40px;
height: 37px;
background-image: url(../img/4_06.jpg);
}
/*微博文字樣式*/
.weibo-font{
clear: left;
width: 80px;
height: 40px;
margin-left: 10px;
color: rgb(23,56,131);
font-size: 10px;
font-family: "微軟雅黑" "仿宋";
text-align: center;
}
/*微信logo樣式*/
.weixin-logo{
margin-top: 40px;
margin-right: 30px;
margin-left: 20px;
width: 42px;
height: 37px;
background-image: url(../img/4_08.jpg);
}
/*微信文字樣式*/
.weixin-font{
clear: left;
width: 80px;
height: 40px;
color: rgb(23,56,131);
font-size: 10px;
font-family: "微軟雅黑" "仿宋";
text-align: center;
}
/*底部電話logo樣式*/
.top-pnone-logon{
margin-top: 40px;
margin-left: 20px;
width: 46px;
height: 46px;
background-image: url(../img/telephone.jpg);
}
/*0731電話號碼樣式*/
.top-pnone1{
margin-top: 55px;
margin-left: 10px;
margin-right: 5px;
color: rgb(23,56,131);
font-size: 10px;
font-family: "微軟雅黑" "仿宋";
text-align: center;
}
/*電話號碼樣式*/
.top-pnone2{
margin-top: 35px;
margin-left: 10px;
margin-right: 5px;
color: rgb(23,56,131);
font-size: 20px;
font-family: "微軟雅黑" "仿宋";
text-align: center;
}
/*導航條菜單樣式*/
.menu{
margin-top: 20px;
clear: left;
width: 100%;
height: 50px;
background-color:rgb(23,56,131) ;
}
/*包裹菜單的DIV*/
.menu-center{
margin-left: auto;
margin-right: auto;
width: 942px;
height: 50px;
background-color:rgb(23,56,131) ;
}
/*每個菜單的樣式*/
.menu-btn{
width: 9.8%;
font-size: 15px;
font-family: "微軟雅黑" "仿宋";
border-right: 2px solid white;
height: 50px;
line-height: 50px;
color:white ;
text-align: center;
}
/*文字樣式*/
.select{
clear: left;
width: 100%;
height: 30px;
background-color:rgb(255,255,255) ;
}
/*選中的文字樣式*/
.select-font{
width: 920px;
height: 30px;
margin: 0 auto;
line-height: 30px;
font-family: "微軟雅黑" "仿宋";
font-size: 14px;
text-align: left;
}
/*中間的內容面板*/
.center-content{
width:100%;
height: 1000px;
}
/*中間面板的圖片樣式*/
.center-logo{
width:942px;
height: 207px;
background-image: url(../img/4_16.jpg);
margin: 0 auto;
}
五、項目效果演示：
六、實戰總結：
通過這個小小的CSS實戰，我見識到了DIV+CSS這個組合的厲害之處；我們能夠看到，index文件中代碼不是很多，而修飾展示效果的CSS代碼卻很多；這也說明的CSS樣式的厲害；能夠給我們的網頁美容，讓整個網頁頓時高大上起來；同時，這個實戰把前面學到的知識基本用上了；肯定會有很多小夥伴會很懵逼，傳授一下經驗，你不要着急，慢慢來，一步一步實現；我做這個也做了很久；
共勉！
