在制作網(wǎng)頁(yè)之前，首先先分析網(wǎng)頁(yè)是那些部分組成，可以從以下的代碼看出，分為頭部、導(dǎo)航欄、logo部分、文字部分等等這些組成。多的不說，直接上代碼，本次靜態(tài)網(wǎng)頁(yè)代碼分為html和css部分。
<!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="網(wǎng)頁(yè).css">
</head>
<body>
<!-- 頭部部分 -->
<div id="haeder">
<!-- 導(dǎo)航欄部分 -->
<div id="nav">
<!-- logo部分 -->
<div id="logo">
<img src="logo.png" alt="">
</div>
<!-- 文字部分 -->
<div id="words">
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">課程</a></li>
<li><a href="#">職業(yè)規(guī)劃</a></li>
</ul>
</div>
<!-- 輸入框部分 -->
<div id="search">
<input type="text" value="請(qǐng)輸入文字">
<button></button>
</div>
<!-- user部分 -->
<div id="user">
<img src="user.png" alt="">qq lilei
</div>
</div>
</div>
<!-- banner部分 -->
<div id="banner">
<!-- 在cont里面插入圖片 -->
<div id="cont">
<!-- 側(cè)導(dǎo)航欄 -->
<div id="work">
<ul>
<li><a href="#">前端開發(fā) ></a></li>
<li><a href="#">前端開發(fā) ></a></li>
<li><a href="#">前端開發(fā) ></a></li>
<li><a href="#">前端開發(fā) ></a></li>
<li><a href="#">前端開發(fā) ></a></li>
<li><a href="#">前端開發(fā) ></a></li>
<li><a href="#">前端開發(fā) ></a></li>
<li><a href="#">前端開發(fā) ></a></li>
<li><a href="#">前端開發(fā) ></a></li>
</ul>
</div>
<!-- 右邊表格 -->
<div id="biaoge">
<div id="biao1">
<p>
我的課程
</p>
</div>
<div id="biao2">
<p>繼續(xù)學(xué)習(xí) 程序語(yǔ)言設(shè)計(jì)</p>
<p id="op">學(xué)習(xí)使用對(duì)象</p>
<hr>
</div>
<div id="biao2">
<p>繼續(xù)學(xué)習(xí) 程序語(yǔ)言設(shè)計(jì)</p>
<p id="op">學(xué)習(xí)使用對(duì)象</p>
<hr>
</div>
<div id="biao2">
<p>繼續(xù)學(xué)習(xí) 程序語(yǔ)言設(shè)計(jì)</p>
<p id="op">學(xué)習(xí)使用對(duì)象</p>
<hr>
</div>
<div id="biao3">
<p>
全部課程
</p>
</div>
</div>
</div>
</div>
<!-- 橫向欄 -->
<div id="transverse">
<div id="w">
<ul>
<li><a href="#" id="io">精品推薦</a></li>|
<li><a href="#">JQuery</a></li>|
<li><a href="#">JQuery</a></li>|
<li><a href="#">JQuery</a></li>|
</ul>
</div>
<div id="youbian">
<a href="#">修改興趣</a>
</div>
</div>
<!-- 結(jié)尾部分 -->
<div id="ending">
<div id="word1">
<a href="#" id="zuo">精品推薦</a>
</div>
<div id="word2">
<a href="#" id="you">查看全部</a>
</div>
</div>
<!-- 圖片部分 -->
<div id="pic">
<!-- 圖片1 -->
<div id="pic1">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
<!-- 圖片2 -->
<div id="pic2">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
<!-- 圖片3 -->
<div id="pic3">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
<!-- 圖片4 -->
<div id="pic4">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
<!-- 圖片5 -->
<div id="pic5">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
<!-- 圖片6 -->
<div id="pic6">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
<!-- 圖片7 -->
<div id="pic7">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
<!-- 圖片8 -->
<div id="pic8">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
<!-- 圖片9 -->
<div id="pic9">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
<!-- 圖片10 -->
<div id="pic10">
<img src="pic.png" alt="">
<p>
Think PHP 5.0 博客系統(tǒng)
實(shí)戰(zhàn)項(xiàng)目演練
</p>
<a href="#" id="cc">高級(jí)</a>
<p id="dd">1125人在線學(xué)習(xí)</p>
</div>
</div>
<!-- 最后結(jié)尾部分 -->
<div id="last">
<!-- 左邊內(nèi)容部分 -->
<div id="last1">
<br>
<br>
<img src="logo.png" alt="">
<br>
<br>
<p>
學(xué)成在線致力于普及中國(guó)最好的教育它與中國(guó)一流的大學(xué)和機(jī)構(gòu)合作提供在線課程
@2021 Baidu 使用百度前必讀|百科協(xié)議|隱私政策|百度百科合作平臺(tái)|京】CP證030173號(hào)
</p>
<div id="box">
<a href="#">下載APP</a>
</div>
</div>
<!-- 右邊內(nèi)容部分 -->
<div id="box2">
<!-- 右邊內(nèi)容部分一 -->
<div id="last2">
<div>
<a href="#" id="yanse">關(guān)于學(xué)成網(wǎng)</a>
<ul>
<li><a href="#">關(guān)于</a></li>
<li><a href="#">管理團(tuán)隊(duì)</a></li>
<li><a href="#">工作機(jī)會(huì)</a></li>
<li><a href="#">客服服務(wù)</a></li>
<li><a href="#">幫助</a></li>
</ul>
</div>
</div>
<!-- 右邊內(nèi)容部分二 -->
<div id="last3">
<div>
<a href="#" id="yanse">關(guān)于學(xué)成網(wǎng)</a>
<ul>
<li><a href="#">關(guān)于</a></li>
<li><a href="#">管理團(tuán)隊(duì)</a></li>
<li><a href="#">工作機(jī)會(huì)</a></li>
<li><a href="#">客服服務(wù)</a></li>
<li><a href="#">幫助</a></li>
</ul>
</div>
</div>
<!-- 右邊內(nèi)容三 -->
<div id="last4">
<div>
<a href="#" id="yanse">關(guān)于學(xué)成網(wǎng)</a>
<ul>
<li><a href="#">關(guān)于</a></li>
<li><a href="#">管理團(tuán)隊(duì)</a></li>
<li><a href="#">工作機(jī)會(huì)</a></li>
<li><a href="#">客服服務(wù)</a></li>
<li><a href="#">幫助</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html> ?在css部分，每一個(gè)小部分都寫有注釋，可能寫得不太好，僅供參考。
/* 設(shè)置a標(biāo)簽樣式 */
a{
font-size: 19px;
text-decoration: none;
}
/* 鼠標(biāo)點(diǎn)擊樣式 */
a:hover{
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
body{
margin: auto;
width: 1920px;
background-color: rgb(245, 238, 238);
}
*{
margin: 0;
padding: 0;
}
/* 設(shè)置頭部部分 */
#haeder{
height: 100px;
margin: auto;
/* background-color: paleturquoise; */
}
/* 設(shè)置導(dǎo)航欄樣式 */
#nav{
width: 1200px;
height: 100px;
margin-left: 180px;
/* background-color: rgb(250, 241, 240); */
}
/* logo樣式 */
#logo{
/* float: left; */
display: inline-block;
height: 100px;
width: 200px;
padding-top: 30px;
}
/* 設(shè)置words */
#words{
margin-top: 30px;
/* float: left; */
display: inline-block;
margin-left: 50px;
}
#words ul li{
display: inline-block;
}
#words ul li a{
height: 30px;
padding: 0 20px;
line-height: 20px;
}
/* 輸入框樣式 */
#search{
margin-top: 30px;
display: inline-block;
margin-left: 30px;
}
/* 設(shè)置輸入框樣式 */
#search input{
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
}
/* 設(shè)置搜索樣式 */
#search button{
width: 50px;
height: 42px;
background-color: blue;
border: 0;
background: url(btn.png);
}
/* 搜索圖標(biāo) */
#user{
float: right;
margin-top: 30px;
margin-right: 60px;
}
/* 設(shè)置banner樣式 */
#banner{
height: 400px;
background-color: #1c036b;
}
/* 設(shè)置cont圖片樣式 */
#cont{
width: 1200px;
height: 400px;
margin-left: 180px;
background: url(banner2.png);
}
/* 側(cè)導(dǎo)航欄部分 */
#work{
display: inline-block;
padding-top: 20px;
height: 380px;
width: 200px;
line-height: 40px;
background-color: rgba(19, 2, 75, 0.5);
}
/* 清除work ul圓點(diǎn)標(biāo)記 */
#work ul{
list-style: none;
}
/* 設(shè)置li標(biāo)簽中文字間隔 */
#work ul li{
padding-left: 30px;
}
/* 設(shè)置work里面a標(biāo)簽文字顏色 */
#work ul li a{
color: white;
}
/* 右邊表格部分 */
#biaoge{
margin-top: 20px;
float: right;
height: 320px;
width: 230px;
background-color: white;
}
#biao1{
padding-top: 10px;
height: 40px;
width: 150px;
padding-left: 80px;
border-bottom: 1px solid black;
}
#biao2{
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
height: 40px;
}
/* 設(shè)置學(xué)習(xí)使用對(duì)象字體顏色 */
#op{
color: darkgrey;
}
#biao3{
padding-left: 80px;
height: 40px;
border: 1px solid rgb(13, 113, 245);
}
/* 橫向?qū)Ш綑?*/
#transverse{
width: 1200px;
height: 50px;
margin-left: 180px;
background-color: white;
box-shadow: 5px 5px rgb(128, 128, 128,0.3);
}
/* 設(shè)置橫向欄中w的樣式 */
#w{
padding-top: 10px;
display: inline-block;
height: 50px;
width: 600px;
}
#transverse ul li{
display: inline-block;
}
/* 設(shè)置transverse a標(biāo)簽 */
#transverse ul li a{
text-align: center;
line-height: 30px;
height: 30px;
padding: 0 20px;
}
/* 設(shè)置精品推薦顏色 */
#io{
color: aqua;
}
/* 設(shè)置修改興趣樣式 */
#youbian{
float: right;
padding-right: 50px;
padding-top: 10px;
}
/* 設(shè)置結(jié)尾 */
#ending{
margin-top: 20px;
width: 1200px;
height: 25px;
margin-left: 180px;
/* background-color: royalblue; */
}
/* 修改精品推薦 */
#word1{
padding-left: 35px;
float: left;
}
/* 修改查看全部 */
#word2{
padding-right: 35px;
float: right;
}
/* 圖片部分 */
#pic{
height: 600px;
width: 1200px;
margin-left: 180px;
}
/* 修改高級(jí)及1125人在線學(xué)習(xí)為行內(nèi)塊模式 */
#cc,#dd{
display: inline-block;
}
/* 修改高級(jí)字體的顏色 */
#cc{
color: rgb(241, 245, 19);
}
/* 修改1125在線學(xué)習(xí)字體的顏色 */
#dd{
color: rgb(119, 116, 118);
}
/* 修改圖片大小 */
#pic img{
height: 200px;
width: 200px;
float: left;
}
/* 圖片1部分 */
#pic1{
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 圖片2部分 */
#pic2{
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 圖片3部分 */
#pic3{
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 圖片4部分 */
#pic4{
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 圖片5部分 */
#pic5{
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 圖片6部分 */
#pic6{
margin-top: 35px;
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 圖片7部分 */
#pic7{
margin-top: 35px;
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 圖片8部分 */
#pic8{
margin-top: 35px;
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 圖片9部分 */
#pic9{
margin-top: 35px;
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 圖片10部分 */
#pic10{
margin-top: 35px;
margin-left: 35px;
float: left;
height: 280px;
width: 200px;
background-color: white;
}
/* 最好結(jié)尾部分 */
#last{
height: 250px;
background-color: white;
}
/* 給結(jié)尾部分p標(biāo)簽設(shè)置字體 */
#last p{
font-size: 15px;
}
/* 設(shè)置左邊內(nèi)容樣式 */
#last1{
display: inline-block;
margin-left: 209px;
display: inline-block;
height: 250px;
width: 600px;
}
/* 下載APP盒子樣式 */
#box{
margin-top: 10px;
padding-top: 15px;
padding-left: 15px;
margin-left: 10px;
height: 40px;
width: 100px;
border: 2px solid lightskyblue;
}
/* 設(shè)置下載APP字體顏色 */
#box a{
color: lightskyblue;
}
/* 右邊內(nèi)容部分 */
#box2{
float: right;
margin-right: 50px;
margin-top: 30px;
height: 200px;
width: 600px;
}
/* 設(shè)置關(guān)于學(xué)成網(wǎng)字體顏色 */
#box2 #yanse{
color: blue;
}
/* 右邊部分內(nèi)容一 */
#last2{
float: left;
height: 200px;
width: 100px;
}
/* 清除ul圓點(diǎn)標(biāo)記 */
#last2 ul{
list-style: none;
}
/* 右邊部分內(nèi)容二 */
#last3{
float: left;
margin-left: 95px;
height: 200px;
width: 100px;
}
/* 清除ul圓點(diǎn)標(biāo)記 */
#last3 ul{
list-style: none;
}
/* 右邊內(nèi)容部分三 */
#last4{
float: left;
margin-left: 95px;
height: 200px;
width: 100px;
}
/* 清除ul圓點(diǎn)標(biāo)記 */
#last4 ul{
list-style: none;
}?效果如圖：
文章來源：http://www.zghlxwxcb.cn/news/detail-769213.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-769213.html
到了這里，關(guān)于HTML前端靜態(tài)網(wǎng)頁(yè)制作的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
