課程
/前端開發
/HTML/CSS
/企業網站綜合布局實戰
代碼啊
2017-08-19
源自：企業網站綜合布局實戰 4-4
正在回答
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>頁碼的制作</title>
<style>
/*在此定義相關CSS樣式*/
li{
list-style: none;
}
a{
text-decoration: none;
color: black;
.news_main{
width: 998px;
//height: 350px;/*與下面同理 父盒子高度固定將會影響子盒子撐開*/
min-height: 350px;
_height: 350px;
border-radius: 5px;
margin: 0 auto;
background-color: #fff;
.new_left{
width: 220px;
height: 350px;
border: 1px solid #e8e8e8;
float: left;
border-radius: 3px;
.new_left h2{
height: 35px;
line-height: 35px;
font-family: "微軟雅黑";
font-size: 13px;
color: #666;
background-image: url("../img/title_bg.gif");
padding-left: 22px;/*使標題內容與盒子左邊框有一定距離*/
border-bottom: 1px solid #e8e8e8;
.new_left .left_content ul li{
height: 30px;
line-height: 30px;
padding-left: 7px;
.new_left .left_content ul li a{
background-image: url("../img/li_bg.gif");
background-repeat: no-repeat;
padding-left: 15px;
display: block;
background-position: left center;
.new_left .left_content ul li a:hover{
color: #009cdf;
background-image: url("../img/li_bg2.gif");
background-color: #f2f2f2;
.new_right{
width: 770px;
//height: 350px;/*高度不能固定 否則頁面內容過多會溢出*/
min-height: 350px;/*最少高度 350px 隨著內容增加 高度自動增加 在IE6中不支持*/
_height: 350px;/* CSS hack 解決上述IE6問題 這種寫法只有IE6能夠識別*/
float: right;
footer{
clear: both;/*清除浮動 因為盒子 new_right 已經浮動 當高度改變時 將會影響 footer 盒子的布局*/
.new_right h2{
.new_right ul{
.new_right ul li{
height: 25px;
line-height: 25px;
background-image: url("../img/list.jpg");/*用背景設置項目符號*/
.page_number{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
.page_number a{
display: inline-block;
padding: 5px 10px;
border-radius: 8px;
.page_number a:hover{
color: #fff;
background-color: #cc1b1b;
</style>
</head>
<body>
<!--在此制作頁碼的基本結構-->
<div class="news_main">
<div class="new_left">
<h2>新聞中心</h2>
<div class="left_content">
<ul>
<li><a href="#">公司新聞</a></li>
<li><a href="#">行業新聞</a></li>
<li><a href="#">媒體報道</a></li>
<li><a href="#">活動專題</a></li>
<li><a href="#">精彩視頻</a></li>
<li><a href="#">資源下載</a></li>
<li><a href="#">公司內刊</a></li>
</ul>
</div>
<div class="new_right">
<div class="right_list">
<li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span><a href="#">【有獎活動】給父親的三行書信</a></li>
? ? ? ? ? ? ?<li><span>2014-05-30</span><a href="#">《程序猿，請曬出你的童年》活動獲獎公告</a></li>
? ? ? ? ? ? <li><span>2014-05-28</span><a href="#" title="aa">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></li>
? ? ? ? ? ? <li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ?</ul>
<div class="page_number">
<a href="#">首頁</a>
<a href="#"><</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">...</a>
<a href="#">></a>
<a href="#">末頁</a>
</body>
</html>
舉報
本課程重點介紹HTML/CSS實現常見企業網站布局的方法
3 回答3-18編程練習的代碼哪位小可愛提供一下，謝謝～
1 回答視頻和提供下載的代碼有些細節不太一樣
1 回答請大神幫我看一下，謝謝
1 回答請問可以提供所有的源碼嗎
8 回答問個問題 謝謝
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-08-19
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>頁碼的制作</title>
<style>
/*在此定義相關CSS樣式*/
li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.news_main{
width: 998px;
//height: 350px;/*與下面同理 父盒子高度固定將會影響子盒子撐開*/
min-height: 350px;
_height: 350px;
border-radius: 5px;
margin: 0 auto;
background-color: #fff;
}
.new_left{
width: 220px;
height: 350px;
border: 1px solid #e8e8e8;
float: left;
border-radius: 3px;
}
.new_left h2{
height: 35px;
line-height: 35px;
font-family: "微軟雅黑";
font-size: 13px;
color: #666;
background-image: url("../img/title_bg.gif");
padding-left: 22px;/*使標題內容與盒子左邊框有一定距離*/
border-bottom: 1px solid #e8e8e8;
}
.new_left .left_content ul li{
height: 30px;
line-height: 30px;
padding-left: 7px;
}
.new_left .left_content ul li a{
color: #666;
background-image: url("../img/li_bg.gif");
background-repeat: no-repeat;
padding-left: 15px;
display: block;
background-position: left center;
}
.new_left .left_content ul li a:hover{
color: #009cdf;
background-image: url("../img/li_bg2.gif");
background-color: #f2f2f2;
}
.new_right{
width: 770px;
//height: 350px;/*高度不能固定 否則頁面內容過多會溢出*/
min-height: 350px;/*最少高度 350px 隨著內容增加 高度自動增加 在IE6中不支持*/
_height: 350px;/* CSS hack 解決上述IE6問題 這種寫法只有IE6能夠識別*/
border: 1px solid #e8e8e8;
float: right;
border-radius: 3px;
background-color: #fff;
}
footer{
clear: both;/*清除浮動 因為盒子 new_right 已經浮動 當高度改變時 將會影響 footer 盒子的布局*/
}
.new_right h2{
height: 35px;
line-height: 35px;
font-family: "微軟雅黑";
font-size: 13px;
color: #666;
background-image: url("../img/title_bg.gif");
padding-left: 22px;/*使標題內容與盒子左邊框有一定距離*/
border-bottom: 1px solid #e8e8e8;
}
.new_right ul{
padding-left: 7px;
}
.new_right ul li{
height: 25px;
line-height: 25px;
border-bottom: 1px solid #e8e8e8;
background-image: url("../img/list.jpg");/*用背景設置項目符號*/
background-repeat: no-repeat;
background-position: left center;
padding-left: 15px;
color: #666;
}
.page_number{
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.page_number a{
display: inline-block;
border: 1px solid #e8e8e8;
padding: 5px 10px;
border-radius: 8px;
}
.page_number a:hover{
color: #fff;
background-color: #cc1b1b;
}
</style>
</head>
<body>
<!--在此制作頁碼的基本結構-->
<div class="news_main">
<div class="new_left">
<h2>新聞中心</h2>
<div class="left_content">
<ul>
<li><a href="#">公司新聞</a></li>
<li><a href="#">行業新聞</a></li>
<li><a href="#">媒體報道</a></li>
<li><a href="#">活動專題</a></li>
<li><a href="#">精彩視頻</a></li>
<li><a href="#">資源下載</a></li>
<li><a href="#">公司內刊</a></li>
</ul>
</div>
</div>
<div class="new_right">
<h2>新聞中心</h2>
<div class="right_list">
<ul>
<li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span><a href="#">【有獎活動】給父親的三行書信</a></li>
? ? ? ? ? ? ?<li><span>2014-05-30</span><a href="#">《程序猿，請曬出你的童年》活動獲獎公告</a></li>
? ? ? ? ? ? <li><span>2014-05-28</span><a href="#" title="aa">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></li>
? ? ? ? ? ? <li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span><a href="#">【有獎活動】給父親的三行書信</a></li>
? ? ? ? ? ? ?<li><span>2014-05-30</span><a href="#">《程序猿，請曬出你的童年》活動獲獎公告</a></li>
? ? ? ? ? ? <li><span>2014-05-28</span><a href="#" title="aa">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></li>
? ? ? ? ? ? <li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span><a href="#">【有獎活動】給父親的三行書信</a></li>
? ? ? ? ? ? ?<li><span>2014-05-30</span><a href="#">《程序猿，請曬出你的童年》活動獲獎公告</a></li>
? ? ? ? ? ? <li><span>2014-05-28</span><a href="#" title="aa">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></li>
? ? ? ? ? ? <li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span><a href="#">【有獎活動】給父親的三行書信</a></li>
? ? ? ? ? ? ?<li><span>2014-05-30</span><a href="#">《程序猿，請曬出你的童年》活動獲獎公告</a></li>
? ? ? ? ? ? <li><span>2014-05-28</span><a href="#" title="aa">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></li>
? ? ? ? ? ? <li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span><a href="#">【有獎活動】給父親的三行書信</a></li>
? ? ? ? ? ? ?<li><span>2014-05-30</span><a href="#">《程序猿，請曬出你的童年》活動獲獎公告</a></li>
? ? ? ? ? ? <li><span>2014-05-28</span><a href="#" title="aa">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></li>
? ? ? ? ? ? <li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span><a href="#">【有獎活動】給父親的三行書信</a></li>
? ? ? ? ? ? ?<li><span>2014-05-30</span><a href="#">《程序猿，請曬出你的童年》活動獲獎公告</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span> <a href="#">【慕客訪談 用戶篇】“有為屌絲”在路上</a></li>
? ? ? ? ? ? ?<li><span>2014-06-01</span><a href="#">【有獎活動】給父親的三行書信</a></li>
? ? ? ? ? ? ?<li><span>2014-05-30</span><a href="#">《程序猿，請曬出你的童年》活動獲獎公告</a></li>
? ? ? ? ? ?</ul>
</div>
<div class="page_number">
<a href="#">首頁</a>
<a href="#"><</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">...</a>
<a href="#">></a>
<a href="#">末頁</a>
</div>
</div>
</div>
</body>
</html>