<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>企業(yè)網(wǎng)站實踐</title>
<link?rel="stylesheet"?type="text/css"?href="css/mukewangcss.css">
????<script?type="text/javascript"?scr="js/setHomeSetFav.js"></script>
????<script?type="text/javascript"?scr="js/myfocus-2.0.1.min.js"></script>
????<script?type="text/javascript"?scr="js/mf-pattern/mF_YSlider.js"></script>
????<link?rel="stylesheet"?type="text/css"?href="js/mf-pattern/mF_YSlider.css">
????<script?type="text/javascript">
?????myFocus.set({
?????id:'adBox'
?????});
????</script>
</head>
<body>
<div?id="top">
<div?id="top_content">
<ul>
<li><a?href="javascript:;">聯(lián)系我們</a></li>
<li><a?href="javascript:;"?onclick="AddFavorite(window.location,?document.title)">加入收藏</a></li>
<li><a?href="javascript:;"?onclick="SetHome(window.location)">設(shè)為首頁</a></li>
</ul>
</div>
</div><!--#top結(jié)束-->
<div?id="wrap">
<div?id="logo">
<div?id="logo_left">
<img?src="images/logo.jpg"?alt="慕課網(wǎng)">
</div>
<div?id="logo_right">
<img?src="images/tel.jpg"?alt="服務(wù)熱線">24小時服務(wù)熱線:<span>123-456-7890</span>
</div>
</div><!--#logo結(jié)束-->
<div?id="nav">
<div?id="nav_left">
<ul>
<li><a?href="javascript:;">首頁</a></li>
<li><a?href="javascript:;">關(guān)于慕課</a></li>
<li><a?href="javascript:;">新聞動態(tài)</a></li>
<li><a?href="javascript:;">課程中心</a></li>
<li><a?href="javascript:;">在線課程</a></li>
<li><a?href="javascript:;">人才招聘</a></li>
</ul>
</div><!--#nav_left結(jié)束-->
<div?id="nav_right">
<form?method="POST"?action="">
<input?type="text"/>
<button><img?src="images/search.jpg"></button>
</form>
</div><!--#nav_right結(jié)束-->
</div><!--#nav結(jié)束-->
<div?id="adBox">
??
<div>
<ul>
<li><img?src="images/add2.jpg"></li>
<li><img?src="images/add3.jpg"></li>
<li><img?src="images/add4.jpg"></li>
</ul>
</div>
</div>
</div><!--#wrap結(jié)束-->
</body>
</html>
@charset"UTF-8";
*{
margin:?0;
padding:?0;
}
body{
background-color:?#f5f5f5;
font-size:?12px;
}
#top{
height:?27px;
background-image:url(../images/top_bg.jpg)?repeat-x;
}
#top_content{
????width:?1000px;
????height:?27px;
????line-height:?27px;
????margin:?0?auto;
}
#top_content?li{
list-style-image:url(../images/li_bg.gif);
margin-right:?20px;
float:?right;?
}
#top_content?a:link,
#top_content?a:visited{
???color:?#8e8e8e;
???text-decoration:?none;
}
#top_content?a:hover,
#top_content?a:active{
color:?#900;
}
#wrap{
width:?1000px;
margin:?0?auto;
}
#logo{
height:?80px;
background-color:?#fff;
}
#logo_left{
width:?200px;
float:?left;
}
#logo_right{
width:?300px;
height:?30px;
float:?right;
margin-top:?28px;
color:?#8e8e8e;
}
#logo_right?img{
vertical-align:?middle;
????margin-right:?10px;
}
#logo_right?span{
font-family:?"微軟雅黑";
font-size:16px;
color:?#c00;
}
#nav{
height:?40px;
background:?#786E64;
border-radius:?10px;
position:?relative;
}
#nav_left{
position:?absolute;
left:?10px;
width:?680px;
height:?40px;
}
#nav_right{
position:?absolute;
right:?10px;
width:?300px;
}
#nav_left?li{
float:?left;
list-style:?none;
width:?100px;
height:?40px;
line-height:?40px;
text-align:?center;
}
#nav_left?a:link,
#nav_left?a:visited{
text-decoration:?none;
color:?#fff;
font-family:?"微軟雅黑";
font-size:?16px;
}
#nav_left?a:hover,
#nav_left?a:active{
color:?#ff0;?
}
#nav_right?.search{
display:?inline-block;
background:?#fff;
margin-top:?7px;
}
#nav_right?.search_text{
width:?165px;
height:?25px;
line-height:?25px;
outline:?none;
border:?none;
float:?left;
}
#nav_right?.search_button{
width:?25px;
height:?21px;
border:?none;
float:?left;
}
#adBox{
height:?310px;
width:?1000px;
overflow:?hidden;
}
2016-12-13
問題出在代碼56-63行中,
1、焦點圖初始化的ID與圖片列表最外層的ID要一致。
? 2、圖片列表外面包裹著class為pic的div,class名必須為pic。class名必須為pic。class名必須為pic
詳細情況請會看視頻??!
2016-12-21
該課程中,慕課網(wǎng)首頁案例,把html4改為html5(就是文檔聲明修改了),為什么修改后布局就出錯呢?