核心提示：跟着imooc学写网站首页代码这是最终的展示界面心得：pre class=brush:sql;/prestyle type=text/css*{ margin:0; padding:0; fon...
跟着imooc学写网站首页代码
这是最终的展示界面
心得：
<pre class="brush:sql;">
</pre>
<style type="text/css">
*{
margin:0;
padding:0;
font-size: 12px;
}
body{
background-color:#f5f5f5;
}
.top{
width:100%;
height:27px;
background: url(img/top_bg.jpg) repeat-x;
}
.top_content{
margin:0 auto;
width:1000px;
}
.top_content li{
line-height: 27px;
float:right;
width:70px;
list-style-image:url(img/li_bg.gif);
}
.wrap{
width:1000px;
margin: 0 auto;
}
.logo{
background-color:#fff;
height:80px;
overflow:hidden;/*网友指导指导 对父级清除浮动影响*/
}
.log_left{
width:80px;
float:left;
}
.log_right{
float:right;
width: 300px;
height:28px;
margin-top:30px;
}
.log_right img{
vertical-align: middle;/*图片垂直居中*/
margin-right:10px;
}
.tel{
font-family: "微软雅黑";
color:#c00;
}
/*导航部分制作*/
.nav{
height:40px;
}
.nav_left{
float:left;
height:40px;
width:10px;
background: url(img/nav_left.jpg) no-repeat;
}
.nav_mid{
float:left;
height:40px;
width:980px;
background: url(img/nav_bg.jpg) repeat-x;
}
.nav_right{
float:left;
height:40px;
width: 10px;
background: url(img/nav_right.jpg) no-repeat;
}
/*导航中间部分*/
.nav_mid_left,.nav_mid_right{
float:left;
}
.nav_mid_left{
width:680px;
}
.nav_mid_left li{
width:100px;
font-size: 16px;
float:left;
line-height: 40px;
text-align: center;
list-style-type:none;/*去掉list前圆点*/
}
.nav_mid_left a:visited,.nav_mid_left a:link{
text-decoration: none;
font: 16px "微软雅黑" ;
color:#fff;
}
.nav_mid_left a:hover,.nav_mid_left a:active{
text-decoration: none;
font: 16px "微软雅黑" ;
color:#ff0;
}
.search_text{
height:25px;
width:190px;
background: url(img/search.jpg) no-repeat right;
background-color: #fff;
padding-right:25px;/*防止书写文字溢出影响图片*/
margin-top: 5px;
}
.nav_mid_right{
right:300px;
}
/*广告信息展示区*/
.ad{
height:310px;
overflow: hidden;
}
/*主要的信息展示*/
.main{
height:250px;
margin-top:5px;
background-color: #fff;
}
.news{
width:340px;
border:1px solid #e8e8e8;
}
.course{
width:410px;
border:1px solid #e8e8e8;
margin:0 7px;
}
.siderbar{
width:230px;
}
.news,.course,.siderbar{
height:250px;
float: left;
}
/*news title里的内容*/
.title{
height:35px;
border-bottom:2px solid #e8e8e8;
}
.title_left{
width:70%;
float:left;
line-height: 35px;
padding-left: 20px;
font-size:14px;
font-family: "微软雅黑";
color:#786f66;
}
.title_right{
width:20%;
float:right;
color:#786f66;
}
.title_right a{
text-decoration: none;
color:#786f66;
line-height: 35px;
float: right;
padding:10px;
}
/*news pic 里的内容,其中，号后为后来添加*/
.pic_news{
height:80px;
margin-top: 10px;
line-height: 22px;
}
.pic_news img,.pic_course img{
margin:0 5px;
float: left;
}
.pic_news a,.pic_course a{
text-decoration: none;
color: #c00;
}
/*new list 里的内容*/
.news_list,.course_list{
margin-top: 20px;
}
.news_list a{
text-decoration: none;
color:#000;
}
.news_list a:hover{
color:#c00;
}
.news_list li{
list-style-type: none;
background: url(img/list.jpg) no-repeat ;
padding-left: 20px;
margin:8px;
border-bottom:1px dotted #ccc;
}
.news_list span{
float:right;
}
/*course*/
.pic_course{
height:100px;
margin-top: 10px;
line-height: 22px;
}
.course_list{
margin:20px auto;
height:37px;
left:372px;
background: url(img/product_type_bg.jpg) no-repeat;
}
.course_list li{
list-style-type: none;
float: left;
line-height: 37px;
width:30%;
text-align: center
}
.course_list a{
text-decoration: none;
}
.course_list a:hover{
color:#c00;
}
/*slider*/
.video{
border:1px solid #e8e8e8;
height:185px;
}
.video_content{
height: 150px;
}
.sidebar_ad{
border:1px solid #e8e8e8;
margin-top:10px;
height: 55px;
}
/*copyright*/
.copyright{
width: 100%;
height:200px;
background-color: #e8e8e8;
margin-top:10px;
padding-top: 20px;
}
.copyright_content{
width:1000px;
margin:0 auto;
}
.copyright_content li{
list-style-type: none;
width:200px;
float:left;
background: url(img/line.png) no-repeat right center;
text-align: center;
line-height: 22px;
}
.copyright_content li a{
text-decoration: none;
font-size: 16px;
font-family: "微软雅黑";
color:#999;
}
.copyright_content li ul a{
text-decoration: none;
font-size: 12px;
}</style>
<p class="top">
<p class="top_content">
<ul>
<li>设为首页</li>
<li>加入收藏</li>
<li>联系我们</li>
</ul>
</p>
</p>
<!--top结束-->
<p class="wrap">
<p class="logo">
<p class="log_left"><img alt="慕课网" src="img/logo.jpg" /></p>
<p class="log_right"><img alt="联系电话" src="img/tel.jpg" /><span class="tel">24小时服务热线：123-456-7900</span></p>
</p>
<!--logo结束-->
<p class="nav">
<p class="nav_left"> </p>
<p class="nav_mid">
<p class="nav_mid_left">
<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>
</ul>
</p>
<p class="nav_mid_right">
<form action="" method="post">
<input class="search_text" type="text" /> </form>
</p>
</p>
<!--nav_mid结束-->
<p class="nav_right"> </p>
</p>
<!--nav结束-->
<p class="ad" id="Box_ID">
<p class="loading"><img alt="正在加载请稍等" src="img/loading.gif" /></p>
<p class="pic">
<ul>
<li><img alt="" src="img/ad4.jpg" /></li>
<li><img alt="" src="img/ad2.jpg" /></li>
<li><img alt="" src="img/ad3.jpg" /></li>
</ul>
</p>
</p>
<!--ad结束-->
<p class="main">
<p class="news">
<p class="title">
<h2 class="title_left">新闻中心</h2>
<span class="title_right"><a href="">more>></a></span></p>
<!-- title结束 -->
<p class="pic_news"><img alt="" src="img/news.jpg" />
<h2><a href="">news标题区域</a></h2>
<p>news内容区域<br />
news内容区域<br />
<a href="">Learn More>></a></p>
</p>
<!-- pic_news结束 -->
<p class="news_list">
<ul>
<li><span>2016-10-20</span><a href="">新闻列表内容</a></li>
<li><span>2016-10-20</span><a href="">新闻列表内容</a></li>
<li><span>2016-10-20</span><a href="">新闻列表内容</a></li>
</ul>
</p>
<!-- news_list结束 --></p>
<!-- news结束 -->
<p class="course">
<p class="title">
<h2 class="title_left">课程中心</h2>
<span class="title_right"><a href="">more>></a></span></p>
<!-- title结束 -->
<p class="pic_course"><img alt="" src="img/css.jpg" />
<h2><a href="">课程内容</a></h2>
<p>课程内容详细列表～～～～～～～～～～～～～～～～～</p>
</p>
<!-- pic_course结束 -->
<p class="course_list">
<ul>
<li><a href="">javascript</a></li>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
</ul>
</p>
<!--course_list结束--></p>
<!-- course结束 -->
<p class="siderbar">
<p class="video">
<p class="title">
<h2 class="title_left">视频课程</h2>
</p>
<p class="video_content"><embed align="'middle'" allowfullscreen="'true'" allowscriptaccess="'always'" height="'140'" quality="'high'" src="'https://player.youku.com/player.php/sid/XNjkzMDE5MTUy/v.swf'" type="'application/x-shockwave-flash'" width="'228'"></embed></p>
</p>
<!-- video结束 -->
<p class="sidebar_ad"><img alt="" src="img/app.jpg" /></p>
<!-- sider_ad --></p>
<!-- siderbar --></p>
<!-- main结束 --></p>
<!--wrap结束--><!-- .copyright>.copyright_content>ul>(li>(a{关于}+ul>(li>a{品牌故事})*4))*5 -->
<p class="copyright">
<p class="copyright_content">
<ul>
<li><a href="">关于</a>
<ul>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
</ul>
</li>
<li><a href="">关于</a>
<ul>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
</ul>
</li>
<li><a href="">关于</a>
<ul>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
</ul>
</li>
<li><a href="">关于</a>
<ul>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
<li><a href="">品牌故事</a></li>
</ul>
</li>
<li><a href=""><img alt="" src="img/weixin.png" />微信关注</a>
<ul>
<li><a href=""><img alt="" src="img/qrcode.jpg" /></a></li>
</ul>
</li>
</ul>
</p>
<!-- copyright_content结束--></p>
<!-- copyright结束 --><script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script><script type="text/javascript">
//设置
myFocus.set({
id:'Box_ID',//ID
pattern:'mF_fancy'//风格
});
</script>
轮播图片用了 myFocus.js 插件，其有规定的书写格式以及可选的样式，书写简单在书写代码时在结尾处做好注解在中间的三列信息展示区中 对中间的一列用了margin，要计算好列宽，其中分析三列样式，有一些复用样式 头部 及头部中的作用标题在第一列书写日期时将span标签写在前面，为了防着浮动在不同浏览器成的影响本文中底部footer区域底部版权区用了图片做背景画边界，主要时为了不影响元素的款。 
