慕课网主页

时间：2017-05-20 21:56:09 阅读：251 评论：0 收藏：0 [点我收藏+]

标签：type utf-8 mooc content 电话 float nas 学习计划 body

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网站导航</title>
<link href="main.css" rel="stylesheet" type="text/css">
   <!--焦点图设置-->
 <script src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/js/myfocus-2.0.1.min.js"></script>
    <script type="text/javascript">
        myFocus.set({
           //此处id与后面一致
            id:‘picBox‘  
            
        });
    </script>
</head>

<body>
      
      <div class="main">
             <div class="headTop">
                <div class="logo"><img src="http://img.mukewang.com/53edadad0001efe202000070.jpg"/>
                </div>
                <div class="list">
                    <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>
                </div>
             </div><!--headTop结束-->
             <!--此处id必须为picBox，与前面焦点图初始化的id一致--> 
             <div class="ad" id="picBox"> 
                      <!--当图片没加载出来时的缓冲提示图-->
                      <div class="loading"><img src="http://img.mukewang.com/53edad8c000175cb00300029.jpg" 
                            alt=   "Loading..."></div>
                  <!--图片列表外面必须有一个div， 其class必须为pic-->
                  <div class="pic">
                     <ul>
                       <li><img src="http://img.mukewang.com/53edad2c0001b61310000314.jpg"></li>
                       <li><img src="http://img.mukewang.com/53edad1600019ae910000310.jpg"></li>
                       <li><img src="http://img.mukewang.com/53edad3e0001afad10000318.jpg"></li>
                     </ul>
                  </div>
             </div><!--ad结束--> 
             <div class="scrollnews">
             <div class="scrollnews_left"><a href="#">滚动新闻</a> </div>
             <div class="scrollnews_right"><a href="#">这是滚动新闻</a> </div>
             </div><!--scrollnews结束--> 
   
         <div class="mid">
             <ul>
                <li>
                <img src="http://img.mukewang.com/53edad54000119fb03300130.jpg" alt="玩转Bootstrap">
                <a href="#">玩转Bootstrap</a>
            </li>
            <li>
                <img src="http://img.mukewang.com/53edad690001260a03300130.jpg" alt="企业网站实战">
                <a href="#">企业网站实战</a>
            </li>
            <li class="right_pic">
                <img src="http://img.mukewang.com/53edad7a0001cde803300130.jpg" alt="JavaScript基础">
                <a href="#">JavaScript基础</a>
            </li>
             </ul>
         </div><!--中间部分结束--> 
         <div class="bot">
             <div class="botLeft">
                <div class="title"> <h2>新闻中心</h2></div>    <!--外面加一个div盒子，中间的空隙才能表现出来-->
                 <ul>
                       <li>
                        <div class="news_date"><p>8月23日</p></div>
                        <div class="news_content">
                            <h3><a href="#">学习计划之"Android攻城狮初养成"</a></h3>
                            <p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date"><p>8月23日</p></div>
                        <div class="news_content">
                            <h3><a href="#">学习计划之"Android攻城狮初养成"</a></h3>
                            <p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date"><p>8月23日</p></div>
                        <div class="news_content">
                            <h3><a href="#">学习计划之"Android攻城狮初养成"</a></h3>
                            <p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
                        </div>
                    </li>
                 </ul>
             </div><!--botLeft结束--> 
             <div class="botMid">
                <div class="title">  <h2>热门活动</h2> </div> 
                 <div class="botMid_list">
                <a href="#">
                    <img src="http://img.mukewang.com/53edacdd0001b8e804820302.jpg" alt="活动">
                </a>
                <ul>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                    <li><a href="#">慕课网2048源码征集</a> </li>
                </ul>
            </div>
             </div><!--botMid结束-->
             
             <div class="botRight">
             <div class="title">  <h2>联系我们</h2> </div> 
           <div class="botRight_list">
                <p>讲师招募<br>
                    JoV<br>
                    电话：10086<br>
                    QQ:360870202<br>
                    E-mail:gobananas@163.com<br><br><br>
                    网站合作<br>
                    JoV<br>
                    电话：10086<br>
                    QQ:360870202<br>
                    E-mail:gobananas@163.com
                </p>
            </div><!--botRight_list结束-->
             </div><!--botRight结束-->
         </div><!--尾部bot结束--> 
        
      </div><!--主体main结束-->
      <div class="copyright">
    <p>Copyright ? 2013 imooc.com All Rights Reserved 京ICP备 13046642号-2</p>
</div><!--copyright结束-->
  </body>
</html>

@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
    font-size:12px;
}
body{
    background:#f5f5f5;
}
li{
  list-style:none;
}
a{
    text-decoration:none;
}

.main{
    width:1000px;
    margin:0 auto;
}
.headTop{
  height:80px;
  background:#fff;
}
.logo{
    float:left;
    width:200px;
}
.list{
    float:left;
}
.list li {
    float:left;
    height:80px;
    line-height:80px;
    width:100px;
    text-align:center;
}
.list li a{
    display:block;
    font-size:16px;
    font-family:"微软雅黑";
    color:#000;
    bacground:#fff;
    }
.list li a:hover, .list li a:active{
    color:#fff;
    background:#be3948;
    }
.ad{
    height:310px;
    overflow:hidden;
    margin: 5px 0 20px 0;
    }
.scrollnews{
    height:30px;
    overflow:hidden;}
.scrollnews_left{
    float:left;
    background:#be3948;
    width:150px;
    text-align:center;
    }
.scrollnews_right{
    width:850px;
    background:#3e3e3e;
    float:left;
    }
.scrollnews_right a{
    padding-left: 20px;
}
.scrollnews_left a,.scrollnews_right a{
    color:#fff;
    line-height:30px;
    font-size:15px;
    }
.mid{
    height:150px;
    margin:20px 0 20px 0;
    }
.mid li {
    float:left;
    width:330px;
    height:130px;
    margin-right:5px;
    }
.mid .right_pic{
    margin-right:0;
    }
.mid li a{
    display:block;  /*很重要，不然文字不能居中*/
    color:#000;
    text-align:center;
    font-size: 15px;
    font-family: "微软雅黑";
    }
.bot{
    margin-bottom:20px;
    height:290px;
    overfolw:hidden;
    }
.botLeft,.botMid{
    width: 330px;
    margin-right:5px;
    float: left;
    }
.botRight{
     margin-right:0;
      width: 330px;
       float: left;
   }
 .title {
      height: 35px;
      width: 100%;
      background-color: #be3948;
    
       }
  .title h2{
      font-weight: normal;
      line-height:35px;
      color:#fff;
      padding-left:20px;
      font-size: 14px;
      }
.botLeft ul li{
    height:70px;
    margin:10px 0;
    }
.news_date{
    width:40px;
    height:50px;
    float:left;
    margin:10px 5px;
    background:#be3948;
    border-radius:5px;
    }
.news_date p{
    margin:8px 5px;
    font-size:14px;
    color:#fff;
    line-height:18px;
    }
.news_content{
    float: left;
    width: 260px;
    margin-top: 3px;
    margin-left: 10px;
}
.news_content h3{
    margin-bottom: 10px;
}
.news_content h3 a{
    color: #000;
    font-size: 13px;
    font-weight: bold;
}
.news_content p a{
    line-height: 18px;
    font-size: 14px;
    color: #515151;
}
.botMid_list a img{
    width: 290px;
    height: 120px;
    margin: 10px 20px 5px 20px;
    }
.botMid_list li{
    margin-left: 20px;
}
.botMid_list li a {
    color: #000000;
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
}
.botRight_list p{
    font-size: 15px;
    font-family: "微软雅黑";
}
.copyright{
    width: 100%;
    height: 40px;
    background-color: #e8e8e8;
}

.copyright p{
    line-height: 40px;
    text-align: center;
    color: #000;
    font-size: 16px;
    font-family: "微软雅黑";
    font-weight: bold;
}

这个网页代码终于完成了。现在发现写一个大的完整的网页不难，先把大结构确定好，再各部分细化确定，一点点来。

此代码涉及焦点图的制作。

慕课网主页

标签：type utf-8 mooc content 电话 float nas 学习计划 body

原文地址：http://www.cnblogs.com/sunmarvell/p/6883202.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行