首次设计网页骨架初稿,head模仿网易

Original 2019-04-13 18:25:07 310
abstract:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <link rel="shortcut icon" type="image/x-icon" href="image/LOG

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <link rel="shortcut icon" type="image/x-icon" href="image/LOGO.jpg">        


    <title>网页骨架初稿</title>

    

    <style TYPE="text/css">

        *{

            margin: 0;

            padding: 0;

        }


        .cl{

            clear: both;

        }


        .inner_c{

            margin: 0 auto;

        }


        .head .nav{

            /*background-color: brown;*/

            width:1200px;

            height: 40px;

        }


        .head .nav ul{

            list-style: none;

        }


        .head .nav ul li{

            float: left;

            width:49px;

            height: 40px;

            line-height: 40px;

            text-align: center;

            padding-right:1px;

        }

        .head .nav ul li a{

            display: inline-block;

            width:47px;

            color:#000;

            font:12px "宋体";

/*            padding-right:10px;

            padding-left: 12px;*/

            border-right: 1px solid #ccc;

            text-decoration: none;


        }


        .head .nav ul li.first_li a{

            border-left:1px solid #ccc;

        }


        .head .nav ul li a:hover{

            /*background-color: #ccc;*/

            text-decoration: underline;

            color: red;

            position: relative;

            top:1px;

            left:1px;

        }


        .banner_bg{

            height:465px;

            /*background: url("image/banner_bg.jpg") no-repeat center top;*/

            background-color:#FBB91C;

        }

        

        .banner_bg .ad{

            margin: 0 auto;

            width: 1200px;

            height: 465px;

            background-color: #ccc;

        }

        

        .banner_bg .guanggao{

            margin: 0 auto;

            width: 1200px;

            height: 115px;

            background-color:red;

        }

        .banner_bg .classify{

            width: 200px;

            height: 350px;

            background-color:#000000;

            opacity: 0.5;

        }


        .banner_bg .classify ul{

            list-style:none;

        }

        

        .banner_bg .classify ul li{

            height: 34px;

            /*display: inline-block;?*/

            color:#fff;

            border-bottom: 1px solid #ccc;

            text-align: center;

            position: relative;

        }

        

        .banner_bg .classify ul li a{

            text-decoration: none;

            color:#fff;

            line-height: 35px;

            font-size: 15px;

        }

        .banner_bg .classify ul li .nvzhuang{

            display: none;

            width:1000px;

            height: 350px;

            background-color:red;

            position: absolute; 

            left:200px;

            top:0px;

        }

        .banner_bg .classify ul li:hover{

            background-color: #fff;

            color:blue;

        }

        

        .banner_bg .classify ul li:hover a{

            color: blue;

            font-family:"Microsoft YaHei","Simsun";

            font-weight: bold;

        }

        .banner_bg .classify ul li:hover .nvzhuang{

            display: block;

        }


        .content{

            width:1200px;

            height:600px;

            background-color:greenyellow;

        }


        .content .left{

            float: left;

            width: 320px;

            height: 580px;

            margin:10px 10px;

            background-color: #FFCCFF;

        }

        .content .right{

            float: left;

            width: 850px;

            height: 580px;

            margin:10px 10px 10px 0;

            background-color: #FFCCFF;

        }    

        

        .foot{

            margin-top: 50px;

            height: 50px;

            background: #33CCFF;

        }

    </style>


</head>

<body>

    <!--head区域-->

    <div class="head">

        <div class="nav inner_c">

            <ul>

                <li class='first_li'><a href="">新闻</a></li>

                <li><a href="">体育</a></li>

                <li><a href="">NBA</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>

                <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>

                <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>

                <li><a href="">理财</a></li>       

            </ul>

        </div>

        <div class="cl"></div>

    </div>


    <div class="banner_bg">

        <div class="ad">


            <div class="guanggao">广告</div>

            <div class="classify">

                <ul>

                    <li>

                        <a href="#">女装</a> / <a href="#">内衣</a>

                        <div class="nvzhuang">详细内容</div>

                    </li>

                    <li>

                        <a href="#">男装</a> / <a href="#">运动户外</a>

                    </li>

                    <li>

                        <a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a>

                    </li>

                    <li>

                        <a href="#">美妆</a> / <a href="#">个人护理</a>

                    </li>

                    <li>

                        <a href="#">腕表</a> / <a href="#">眼镜</a> / <a href="#">珠宝饰品</a>

                    </li>

                    <li>

                        <a href="#">手机</a> / <a href="#">数码</a> / <a href="#">电脑办公</a>

                    </li>

                    <li>

                        <a href="#">母婴玩具</a>

                    </li>

                    <li>

                        <a href="#">零售</a> / <a href="#">茶酒</a> / <a href="#">进口食品</a>

                    </li>

                    <li>

                        <a href="#">生鲜水果</a>

                    </li>

                    <li>

                        <a href="#">大家电</a> / <a href="#">生活电器</a>

                    </li>

                </ul>


            </div>

        </div>

        <!-- 清除浮动 -->

        <div class="cl"></div>

            

    </div>


    <div class="content inner_c">

        <div class="left">

            

        </div>

        <div class="right">

            

        </div>

    </div>


     <div class="foot"></div>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-04-13 18:36:10
Teacher's summary:代码很长, 但仿的像不像看不到效果, 为什么不放张图呢?

Release Notes

Popular Entries