为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 敢来挑战我？！我的网站综合布局实战！

敢来挑战我？！我的网站综合布局实战！

标签：
Html/CSS

效果图
图片描述
请自备myfocus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>challenge</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-family: "微软雅黑";
        }
        body{
            background-color: #fff;
        }

        /*-----------------top-----------------*/
        .top{
            width: 100%;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
        }
        .top_content{
            width: 1000px;
            margin: 0 auto;
        }
        .top_content li{
            list-style: none;
            float: right;
            width: 90px;
            height: 25px;
            line-height: 25px;
        }
        .top_content a{
            text-decoration: none;
            color: #666;

        }
        .top_content a:hover{
            color: #f01400;
        }
        /*---------------主体------------------*/
        .wrap{
            width: 1000px;
            margin: 0 auto;
        }
        .wrap>div{
            margin-top: 10px;
        }
        /*----------------nav---------------------*/
        .nav{
            background-color: #fff;
            overflow: hidden;
        }
        .logo,.nav_content{
            float: left;
        }
        .nav_content{
            margin-left: 50px;
        }
        .nav_content li{
            list-style: none;
            float: left;
        }
        .nav_content a{
            text-decoration: none;
            display: inline-block;
            width: 100px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            font-size: 16px;
            color: #000;
        }
        .nav_content a:hover,.nav_content .current{
            background-color: #C93847;
            color: #fff;
        }
        /*-----------------ad--------------------*/
        .ad{
        }
        /*-----------------scroll_news--------------------*/
        .scroll_news{
            height: 35px;
            color: #fff;
        }
        .scroll_news .scroll_news_left{
            float: left;
            background-color: #C93847;
            height: 35px;
            line-height: 35px;
            width: 150px;
            text-align: center;
        }
        .scroll_news .scroll_news_right{
            float: left;
            height: 35px;
            line-height: 35px;
            background-color: #3E3E3E;
            width: 850px;
            text-indent: 2em;
        }
        /*-------------------course------------------*/

        .course div{
            width: 330px;
            border: 1px solid #ccc;
            float: left;
            text-align: center;
        }
        .course .course_mid{
            margin: 0 2px;
        }
        /*--------------------main-----------------*/
        .main{
        }
        .news,.activity,.sidebar{
            float: left;
            width: 330px;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
        .activity{
            margin-left: 2px;
            margin-right: 2px;
        }
        .title{
            color: #fff;
            background-color: #C93847;
            height: 35px;
            line-height: 35px;
            padding-left: 20px;
        }
        .news_content div{
            height: 80px;
            margin: 10px;
            border-bottom: 1px solid #ccc;
        }
        .news_content span{
            display: block;
            height: 50px;
            width: 40px;
            line-height: 25px;
            text-align: center;
            background-color: #C93847;
            float: left;
            margin: 10px 20px 0 0;
            color: #fff;
            border-radius: 4px;
        }
        .news_content p{
            width: 250px;
            float: right;
            font-size: 13px;
            line-height: 1.5em;
        }
        .news_content p strong{
            line-height: 2em;
        }

        .activity_content{
            padding: 20px;
            height: 243px;
        }
        .activity_content div{
            width: 290px;
            text-align: center;
        }
        .activity_content img{
            width: 290px;
        }
        .activity_content li{
            list-style: none;
        }

        .sidebar_content{
            height: 243px;
            margin: 20px;
        }
        .sidebar p{
            line-height: 24px;
        }
        /*--------------------copyright-----------------*/
        .copyright{
            clear: both;
            padding-top: 10px;
        }
        .copyright div{

            height: 60px;
            line-height: 60px;
            background-color: #E7E7E7;
            text-align: center;
        }
        /*-------------------------------------*/
        /*-------------------------------------*/
        /*-------------------------------------*/
        /*-------------------------------------*/
        /*-------------------------------------*/

    </style>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/myfocus-2.0.1.min.js"></script>
    <script type="text/javascript">
        myFocus.set({
            id:"boxID",
            pattern:"mF_fancy",
            width:1000,
            height:310,
            txtHeight:0
        });
    </script>
</head>
<body>
<!-- top开始 -->
    <div class="top">
        <div class="top_content">
            <ul>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">加入收藏</a></li>
                <li><a href="#">设为首页</a></li>
            </ul>
        </div>
    </div>
    <!-- top结束 -->
    <!-- 主体开始 -->
    <div class="wrap">
        <!-- nav开始 -->
        <div class="nav">
            <div class="logo"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg" alt=""></div>
            <div class="nav_content">
                <ul>
                    <li><a class="current" 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>
        <!-- nav结束 -->
        <!-- ad开始 -->
        <div class="ad">
            <div id="boxID">
                <div class="loading"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53edad8c000175cb00300029.jpg" alt="图片加载中"></div>
                <div class="pic">
                    <ul>
                        <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53edad3e0001afad10000318.jpg" alt=""></li>
                        <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53edad2c0001b61310000314.jpg" alt=""></li>
                        <li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53edad1600019ae910000310.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- ad结束 -->
        <!-- scroll_news开始 -->
        <div class="scroll_news">
            <div class="scroll_news_left">滚动新闻</div>
            <div class="scroll_news_right">这里是滚动新闻</div>
        </div>
        <!-- scroll_news结束 -->
        <!-- course开始 -->
        <div class="course">
            <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53edad54000119fb03300130.jpg" alt=""><span>玩转BootStrap</span></img></div>
            <div class="course_mid"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53edad690001260a03300130.jpg" alt=""><span>企业网站案例</span></img></div>
            <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53edad7a0001cde803300130.jpg" alt=""><span>JavaScript基础</span></img></div>
        </div>
        <!-- course结束 -->
        <!-- main开始 -->
        <div class="main">
            <div class="news">
                <h2 class="title">新闻中心</h2>
                <div class="news_content">
                    <div><span>8月<br>23日</span><p><strong>学习计划之“Android攻城狮初养成”</strong><br>想成为Android攻城狮？想开发一款专属APP？没有任何基础的你，应该从何学起？</p></div>
                    <div><span>8月<br>23日</span><p><strong>学习计划之“Android攻城狮初养成”</strong><br>想成为Android攻城狮？想开发一款专属APP？没有任何基础的你，应该从何学起？</p></div>
                    <div><span>8月<br>23日</span><p><strong>学习计划之“Android攻城狮初养成”</strong><br>想成为Android攻城狮？想开发一款专属APP？没有任何基础的你，应该从何学起？</p></div>
                </div>
            </div>
            <div class="activity">
                <h2 class="title">热门活动</h2>
                <div class="activity_content">
                    <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53edacdd0001b8e804820302.jpg" alt=""></div>
                    <ul>
                        <li>慕课网2048源码征集</li>
                        <li>慕课网2048源码征集</li>
                        <li>慕课网2048源码征集</li>
                    </ul>
                </div>
            </div>
            <div class="sidebar">
                <h2 class="title">联系我们</h2>
                <div class="sidebar_content">
                    <p>讲师招募</p>
                    <p>邹同学</p>
                    <p>电话：18911888156</p>
                    <p>QQ：123456798</p>
                    <p>E-mail：hehe@126.com</p>
                    <br>
                    <p>网站合作</p>
                    <p>蒋同学</p>
                    <p>电话：1300000000</p>
                    <p>QQ：546789132</p>
                    <p>E-mail：emoji@126.com</p>
                </div>
            </div>
        </div>
        <!-- main结束 -->
        <div class="copyright">
            <div>Copyright  2016 imooc.com All Rights Reserved 京ICP备 13046642号-2</div>
        </div>
    </div>
    <!-- 主体结束 -->
</body>
</html>
点击查看更多内容
发表于 2016.08.13 15:13， 共 3614 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
22人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

Leal_Gullden

学生
手记
篇
粉丝
23
获赞与收藏
267

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消