苏宁易购首页局部案例练习

其他 2020-07-23 12:55:56 阅读次数: 0

苏宁易购

  • index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="苏宁易购-综合网上购物平台，商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快，正品行货、全国联保、可门店自提，全网更低价，让您放心去喜欢！">
    <meta name="keywords" content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货">
    <title>苏宁易购-送货更准时、价格更超值、上新货更快</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./source/style.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <script src="./js/iconfont.js"></script>

</head>

<body>
    <!-- top-focus start -->
    <div class="top-focus">
        <div class="container">
            <a href="#"> <img src="./images/top-banner.jpg" alt=""></a>
            <a href="#" class="top-focus-close"></a>
        </div>
    </div>
    <!-- top-focus end -->

    <!-- header start -->
    <!-- header-nav start -->
    <div class="header-nav clearfix">
        <div class="container ">
            <div class="header-top-nav clearfix">
                <!-- 左边 -->
                <div class="header-nav-fl ">
                    <ul>
                        <li class="down">
                            <a href="#">网站导航 </a>
                            <span class="iconfont">&#xe69b;</span>
                        </li>
                        <li class="down">
                            <a href="#">商家入驻 </a>
                            <span class="iconfont">&#xe69b;</span>
                        </li>
                        <li class="down">
                            <a href="#">客户服务 </a>
                            <span class="iconfont">&#xe69b;</span>
                        </li>
                        <li class="address">

                            <span>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weizhi"></use>
                                </svg>
                            </span>
                            </>
                            <a href="#">上海 </a>
                            <i><s>▼</s></i>
                        </li>
                    </ul>
                </div>
                <!-- 右边 -->
                <div class="header-nav-fr ">
                    <ul>
                        <li>
                            <a href="#">请登录 <a href="#" class="active">注册有礼</a></a>
                        </li>
                        <li>
                            <a href="#">我的订单</a>
                            <span class="iconfont">&#xe69b;</span>
                        </li>
                        <li><a href="#">我的易购</a>
                            <span class="iconfont">&#xe69b;</span>
                        </li>
                        <li>
                            <a href="#">苏宁会员</a></li>
                        <li>
                            <img class="cart" src="images/cart.png" alt="">
                            <a href="#" class="active">购物车</a>
                            <span class="iconfont">&#xe69b;</span>
                        </li>
                        <li>
                            <a href="#">企业采购</a>
                        </li>
                        <li><a href="#">手机苏宁</a>
                            <span class="iconfont">&#xe69b;</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- logo -->
            <div class="header-logo ">
                <h1><a href="index.html"><img src="./images/sn-logo.png" alt=""></a></h1>
            </div>
            <div class="header-sub-logo ">
                <img src="./images/sn-sub-logo.gif" alt="">
            </div>
        </div>
        <!-- header-search start -->
        <div class="header-search ">
            <input type="text" placeholder="周年庆赢好礼">
            <button>搜索</button>
        </div>
        <!-- header-list start -->
        <div class="header-list ">
            <ul>
                <li><a href="#">烤箱</a><em>|</em></li>
                <li><a href="#" class="active">老板林内CP趴</a><em>|</em></li>
                <li><a href="#">iPhone XS</a><em>|</em></li>
                <li><a href="#" class="active">空气感拉拉裤</a><em>|</em></li>
                <li><a href="#" class="active">空调立减500</a><em>|</em></li>
                <li><a href="#">浪琴</a><em>|</em></li>
                <li><a href="#">手机</a><em>|</em></li>
                <li><a href="#">冰箱</a></li>
            </ul>
        </div>
    </div>
    <!-- header end -->

    <!-- nav start -->
    <div class="nav clearfix">
        <div class="container">
            <div class="dropdown fl">
                <div class="dt">
                    <a href="#">全部商品分类</a>
                </div>
                <div class="dd">
                    <ul class="index-list">
                        <li class="">
                            <i class="sn-1"></i>
                            <a target="_blank">手机</a><em>/</em>
                            <a target="_blank">运营商</a><em>/</em>
                            <a target="_blank">智能数码</a>
                        </li>
                        <li class="">
                            <i class="sn-2"></i>
                            <a target="_blank">电视</a><em>/</em>
                            <a target="_blank">冰箱</a><em>/</em>
                            <a target="_blank">空调</a><em>/</em>
                            <a target="_blank">洗衣机</a>
                        </li>
                        <li class="">
                            <i class="sn-3"></i>
                            <a target="_blank">厨卫大电</a><em>/</em>
                            <a target="_blank">生活家电</a><em>/</em>
                            <a target="_blank">厨具</a>
                        </li>
                        <li class="">
                            <i class="sn-4"></i>
                            <a target="_blank">电脑办公</a><em>/</em>
                            <a target="_blank">相机</a><em>/</em>
                            <a target="_blank">DIY</a>
                        </li>
                        <li class="">
                            <i class="sn-5"></i>
                            <a target="_blank">家居</a><em>/</em>
                            <a target="_blank">家具</a><em>/</em>
                            <a target="_blank">家装</a><em>/</em>
                            <a target="_blank">家纺</a>
                        </li>
                        <li>
                            <i class="sn-6"></i>
                            <a target="_blank">食品</a><em>/</em>
                            <a target="_blank">酒水</a><em>/</em>
                            <a target="_blank">生鲜</a><em>/</em>
                            <a target="_blank">特产</a>
                        </li>
                        <li>
                            <i class="sn-7"></i>
                            <a target="_blank">个护化妆</a><em>/</em>
                            <a target="_blank">纸品清洁</a><em>/</em>
                            <a target="_blank">宠物</a>
                        </li>
                        <li class="">
                            <i class="sn-8"></i>
                            <a target="_blank">母婴</a><em>/</em>
                            <a target="_blank">玩具</a><em>/</em>
                            <a target="_blank">车床</a><em>/</em>
                            <a target="_blank">童装</a>
                        </li>
                        <li>
                            <i class="sn-9"></i>
                            <a target="_blank">运动</a><em>/</em>
                            <a target="_blank">户外</a><em>/</em>
                            <a target="_blank">足球</a><em>/</em>
                            <a target="_blank">跑步机</a>
                        </li>
                        <li class="">
                            <i class="sn-10"></i>
                            <a target="_blank">男装</a><em>/</em>
                            <a target="_blank">女装</a><em>/</em>
                            <a target="_blank">内衣</a>
                        </li>
                        <li>
                            <i class="sn-11"></i>
                            <a target="_blank">鞋靴</a><em>/</em>
                            <a target="_blank">箱包</a><em>/</em>
                            <a target="_blank">钟表</a><em>/</em>
                            <a target="_blank">珠宝</a>
                        </li>
                        <li class="">
                            <i class="sn-12"></i>
                            <a target="_blank">汽摩</a><em>/</em>
                            <a target="_blank">二手车</a><em>/</em>
                            <a target="_blank">汽车用品</a>
                        </li>
                        <li class="">
                            <i class="sn-13"></i>
                            <a target="_blank">图书</a><em>/</em>
                            <a target="_blank">童书</a><em>/</em>
                            <a target="_blank">教辅教材</a>
                        </li>
                        <li>
                            <i class="sn-fun"></i>
                            <a target="_blank">理财</a><em>/</em>
                            <a target="_blank">分期</a><em>/</em>
                            <a target="_blank">保险</a><em>/</em>
                            <a target="_blank">房产</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="navitems fl">
                <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>
                    <li><a href="#">苏宁国际</a></li>
                    <li><a href="#">苏宁Outlets</a></li>
                    <li><a href="#">苏宁金融</a></li>
                </ul>
            </div>
        </div>

    </div>
    <!-- nav end -->

    <!-- screen start -->
    <div class="screen">
        <div class="container">
            <!--中间的轮播图 -->
            <div class="screen-focus">
                <ul>
                    <li>
                        <a href="#"> <img src="./images/casual.jpg" alt=""></a>
                    </li>
                </ul>
                <ol>
                    <li></li>
                </ol>
                <!-- 手风琴 -->
                <div class="casual-bottom">
                    <img src="./images/casual_bottom.jpg" alt="">
                </div>
            </div>
            <!-- user start -->
            <div class="user">
                <div class="user-info">
                    <div class="user-logo">
                        <a href="#"></a>
                    </div>
                    <p>Hi,你好</p>
                    <div class="user-btn">
                        <a href="#">新人有礼</a>
                        <a href="#"></a>
                    </div>
                    <div class="user-enter">
                        <a href="#"><i></i>领云钻&gt;</a><a href="#"> <i></i> 领劵&gt;</a>
                    </div>
                </div>
                <div class="user-center">
                    <p><em>[活动]</em> <a href="#">苏宁红孩子&新丝路少儿型秀大赛</a></p>
                    <p><em>[知识]</em> <a href="#">别让孩子这样睡觉，可能比同龄人矮</a></p>
                </div>
                <div class="user-shortcut">
                    <ul>
                        <li><a href="#"><i class="sn-4"></i>
                                <p>话费</p>
                            </a></li>
                        <li><a href="#"><i class="sn-4"></i>
                                <p>水电煤</p>
                            </a></li>
                        <li><a href="#"><i class="sn-4"></i>
                                <p>苏宁卡</p>
                            </a></li>
                        <li><a href="#"><i class="sn-4"></i>
                                <p>理财</p>
                            </a></li>
                        <li><a href="#"><i class="sn-4"></i>
                                <p>分期</p>
                            </a></li>
                        <li><a href="#"><i class="sn-4"></i>
                                <p>苏宁公益</p>
                            </a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <!-- screen end -->

    <!-- content start -->
    <div class="content">
        <div class="container">
            <ul>
                <li></li>
            </ul>
        </div>
    </div>
    <!-- content end -->

    <!-- footer start -->
    <div class="footer">
        <div class="container">
            <div class="footer-promise clearfix">
                <dl>
                    <dt><a href=""><img src="images/promise_1.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
                <dl>
                    <dt><a href=""><img src="images/promise_2.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
                <dl>
                    <dt><a href=""><img src="images/promise_3.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
                <dl>
                    <dt><a href=""><img src="images/promise_4.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
                <dl>
                    <dt><a href=""><img src="images/promise_5.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
            </div>
            <div class="footer-items">
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="">导购演示</a></dd>
                    <dd><a href="">免费注册</a></dd>
                    <dd><a href="">会员等级</a></dd>
                    <dd><a href="">常见问题</a></dd>
                    <dd><a href="">品牌大全</a></dd>
                </dl>
                <dl>
                    <dt>导购演示</dt>
                    <dd>免费注册</dd>
                    <dd>会员等级</dd>
                    <dd>常见问题</dd>
                    <dd>品牌大全</dd>
                    <dd>支付方式</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="">导购演示</a></dd>
                    <dd><a href="">免费注册</a></dd>
                    <dd><a href="">会员等级</a></dd>
                    <dd><a href="">常见问题</a></dd>
                    <dd><a href="">品牌大全</a></dd>
                </dl>
                <dl>
                    <dt>导购演示</dt>
                    <dd>免费注册</dd>
                    <dd>会员等级</dd>
                    <dd>常见问题</dd>
                    <dd>品牌大全</dd>
                    <dd>支付方式</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="">导购演示</a></dd>
                    <dd><a href="">免费注册</a></dd>
                    <dd><a href="">会员等级</a></dd>
                    <dd><a href="">常见问题</a></dd>
                    <dd><a href="">品牌大全</a></dd>
                </dl>
                <div class="app-down">
                    <p>身边苏宁</p>
                    <a href="#">全国300多个城市，上万个门店和服务终端期待您的光临，为您提供最贴心的服务！</a>
                </div>
            </div>
        </div>
    </div>
    <!-- footer end -->

    <!-- link start -->
    <div class="link">
        <div class="container">
            <p class="url-list-links">
                <a href="#">苏宁互联</a>|
                <a href="#">苏宁金融</a>|
                <a href="#">苏宁支付</a>|
                <a href="#">PP视频</a>|
                <a href="#">红孩子</a>|
                <a href="#">苏宁物流</a>|
                <a href="#">手机苏宁</a>|
                <a href="#">零售云</a>|
                <a href="#">知识产权举报</a>|
                <a href="#">投资者关系</a>
            </p>
            <p class="url-list-links">
                <a href="#">联系我们</a>|
                <a href="#">诚聘英才</a>|
                <a href="#">供应商入驻</a>|
                <a href="#">广告平台</a>|
                <a href="#">苏宁联盟</a>|
                <a href="#">苏宁招标</a>|
                <a href="#">友情链接</a>|
                <a href="#">法律申明</a>|
                <a href="#">用户体验提升计划</a>|
                <a href="#">股东会员认证</a>
            </p>
        </div>
    </div>
    <!-- link end -->


    <!-- copyright start-->
    <div class="copyright">
        <div class="container">
            Copyright© 2002-2018，苏宁易购集团股份有限公司版权所有 | 苏公网安备 32010202010078号 | 苏ICP备10207551号-4 | 苏B1-20130131<br>
            苏B2-20130376 | 苏B2-20130391 | 出版物经营许可证新出发苏批字第A-243号 | 互联网药品信息服务资格证书（苏）-非经营性-2016-0005<br>
            本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）
        </div>
    </div>
    <div class="copyright-bottom-img">
        <a href=""><img src="images/chengxin.png" alt=""></a>
        <a href=""><img src="images/unicom.png" alt=""></a>
        <a href=""><img src="images/dianxin.jpg" alt=""></a>
        <a href=""><img src="images/dianzi.png" alt=""></a>
    </div>
    <!-- copyright end -->

</body>

</html>
  • index.less
/* top-focus start */
.top-focus {
    height: 100px;
    background-color: #164fa6;

    .container {
        position: relative;

        .top-focus-close {
            display: block;
            position: absolute;
            top: 3px;
            right: 0;
            width: 15px;
            height: 15px;
            margin-right: -15px;
            background: url("../images/index.png") no-repeat -240px -145px;

            &:hover {
                background: url("../images/index.png") no-repeat -255px -145px;
            }
        }
    }

}

/* top-focus end */

/* header start */
.header-nav {
    position: relative;
    height: 36px;
    background-color: #f5f5f5;
    line-height: 36px;

    /* 左边 */
    .header-nav-fl {
        ul {
            li {
                position: relative;
                float: left;
                padding: 0 25px 0 10px;

                span {
                    position: absolute;
                    top: 1px;
                    right: 10px;
                }

                &:last-child {
                    padding-left: 20px;

                    span {
                        position: absolute;
                        top: 0;
                        left: 2px;
                        font-size: 14px;


                    }
                }
            }
        }
    }

    /* 右边 */
    .header-nav-fr {
        ul {
            float: right;

            li {
                position: relative;
                float: left;
                padding: 0 20px 0 10px;

                span {
                    position: absolute;
                    top: 1px;
                    right: 6px;
                }

                &:first-child {
                    .active {
                        margin-left: 10px;
                    }
                }

                &:nth-child(5) {
                    margin-left: -15px;
                }

                img {
                    width: 15px;
                    height: 15px;
                }
            }
        }
    }

    /* logo  */
    .header-logo {
        float: left;
        width: 190px;
        height: 90px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .header-sub-logo {
        float: left;
        width: 160px;
        height: 100px;
        margin-top: 5px;


        img {
            width: 100%;
            height: 100%;
        }
    }

    /* header-search */
    .header-search {
        position: absolute;
        top: 66px;
        left: 480px;
        width: 538px;
        height: 36px;
        border: 2px solid #f48200;

        input {
            width: 456px;
            height: 36px;
            padding-left: 5px;
        }

        button {
            position: absolute;
            top: 0;
            right: 0;
            width: 82px;
            height: 36px;
            background-color: #f80;
            color: #fff;
            /* 去轮廓线 */
            border: none;
            outline: none;
            font-size: 18px;
        }
    }

    /* header-list */
    .header-list {
        ul {
            position: absolute;
            top: 102px;
            left: 480px;

            li {
                float: left;
                padding-left: 5px;

                a {
                    padding-right: 8px;
                }

                em {
                    font-size: 12px;
                    color: #c0c0c0;
                }
            }
        }
    }

}

/* header end */

/* nav start */
.nav {
    .dropdown {
        position: relative;

        .dt {
            width: 210px;

            a {
                position: relative;
                display: block;
                width: 190px;
                height: 38px;
                background-color: #f90;
                color: white;
                font: 600 14px/38px "microsoft yahei";
                padding-left: 30px;
                box-sizing: border-box;

                &::before {
                    content: "";
                    display: block;
                    width: 12px;
                    height: 12px;
                    background: url(../images/index.png) no-repeat 0 0;
                    position: absolute;
                    top: 14px;
                    left: 14px;
                }
            }
        }

        .dd {
            position: absolute;
            top: 38px;
            width: 190px;
            height: 440px;
            background-color: #252221;

            ul {
                li {
                    height: 31px;
                    padding: 0 10px 0 8px;
                    font: 400 13px/31px "microsoft yahei";
                    color: #666;

                    a {
                        color: #fff;
                    }
                }
            }
        }
    }

    .navitems {
        ul {
            li {
                float: left;

                a {
                    display: inline-block;
                    height: 38px;
                    padding: 0 12px;
                    font: 600 16px/38px "microsoft yahei";
                    color: #333333;

                }
            }
        }
    }
}

/* nav end */

/* screen start */
.screen {
    height: 440px;
    background-color: purple;

    .screen-focus {
        position: relative;
        float: left;
        margin-left: 190px;
        width: 830px;
        height: 440px;

        img {
            width: 100%;
            height: 100%;
        }

        .casual-bottom {
            position: absolute;
            left: 16px;
            bottom: 10px;
            width: 796px;
            height: 120px;
        }
    }

    .user {

        float: right;
        margin-top: 5px;
        width: 170px;
        height: 435px;
        background-color: #fff;
        box-sizing: border-box;
        overflow: hidden;

        .user-info {
            width: 170px;
            height: 169px;
            border-bottom: 1px solid #f2f2f2;
            padding: 11px 0 2px;
            box-sizing: border-box;

            .user-logo {

                a {
                    margin: 0 auto;
                    display: block;
                    width: 58px;
                    height: 58px;
                    background: url("../images/index.png") no-repeat -92px -23px;
                }
            }

            p {
                text-align: center;
            }

            .user-btn {
                margin-top: 9px;
                display: flex;
                justify-content: space-around;

                a {
                    display: inline-block;
                    width: 70px;
                    height: 22px;

                    &:first-child {
                        display: inline-block;
                        border: 1px solid #ff9900;
                        text-align: center;
                        line-height: 22px;
                        color: #ff9900;
                        box-sizing: border-box;
                    }

                    &:last-child {
                        background: url("../images/index.png") no-repeat -295px -252px;
                    }
                }
            }

            .user-enter {
                margin-top: 12px;

                a {
                    display: inline-block;
                    margin-left: 10px;


                    i {
                        display: inline-block;
                        width: 16px;
                        height: 14px;
                        margin: 0 5px;
                        box-sizing: border-box;
                        vertical-align: middle;
                    }

                    &:first-child {
                        i {
                            background: url("../images/index.png") no-repeat -112px 0;
                        }

                    }

                    &:last-child {
                        i {
                            background: url("../images/index.png") no-repeat -88px 0;
                        }
                    }
                }
            }
        }

        .user-center {
            height: 120px;
            padding-left: 10px;

            em {
                color: #ff9900;
            }

            p {
                width: 150px;
                height: 40px;
                margin-top: 15px;
            }
        }

        .user-shortcut {
            width: 170px;
            height: 145px;
            border-top: 1px solid #f2f2f2;
            box-sizing: border-box;

            ul {
                li {
                    display: flex;
                    float: left;
                    width: 55px;
                    height: 72px;

                    border-width: 0 1px 1px 0;
                    border-color: #f2f2f2;
                    border-style: solid;

                    justify-content: center;
                    align-content: center;
                    text-align: center;
                    box-sizing: border-box;

                    i {
                        font-size: 40px;
                    }

                    &:nth-child(3) {
                        border-right: none;
                    }

                    &:nth-child(4) {
                        border-bottom: none;
                    }

                    &:nth-child(5) {
                        border-bottom: none;
                    }

                    &:nth-child(6) {
                        border-right: none;
                        border-bottom: none;
                    }
                }
            }
        }


    }
}

/* screen end */


/* content start */
.content {
    height: 73px;
    background-color: #f2f2f2;
    padding-top: 10px;
    border-bottom: 1px solid #e7e7e7;

    .container {

        height: 48px;
        background-color: #f90;
    }
}

/* content end */

/* footer start */
.footer {
    height: 270px;
    background-color: #f5f5f5;

    .footer-promise {
        width: 100%;

        dl {
            margin-top: 15px;
            float: left;
            width: 20%;

            dt {
                float: left;
                margin-right: 8px;
                margin-top: 5px;

            }

            dd {
                float: left;

                p {
                    margin-top: 7px;
                }
            }
        }
    }

    .footer-items {
        dl {
            float: left;
            width: 200px;

            dt {
                height: 40px;
                font: 600 14px/40px "microsoft yahei";
                color: #545454;
            }

            dd {
                height: 20px;
            }
        }

        .app-down {
            float: left;
            width: 90px;
            height: 180px;

            p {
                height: 40px;
                font: 600 14px/40px "microsoft yahei";
                color: #545454;
            }

        }
    }
}

/* footer end */


/* link start */
.link {
    margin-top: 30px;
    text-align: center;

    p {
        margin-top: 5px;

        a {
            margin: 0 8px;
        }
    }
}

/* link end */

/* copyright start */
.copyright {
    margin-top: 20px;
    text-align: center;
    line-height: 2;


}

.copyright-bottom-img {
    margin-top: 20px;
    text-align: center;

    a {
        margin-left: 18px;
    }
}

/* copyright end */
  • index.css
/* top-focus start */
.top-focus {
  height: 100px;
  background-color: #164fa6;
}
.top-focus .container {
  position: relative;
}
.top-focus .container .top-focus-close {
  display: block;
  position: absolute;
  top: 3px;
  right: 0;
  width: 15px;
  height: 15px;
  margin-right: -15px;
  background: url("../images/index.png") no-repeat -240px -145px;
}
.top-focus .container .top-focus-close:hover {
  background: url("../images/index.png") no-repeat -255px -145px;
}
/* top-focus end */
/* header start */
.header-nav {
  position: relative;
  height: 36px;
  background-color: #f5f5f5;
  line-height: 36px;
  /* 左边 */
  /* 右边 */
  /* logo  */
  /* header-search */
  /* header-list */
}
.header-nav .header-nav-fl ul li {
  position: relative;
  float: left;
  padding: 0 25px 0 10px;
}
.header-nav .header-nav-fl ul li span {
  position: absolute;
  top: 1px;
  right: 10px;
}
.header-nav .header-nav-fl ul li:last-child {
  padding-left: 20px;
}
.header-nav .header-nav-fl ul li:last-child span {
  position: absolute;
  top: 0;
  left: 2px;
  font-size: 14px;
}
.header-nav .header-nav-fr ul {
  float: right;
}
.header-nav .header-nav-fr ul li {
  position: relative;
  float: left;
  padding: 0 20px 0 10px;
}
.header-nav .header-nav-fr ul li span {
  position: absolute;
  top: 1px;
  right: 6px;
}
.header-nav .header-nav-fr ul li:first-child .active {
  margin-left: 10px;
}
.header-nav .header-nav-fr ul li:nth-child(5) {
  margin-left: -15px;
}
.header-nav .header-nav-fr ul li img {
  width: 15px;
  height: 15px;
}
.header-nav .header-logo {
  float: left;
  width: 190px;
  height: 90px;
}
.header-nav .header-logo img {
  width: 100%;
  height: 100%;
}
.header-nav .header-sub-logo {
  float: left;
  width: 160px;
  height: 100px;
  margin-top: 5px;
}
.header-nav .header-sub-logo img {
  width: 100%;
  height: 100%;
}
.header-nav .header-search {
  position: absolute;
  top: 66px;
  left: 480px;
  width: 538px;
  height: 36px;
  border: 2px solid #f48200;
}
.header-nav .header-search input {
  width: 456px;
  height: 36px;
  padding-left: 5px;
}
.header-nav .header-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 82px;
  height: 36px;
  background-color: #f80;
  color: #fff;
  /* 去轮廓线 */
  border: none;
  outline: none;
  font-size: 18px;
}
.header-nav .header-list ul {
  position: absolute;
  top: 102px;
  left: 480px;
}
.header-nav .header-list ul li {
  float: left;
  padding-left: 5px;
}
.header-nav .header-list ul li a {
  padding-right: 8px;
}
.header-nav .header-list ul li em {
  font-size: 12px;
  color: #c0c0c0;
}
/* header end */
/* nav start */
.nav .dropdown {
  position: relative;
}
.nav .dropdown .dt {
  width: 210px;
}
.nav .dropdown .dt a {
  position: relative;
  display: block;
  width: 190px;
  height: 38px;
  background-color: #f90;
  color: white;
  font: 600 14px/38px "microsoft yahei";
  padding-left: 30px;
  box-sizing: border-box;
}
.nav .dropdown .dt a::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url(../images/index.png) no-repeat 0 0;
  position: absolute;
  top: 14px;
  left: 14px;
}
.nav .dropdown .dd {
  position: absolute;
  top: 38px;
  width: 190px;
  height: 440px;
  background-color: #252221;
}
.nav .dropdown .dd ul li {
  height: 31px;
  padding: 0 10px 0 8px;
  font: 400 13px/31px "microsoft yahei";
  color: #666;
}
.nav .dropdown .dd ul li a {
  color: #fff;
}
.nav .navitems ul li {
  float: left;
}
.nav .navitems ul li a {
  display: inline-block;
  height: 38px;
  padding: 0 12px;
  font: 600 16px/38px "microsoft yahei";
  color: #333333;
}
/* nav end */
/* screen start */
.screen {
  height: 440px;
  background-color: purple;
}
.screen .screen-focus {
  position: relative;
  float: left;
  margin-left: 190px;
  width: 830px;
  height: 440px;
}
.screen .screen-focus img {
  width: 100%;
  height: 100%;
}
.screen .screen-focus .casual-bottom {
  position: absolute;
  left: 16px;
  bottom: 10px;
  width: 796px;
  height: 120px;
}
.screen .user {
  float: right;
  margin-top: 5px;
  width: 170px;
  height: 435px;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.screen .user .user-info {
  width: 170px;
  height: 169px;
  border-bottom: 1px solid #f2f2f2;
  padding: 11px 0 2px;
  box-sizing: border-box;
}
.screen .user .user-info .user-logo a {
  margin: 0 auto;
  display: block;
  width: 58px;
  height: 58px;
  background: url("../images/index.png") no-repeat -92px -23px;
}
.screen .user .user-info p {
  text-align: center;
}
.screen .user .user-info .user-btn {
  margin-top: 9px;
  display: flex;
  justify-content: space-around;
}
.screen .user .user-info .user-btn a {
  display: inline-block;
  width: 70px;
  height: 22px;
}
.screen .user .user-info .user-btn a:first-child {
  display: inline-block;
  border: 1px solid #ff9900;
  text-align: center;
  line-height: 22px;
  color: #ff9900;
  box-sizing: border-box;
}
.screen .user .user-info .user-btn a:last-child {
  background: url("../images/index.png") no-repeat -295px -252px;
}
.screen .user .user-info .user-enter {
  margin-top: 12px;
}
.screen .user .user-info .user-enter a {
  display: inline-block;
  margin-left: 10px;
}
.screen .user .user-info .user-enter a i {
  display: inline-block;
  width: 16px;
  height: 14px;
  margin: 0 5px;
  box-sizing: border-box;
  vertical-align: middle;
}
.screen .user .user-info .user-enter a:first-child i {
  background: url("../images/index.png") no-repeat -112px 0;
}
.screen .user .user-info .user-enter a:last-child i {
  background: url("../images/index.png") no-repeat -88px 0;
}
.screen .user .user-center {
  height: 120px;
  padding-left: 10px;
}
.screen .user .user-center em {
  color: #ff9900;
}
.screen .user .user-center p {
  width: 150px;
  height: 40px;
  margin-top: 15px;
}
.screen .user .user-shortcut {
  width: 170px;
  height: 145px;
  border-top: 1px solid #f2f2f2;
  box-sizing: border-box;
}
.screen .user .user-shortcut ul li {
  display: flex;
  float: left;
  width: 55px;
  height: 72px;
  border-width: 0 1px 1px 0;
  border-color: #f2f2f2;
  border-style: solid;
  justify-content: center;
  align-content: center;
  text-align: center;
  box-sizing: border-box;
}
.screen .user .user-shortcut ul li i {
  font-size: 40px;
}
.screen .user .user-shortcut ul li:nth-child(3) {
  border-right: none;
}
.screen .user .user-shortcut ul li:nth-child(4) {
  border-bottom: none;
}
.screen .user .user-shortcut ul li:nth-child(5) {
  border-bottom: none;
}
.screen .user .user-shortcut ul li:nth-child(6) {
  border-right: none;
  border-bottom: none;
}
/* screen end */
/* content start */
.content {
  height: 73px;
  background-color: #f2f2f2;
  padding-top: 10px;
  border-bottom: 1px solid #e7e7e7;
}
.content .container {
  height: 48px;
  background-color: #f90;
}
/* content end */
/* footer start */
.footer {
  height: 270px;
  background-color: #f5f5f5;
}
.footer .footer-promise {
  width: 100%;
}
.footer .footer-promise dl {
  margin-top: 15px;
  float: left;
  width: 20%;
}
.footer .footer-promise dl dt {
  float: left;
  margin-right: 8px;
  margin-top: 5px;
}
.footer .footer-promise dl dd {
  float: left;
}
.footer .footer-promise dl dd p {
  margin-top: 7px;
}
.footer .footer-items dl {
  float: left;
  width: 200px;
}
.footer .footer-items dl dt {
  height: 40px;
  font: 600 14px/40px "microsoft yahei";
  color: #545454;
}
.footer .footer-items dl dd {
  height: 20px;
}
.footer .footer-items .app-down {
  float: left;
  width: 90px;
  height: 180px;
}
.footer .footer-items .app-down p {
  height: 40px;
  font: 600 14px/40px "microsoft yahei";
  color: #545454;
}
/* footer end */
/* link start */
.link {
  margin-top: 30px;
  text-align: center;
}
.link p {
  margin-top: 5px;
}
.link p a {
  margin: 0 8px;
}
/* link end */
/* copyright start */
.copyright {
  margin-top: 20px;
  text-align: center;
  line-height: 2;
}
.copyright-bottom-img {
  margin-top: 20px;
  text-align: center;
}
.copyright-bottom-img a {
  margin-left: 18px;
}
/* copyright end */
  • base.css
@charset "UTF-8";

@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff2') format('woff2'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*初始化*/
/* html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, a, img, button {
    margin: 0;
    padding: 0;
} */
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

form,
fieldset,
legend,
input {
    border: none;
    outline: none;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #F60;
}

body,
button,
input,
select,
textarea {
    /*
       font-size: 12px;
       line-height: 150%;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       */
    font: 12px/1.5 "Microsoft Yahei", tahoma, arial, "Hiragino Sans GB";
}

/* 清除浮动 */
.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

/*隐藏*/
.hide {
    display: none;
}

.f60 {
    color: #FF6600;
}

/*版心*/
.container {
    width: 1190px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

s,
i,
em {
    font-style: normal;
    text-decoration: none;
}

.active {
    color: #F60;
}

效果：在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44757417/article/details/106928864
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022