網(wǎng)頁簡介：經(jīng)過pink老師的課程學習之后，制作了一個簡單的靜態(tài)頁面，主要是運用html和css。
整個網(wǎng)頁的制作主要分為五個部分:在制作過程中，首先需要確定一個網(wǎng)頁的版心（內(nèi)容的中心區(qū)域），五個部分依次調(diào)用版心，使主要內(nèi)容始終與版心對齊。在版心內(nèi)，五個部分分別由五個標準流的盒子排列，再將各個盒子內(nèi)容細分制作。
第一部分：頭部區(qū)域，包括學成網(wǎng)的logo，首頁，課程，職業(yè)規(guī)劃導航欄，搜索框，用戶區(qū)域。
首先用一個大盒子（class=“header”）包含其中的小模塊，再將四個部分放入四個小盒子（class=”logo ” class=“nav”? ?class="search"? class="user"）,再將四個盒子左浮動，使它們?nèi)吭谝恍?，最后再對各個小模塊進行樣式的細化設(shè)置。
第二部分：banner部分（class=“banner”），主要由三個部分組成，背景部分，包括背景顏色和背景圖片（對class="banner"進行設(shè)置背景），側(cè)邊導航欄部分和右邊課程表部分 。一個大盒子（ 調(diào)用版心class=“w”）包含兩個小盒子（class=“subnav”? ?class="course"）,側(cè)邊導航欄左浮動，課程表右浮動。
第三部分：精品 推薦部分（class=”goods“），由標題精品推薦，所推薦內(nèi)容的鏈接和更多愛好來鏈接三部分組成。
第四部分：精品推薦的產(chǎn)品模塊（class=”box-bd“），其中的十個產(chǎn)品模塊用<ul> <li>產(chǎn)品模塊?</li></ul>。位于第一，二，六，七模塊上的? hot，new部分用相對定位和絕對定位來做。
第五部分：底部模塊（class=”footer“），由左邊的APP下載部分（class=”copyright“）和右邊的學成網(wǎng)相關(guān)內(nèi)容部分（class=”links“）組成。
html代碼部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 頭部區(qū)域開始 -->
<div class="header w">
<!-- 第一行l(wèi)ogo -->
<div class="logo">
<img src="D:\前端素材\html使用手冊\第七天\img\學成在線.png" alt="">
</div>
<!-- 第一行導航欄 -->
<div class="nav w">
<ul class="homepage">
<li> <a href="#">首頁</a> </li>
<li> <a href="#">課程</a></li>
<li> <a href="#">職業(yè)規(guī)劃</a></li>
</ul>
</div>
<!-- 第一行搜索框 -->
<div class="search">
<input type="text" value="輸入關(guān)鍵詞">
<img class="buttow" src="D:\前端素材\html使用手冊\第七天\study\images\btn.png" alt="">
</div>
<!-- 第一行用戶區(qū) -->
<div class="user">
<img src="D:\前端素材\html使用手冊\第七天\study\images\user.png" alt="">
<a href="#">qq-lilei</a>
</div>
</div>
<!-- 頭部區(qū)域結(jié)束 -->
<!-- banner部分開始 -->
<div class="banner ">
<div class="w">
<!-- 側(cè)邊導航欄 -->
<div class="subnav">
<ul>
<li>
<a href="">前端開發(fā)</a>
<span> > </span>
</li>
<li>
<a href="">前端開發(fā)</a>
<span> > </span>
</li>
<li>
<a href="">前端開發(fā)</a>
<span> > </span>
</li>
<li>
<a href="">前端開發(fā)</a>
<span> > </span>
</li>
<li>
<a href="">前端開發(fā)</a>
<span> > </span>
</li>
<li>
<a href="">前端開發(fā)</a>
<span> > </span>
</li>
<li>
<a href="">前端開發(fā)</a>
<span> > </span>
</li>
<li>
<a href="">前端開發(fā)</a>
<span> > </span>
</li>
<li>
<a href="">前端開發(fā)</a>
<span> > </span>
</li>
</ul>
</div>
<!-- 右邊課程表 -->
<div class="course">
<h3>我的課程表</h3>
<div class="bd">
<ul>
<li>
<h4>繼續(xù)學習 程序語言設(shè)計</h4>
<p>正在學習-使用對象</p>
</li>
<li>
<h4>繼續(xù)學習 程序語言設(shè)計</h4>
<p>正在學習-使用對象</p>
</li>
<li>
<h4>繼續(xù)學習 程序語言設(shè)計</h4>
<p>正在學習-使用對象</p>
</li>
<a class="more" href="#">全部課程</a>
</ul>
</div>
</div>
</div>
</div>
<!-- 精品推薦導航部分開始 -->
<div class="goods w">
<h3>精品推薦</h3>
<ul>
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">jQuery</a>
</li>
</ul>
<a class="mod" href="#">修改愛好</a>
</div>
</div>
<!-- 精品推薦導航部分結(jié)束 -->
<!-- 精品部分推薦產(chǎn)品推薦開始 -->
<div class="box w ">
<div class="box-hd clearfix">
<h3>精品推薦</h3>
<a href="#">查看更多</a>
</div>
<!-- 精品部分推薦產(chǎn)品推薦開始 -->
<!-- 產(chǎn)品介紹開始 -->
<div class="box-bd clearfix">
<ul>
<li>
<em>
<img src="hot1.png" alt="">
</em>
<img src="D:\前端素材\html使用手冊\第九天\study\images\pic.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>".1125人在學習"
</div>
</li>
<li>
<em>
<img src="new.png" alt="">
</em>
<img src="hot.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>".1125人在學習"
</div>
</li>
<li>
<img src="hot2.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>".1125人在學習"
</div>
</li>
<li>
<img src="hot3.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>".1125人在學習"
</div>
</li>
<li>
<img src="hot3.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>".1125人在學習"
</div>
</li>
<li>
<em>
<img src="hot1.png" alt="">
</em>
<img src="D:\前端素材\html使用手冊\第九天\study\images\pic.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>".1125人在學習"
</div>
</li>
<li>
<em>
<img src="new.png" alt="">
</em>
<img src="hot.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>".1125人在學習"
</div>
</li>
<li>
<img src="hot2.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>".1125人在學習"
</div>
</li>
<li>
<img src="hot3.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>".1125人在學習"
</div>
</li>
<li>
<img src="hot3.png" alt="">
<h4>Think PHP 5.0 博客系統(tǒng)實戰(zhàn)項目演練</h4>
<div class="high">
<span>高級</span>'.1125人在學習'
</div>
</li>
</ul>
</div>
</div>
<!-- 產(chǎn)品結(jié)束結(jié)束 -->
<!-- 底部模塊開始 -->
<div class="footer">
<div class="w">
<div class="copyright">
<img src="D:\前端素材\html使用手冊\第九天\study\images\logo.png" alt="">
<p>
學成在線致力于普及中國最好的教育它與中國一流大學和機構(gòu)合作提供在線課程。
<br>
? 2017年XTCG Inc.保留所有權(quán)利。-滬ICP備15025210號
</p>
<a href="#">下載APP</a>
</div>
<div class="links">
<dl>
<dt>關(guān)于學成網(wǎng)</dt>
<dd> <a href="#">關(guān)于 </a> </dd>
<dd> <a href="#">管理團隊</a> </dd>
<dd> <a href="#">工作機會</a> </dd>
<dd> <a href="#">客戶服務(wù)</a> </dd>
<dd> <a href="#">幫助 </a> </dd>
</dl>
<dl>
<dt>關(guān)于學成網(wǎng)</dt>
<dd> <a href="#">關(guān)于 </a> </dd>
<dd> <a href="#">管理團隊</a> </dd>
<dd> <a href="#">工作機會</a> </dd>
<dd> <a href="#">客戶服務(wù)</a> </dd>
<dd> <a href="#">幫助 </a> </dd>
</dl>
<dl>
<dt>關(guān)于學成網(wǎng)</dt>
<dd> <a href="#">關(guān)于 </a> </dd>
<dd> <a href="#">管理團隊</a> </dd>
<dd> <a href="#">工作機會</a> </dd>
<dd> <a href="#">客戶服務(wù)</a> </dd>
<dd> <a href="#">幫助 </a> </dd>
</dl>
</div>
</div>
</div>
<!-- 底部模塊結(jié)束 -->
</body>
</html>css代碼部分：
* {
margin:0px;
padding:0px;
}
body {
background-color: #f3f5f7;
}
.w {
width: 1200px;
margin: 30px auto;
}
/* 清除浮動代碼 */
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
li{
list-style: none;
}
a{
text-decoration: none;
color:#050505;
}
/* 頭部區(qū)域的樣式 */
.header {
height: 42px;
}
/* logo部分 */
.logo img{
float: left;
width: 198px;
height:42px;
}
/* 導航欄部分 */
.nav ul {
float: left;
margin-left:60px;
}
.nav li {
display:inline-block;
height:42px;
padding:0 20px;
line-height: 42px;
color:#050505;
font-size: 18px;
}
/* 偽類設(shè)置 */
.nav li a:hover {
color: #3fa9ff;
border-bottom: 2px solid #00acfd;
}
/* 搜索框樣式 */
.search {
float: left;
margin-left:70px;
}
/* 搜索框 */
.search input {
float: left;
width: 346px;
height:40px;
color:#e0cdbf;
padding-left:15px;
border-right: 0px;
border:1px solid #00a4ff;
/* 按鈕 */
}
.buttow {
width: 50px;
height: 42px;
/* */
}
/* 用戶區(qū)域 */
.user {
float: left;
margin-left:65px;
}
/* banner部分樣式 */
.banner {
height: 421px;
/* 背景顏色 */
background-color:#1c036c ;
}
/* 背景圖片 */
.banner .w {
height:421px;
background: url(banner2.png) no-repeat top center;
}
/* 左側(cè)導航欄部分 */
.subnav {
float:left;
width: 190px;
height: 421px;
background-color: #14024b;
}
.subnav ul li a {
float:left;
line-height: 45px;
color: #fff;
font-size:14px;
padding:0 20px;
}
.subnav ul li span {
float:right;
line-height: 45px;
color: #fff;
padding-right:20px;
}
.subnav a:hover{
color:#00a4ff;
}
/* 右側(cè)用戶區(qū)部分 */
.course {
float:right;
width: 230px;
height: 300px;
margin-top:50px;
background-color: #fff;
}
.bd {
padding:0 20px;
}
.course h3 {
height:48px;
line-height:48px;
font-weight:400px;
color:#fff;
text-align:center;
background-color: #9bceea;
}
.course ul li {
border-bottom: 1px solid #a5a5a5;
padding:14px 0;
}
.course ul li h4 {
font-size:16px;
color: #4e4e4e;
}
.course ul li p {
font-size:12px;
color:#a5a5a5;
}
.more {
display: block;
height:38px;
line-height: 38px;
text-align:center;
color:#42aaff;
font-size:16px;
font-weight: 700;
border: 1px solid #00a4ff;
margin:5px;
}
/* 精品推薦部分 */
.goods {
height:60px;
background-color: #fff;
box-shadow: 2px 3px 3px rgba(0,0,0,0.1);
margin-top:10px;
}
/* 標題部分 */
.goods h3 {
display: block;
float:left;
line-height:60px;
font-size:16px;
color:#00a4ff;
margin-left:30px;
}
/* 精品導航欄部分 */
.goods ul {
float: left;
margin-left:30px;
}
.goods ul li {
display: inline-block;
line-height: 60px;
}
.goods ul li a {
padding:0 30px;
font-size: 16px;
color:#050505;
border-left: 1px solid #cccccc;
}
.mod {
float:right;
line-height: 60px;
font-size: 16px;
color:#00a4ff;
padding-right:30px;
}
.box h3 {
float:left;
font-size: 20px;
color:#494949;
}
.box a {
float:right;
font-size: 12px;
color:#a5a5a5;
margin:10px 30px 0 0;
}
.box-bd ul {
width:1225px ;
}
/* 產(chǎn)品介紹部分 */
.box-bd ul li {
position: relative;
float:left;
background-color: #fff;
width: 228px;
height: 270px;
margin-top:25px;
margin-right:15px;
}
.box-bd ul li em img {
position: absolute;
top:2px;
right: -4px;
}
.box-bd ul li >img {
width: 100%;
}
.box-bd ul li h4 {
margin:20px 20px 20px 25px;
font-size:14px;
color:#050505;
font-weight: 400;
}
.high {
margin: 20px 25px;
font-size: 12px;
color:#999999;
}
.box-bd ul li span {
font-size:12px ;
color:#ff7c2d;
}
/* 底部模塊 */
.footer {
height:415px;
background-color: #fff;
}
.footer .w {
padding-top:35px;
}
.copyright {
float: left;
}
.copyright p {
font-size: 12px;
color:#666666;
margin:20px 0 15px 0;
}
.copyright a {
display: block;
width: 118px;
height:33px;
border :1px solid #00a4ff;
text-align: center;
line-height: 33px;
font-size: 16px;
color:#00a4ff;
}
.links {
float:right;
margin-top: 5px;
}
.links dl {
float: left;
display: block;
margin-left: 100px;
}
.linkd dl dt {
font-size: 16px;
color:#333;
}
.links dl dd a {
font-size: 12px;
color: #333;
}網(wǎng)頁制作完成界面：
?
制作過程中遇到的問題以及解決方案：
在網(wǎng)頁的編寫過程中，第一個問題是對整個頁面的布局不是很清晰，在寫一個網(wǎng)頁的時候中一定要先把網(wǎng)頁的基本結(jié)構(gòu)分析清楚，將每個部分的位置及內(nèi)容等有個清晰的了解，最后才是代碼編寫，結(jié)構(gòu)清楚，編寫中遇到問題才能有跡可循。
第二個問題就是在對盒子設(shè)置浮動的時候，會影響后面的標準流的盒子，最終復習了的清除浮動，將這個問題解決。清除浮動的常用代碼：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
} 使用時只需要給設(shè)置了浮動的元素的父盒子加上class=”clearfix“類名就可以實現(xiàn)清除浮動。
注意：設(shè)置清除浮動一定是給浮動元素的父元素添加clearfix類。
文章總結(jié)：
這篇文章是我在自學前端時練習基礎(chǔ)內(nèi)容制作的網(wǎng)頁，我在這次學習之前也看過另外的視頻，就只是看，做做筆記，并沒有練習，以至于在最后的網(wǎng)頁大作業(yè)并沒有很好的完成，很小的一個部分都會出很多問題，做了好多天都沒有做完，最后只交了一個不完整的網(wǎng)頁。在這次學習中，也算是復習基礎(chǔ)內(nèi)容，對前一次學習中沒有掌握的內(nèi)容又重新加深了，在這次制作網(wǎng)頁時就解決了很多以前遇到的問題?？傊?，學習前端一定要多動手；如果遇到問題就返回到該內(nèi)容的章節(jié)，復習基礎(chǔ)，才能更好的解決問題。文章來源：http://www.zghlxwxcb.cn/news/detail-420158.html
? ? ? ? 這個網(wǎng)頁只是基于html和css的靜態(tài)頁面，也只是學成網(wǎng)網(wǎng)頁的一部分，其中的鏈接等多個功能都還未能實現(xiàn)，我將在以后的學習中，補齊所缺的部分。另外，如果發(fā)現(xiàn)網(wǎng)頁中有錯漏或者代碼有更好的寫法的請在評論區(qū)留言，或者私信我。文章來源地址http://www.zghlxwxcb.cn/news/detail-420158.html
到了這里，關(guān)于簡單html和css靜態(tài)網(wǎng)頁制作的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
