Front-end learning (428): 35 pages Production Jingdong small red practice

Language 2020-01-16 13:19:01 views: null 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东JD.COM官网 多快好省 只为品质生活</title>
    <!-- 引入京东小图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 重置样式 -->
    <link rel="stylesheet" href="./jingdongcss/normalize.css">
    <!-- 头部和尾部基本相同 公共样式 -->
    <link rel="stylesheet" href="./jingdongcss/base.css">
    <link rel="stylesheet" href="./jingdongfont/ie7.css">
    <link rel="stylesheet" href="./jingdongcss/index.css">
    <meta name="description" content="京东JD.COM-专业综合网上购物商城，销售超数万品牌，4020万种商品，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、旅游等13大品类。京东PLUS会员，免费体验30天！京东秉承客户为先， 100％正品行货保障，提供全国联保，机打发票，专业配送，售后服务！"/>
    <meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，相机，数码，手表，存储卡，京东"/>
</head>
<body>
    <!-- 头部开始 -->
    <header>
        <div class="w">
            <a href="">
                <img src="./jingdongimg/header.jpg" alt="">
            </a>
        </div>
    </header>
    <!-- 头部结束 -->
    <!-- 快速导航栏 -->
    <div class="shortcut">
        <div class="w">
            <ul class="fl city">
                <li><i class="f10"></i><a href="#">北京</a></li>
            </ul>
            <ul class="fr">
                <li>
                    <a href="#">你好，请登录</a>
                    <a href="#" class="f10">免费注册</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">我的订单</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">我的京东</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">京东会员</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">企业采购</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">客户服务</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">网站导航</a>
                    <i></i>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#" class="moblie">手机京东
                        <img src="./jingdongimg/mobile.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 快速导航栏结束 -->
    <!-- 中间部分 -->
    <div class="w middle">
        <div class="logo">
            <!-- 提高权重，提高搜索引擎优化 -->
            <h1>
                <a href="#"></a>
            </h1>
        </div>
        <!-- 搜索框 -->
        <div class="form">
            <input type="text" placeholder="扫描仪">
            <!-- 按钮的意思，双标签 -->
            <button><i></i></button>
        </div>
        <!-- 购物车 -->
        <div class="shopCar">
            <i></i>
            <a href="#" class="f10">我的购物车</a><span>0</span>
        </div>
        <!-- 关键字 -->
        <div class="hotwords">
            <a href="#" class="f10">199减100</a>
            <a href="#">鼠标试用</a>
            <a href="#">农资7折</a>
            <a href="#">低至29元</a>
            <a href="#">抽奖赢空调</a>
            <a href="#">记忆棉</a>
            <a href="#">坐垫</a>
            <a href="#">1分钱买油</a>
            <a href="#">智能手表</a>
        </div>
        <!-- 小导航部分 -->
        <div class="navitems">
            <ul>
                <li>
                    <a href="#">秒杀</a>
                </li>
                <li>
                    <a href="#">优惠券</a>
                </li>
                <li>
                    <a href="#">闪购</a>
                </li>
                <li>
                    <a href="#">拍卖</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">京东超市</a>
                </li>
                <li>
                    <a href="#">生鲜</a>
                </li>
                <li>
                    <a href="#">全球购</a>
                </li>
                <li class="space"></li>
                <li>
                    <a href="#">京东金融</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 中间部分结束 -->
    <!-- 中间部分 开始 -->
    <div class="w grid">
        <div class="grid-coll1 fl">
            <ul>
                <li><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>/<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>/<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>/<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>/<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>/<a href="#">众筹</a>/<a href="#">白条</a>/<a href="#">保险</a></li>
            </ul>
        </div>
        <div class="grid-coll2 fl">
            <div class="coll2-t">
                <a href="#"><img src="./jingdongimg/banner.jpg" height="340" width="790" alt=""></a>
                <a href="#" class="arrow-l"><</a>
                <a href="#" class="arrow-r">></a>
                <ul class="circle">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="coll2-b">
                <div>
                <img src="./jingdongimg/l.jpg" height="130" width="390" alt="">
                </div>
                <div>
                <img src="./jingdongimg/r.jpg" height="130" width="390" alt="">
            </div>
            </div>
        </div>
        <div class="grid-coll3 fr">
            <div class="login">
                <div class="login-t">
                    Hi,欢迎来到京东<br>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#" class="user-info">
                        <img src="./jingdongimg/no_login.jpg" alt="">
                    </a>
                </div>
                <div class="login-b">
                    <a href="#">新人福利</a>
                    <a href="#">plus会员</a>
                </div>
            </div>
            <div class="news">
                <div class="news-t">
                    <a href="#" class="cuxiao">促销</a>
                    <a href="#" class="gg">公告</a>
                    <a href="#" class="more">更多</a>
                    <div></div>
                </div>
                <div class="news b">

                </div>
            </div>
            <div class="expand"></div>
        </div>
    </div>
    <!-- 中间部分 结束 -->
    <!-- 页面底部部分 -->
    <footer>
        <div class="service">
            <div class="w">
                <ul>
                    <li>
                        <h5>多</h5>
                        <p>品类齐全，轻松购物</p>
                    </li>
                    <li>
                        <h5>多</h5>
                        <p>品类齐全，轻松购物</p>
                    </li>
                    <li>
                        <h5>多</h5>
                        <p>品类齐全，轻松购物</p>
                    </li>
                    <li>
                        <h5>多</h5>
                        <p>品类齐全，轻松购物</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 帮助模块 -->
        <div class="w help">
            <div class="fl">
                <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>
                        <dd><a href="#">购物流程</a></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>
                        <dd><a href="#">购物流程</a></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>
                        <dd><a href="#">购物流程</a></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>
                        <dd><a href="#">购物流程</a></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>
                        <dd><a href="#">购物流程</a></dd>    
                </dl>
            </div>
            <div class="fr coverage">
                <h5>京东自营点歌谣小区</h5>
                <p>京东开始向9999个社区进行自配营业服务,支持货到付款，各种方式支付和远程协助服务</p>
                <a href="#">查看详情</a>
            </div>
        </div>
        <!-- 版权部分 -->
        <div class="w copyright">
            <p><a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            <a href="#">关于我们</a>
            <span> | </span>
            </p>
            <div>
                <p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号</p>
                <p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p>
                <p>Copyright © 2004 - 2017  京东JD.com 版权所有|消费者维权热线：4006067733经营证照
                京东旗下网站：京东支付|京东云</p>
            </div>
            <p class="font-icon">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </p>
        </div>
    </footer>
    <!-- 页面底部部分 -->
</body>
</html>

 

index.css

/* 中间模块 */
.grid{height: 480px;}
/* 给反斜杠变颜色 */
.grid-coll1{width: 190px;height: 100%;background-color:#6e6568;color: #fff;font-size: 14px;}
.grid-coll1 ul{padding: 10px 0;}
.grid-coll1 ul li{padding-left: 14px;height: 29px;line-height: 26px;}
.grid-coll1 ul li:hover{background-color: #9c9698;}
/* 给链接文字的 */
.grid-coll1 a{color: #fff;font-size: 16px;margin-right: 3px;}
.grid-coll1 a:hover{color: #f10215;}

.grid-coll2{width: 790px;height: 100%;margin-left:10px;}
.grid-coll3{width: 190px;height: 100%;}

/* banner部分 */
.coll2-b div{float: left;margin-top: 10px;}
.coll2-b div:last-child{float: right;}

/* 箭头部分 */
.coll2-t{position: relative;} 
.arrow-l,.arrow-r{position: absolute;top: 50%;width: 30px;height: 60px;background-color:rgba(0, 0, 0, 0.3);
transform: translateY(-50%);text-align: center;line-height: 60px;font-size: 20px;color:rgba(255, 255, 255, 0.6);font-family: Arial, Helvetica, sans-serif;font-weight: normal;
}
.arrow-l{left: 0;}
.arrow-r{right: 0;}

.circle{width: 165px;height: 20px;background:rgba(255, 255, 255, 0.3) ;position: absolute;
left: 50%;transform: translateX(-50%);bottom: 20px;border-radius: 10px;padding-left: 10px;}
.circle li{width: 12px;height: 12px;background: #fff;border-radius: 50%;float: left;margin: 4px;}
.circle .current{background-color: #f10125;cursor: pointer;}

/* 右边模块 */
.login{height: 85px;border-bottom: 1px solid #ccc;padding: 15px;}
/* 强制展示 */
.login-t{width: 95px;height: 60px;line-height: 20px; font-size: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
    /* 文字挤过来 */
color: #666;padding-left: 60px;position: relative;}
.login-t a{color: #666;}
.login-t a:hover{color: #f10125;}
.user-info{width: 50px;height: 50px;position: absolute;left: 0;top: 0;background: url(../jingdongimg/[email protected]) no-repeat -70px 0;}
.user-info img{width: 40px;margin: 5px;border-radius: 50%;}
.login-b a{display: inline-block;width: 70px;height: 20px;border: 2px solid #f10125;margin-right: 3px;text-align: center;line-height: 20px;color: #f10125;}
.login-b a:hover{background-color: #f10125;color: #fff;}

.news{height: 154px;border-bottom: 1px solid #ccc;padding: 7px 13px 0;box-sizing: border-box;}
.news-t{height: 19px;border-bottom: 1px solid #ccc;position: relative;}
.news-t a{float: left;height: 17px;line-height: 17px;}
.news-t .cuxiao{width: 38px;border-right: 1px solid #ccc;}
.gg{margin-left: 15px;}
.news-t .more{float: right;}
.news-t div{width: 28px;height: 2px;background-color: #f10125;position: absolute;left: 0;bottom: -1px;}

.expand{height: 209px;border-bottom: 1px solid #ccc;background-color: purple;}

normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/*
http://necolas.github.io/normalize.css/
*/
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
    font-family: sans-serif; /* 1 */
    line-height: 1.15; /* 2 */
    -ms-text-size-adjust: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
    margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
    display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
    margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
    outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
    font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
    background-color: #ff0;
    color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
    display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
    display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
    display: none;
}

base.css

.img{
    /* display: block; 解决中间有空隙的问题 */
    vertical-align: top;
}
.w{
    /* 版心的公共类 版心 */
    width: 1190px;
    margin: 0 auto;
}
ul{list-style: none;}
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin: 0;padding: 0;}
input,button{border: 0;
/* 取消轮廓边框 */
outline: none;}
a{text-decoration: none;color: #999;font-size: 12px;}
a:hover{color: #c81623;}
.f10{color: #f10215!important;}
/* header部分 */
header{
    height: 80px;
    background-color:#020000;
}
/* 声名字体 */
@font-face {
    font-family: 'icomoon';
    src:  url('../jingdongfont/icomoon.eot?1x1j55');
    src:  url('../jingdongfont/icomoon.eot?1x1j55#iefix') format('embedded-opentype'),
      url('../jingdongfont/icomoon.ttf?1x1j55') format('truetype'),
      url('../jingdongfont/icomoon.woff?1x1j55') format('woff'),
      url('../jingdongfont/icomoon.svg?1x1j55#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }
/* 浮动的公共类 */
.fl{float: left;}
.fr{float: right;}

/* 快速导航栏 */
.shortcut{background-color: #e3e4e5;height: 30px;border-bottom: 1px solid #ddd;font-size: 12px;line-height: 30px;color: #999;}

.city{margin-left: 200px;}

.shortcut li{float: left;}

.shortcut i{font-family: 'icomoon';font-style: normal;color: #ccc;}
/* 小竖线的做法 */
.space{width: 1px;height: 10px;background-color: #ccc;
/* 上10 左右12 下0 */
margin: 10px 12px 0;}
.moblie{position: relative;}
.moblie img{position: absolute;left: -10px;top: 24px;border: 1px solid #ccc;padding: 3px;}
/* 快速导航栏 */

/* 中间部分 */
.middle{height: 140px;position: relative;}
.logo{position: absolute;top: -30px;left: 0;box-shadow: 0px -10px 5px rgba(0,0,0,.3);}
.logo a{display: block;background: url(../jingdongimg/logo.png) no-repeat #fff;width: 190px;height: 170px;}
/* 搜索框 */
.form{width: 550px;height: 35px;position: absolute;top: 25px;left: 320px;float: left;}
.form input{width: 495px;height:33px;border:1px solid #f10125;font-size: 14px;padding-left: 3px;}
.form button{width: 50px;height: 35px;background-color: #f10125;float: right;}
.form button i{font-family: 'icomoon';font-style: normal;color: #fff;}

/* 购物车 */
.shopCar{
    width: 188px;
    height: 33px;
    border: 1px solid #ccc;
    position: absolute;
    top: 25px;
    right: 95px;
    background-color: #fff;
    line-height: 33px;
    text-align: center;
    color: #f10125;
}
.shopCar i{
    font-family: 'icomoon';
    margin-right: 5px;
    font-style: normal;
}
/* 加了绝对定位的行内元素，可以直接加宽高 */
.shopCar span{width: 15px;height: 15px; color: #fff;border-radius: 50%;position: absolute;top: 5px;right: 30px;font-size: 12px;line-height: 15px;background-color:  #f10125;}
/* 关键字部分 */
.hotwords{position: absolute;top: 68px;left: 320px;}

/* 导航栏部分 */
.navitems{width: 770px;height: 40px;position: absolute;
bottom: 0;left: 200px;line-height: 40px;}
.navitems li{float: left;margin-left: 30px;}
.navitems li a{font-size: 16px;font-weight: 700;color: #555;}
.navitems li a:hover{color: #f10215;}
.navitems .space{margin-top: 15px;margin-left: 15px;margin-right: -15px;}
/* 中间部分
<!-- 页面底部部分 */
footer{ margin-top: 35px; height: 500px;background-color: #EAEAEA;
}
footer a{color: #666;}
.service{padding: 30px 0; border-bottom: 1px solid #DEDEDE;height: 43px;overflow: hidden;}
.service ul li{width: 297px;position: relative;line-height: 43px;float: left;}
.service ul h5{position: absolute;top: 0;left: 38px; width: 36px;height: 43px;background: url(../jingdongimg/ico.png) no-repeat;text-indent: -999em;}
.service ul p{font-weight: 700;margin-left: 82px;}
.service li:nth-child(2) h5{background-position: 0 -43px;}
.service li:nth-child(3) h5{background-position: 0 -86px;}
.service li:nth-child(4) h5{background-position: bottom;}

/* <!-- 帮助模块 --> */
.help{height: 200px;border-bottom: 1px solid #DEDEDE;padding-top: 25px;box-sizing: border-box;}
.help dl{width: 192px;float: left;}
.help dt,.coverage h5{height: 30px;color: #666;font-size: 14px;}
.help dd{height: 22px;}
/* 范围 */
.coverage{width: 200px;height: 150px;background: url(../jingdongimg/ico_footer.png) no-repeat;}
.coverage h5{padding-left: 35px;}
.coverage p{font-size: 12px;line-height: 18px;color: #666;width: 180px;}
.coverage a{display: block;margin-top: 5px;width: 180px;text-align: right;}
/* 底部版权 */
.copyright{text-align: center;padding-top: 20px;color: #666;font-size: 12px;}
.copyright a{color: #666;}
.copyright span{margin: 0 10px;}
.copyright div{margin-top: 20px;}
.copyright div p{line-height: 22px;}
/* 行内块 */
.font-icon a{display: inline-block;width: 103px;height: 33px;text-align: center;background: url(../jingdongimg/ico_footer.png) no-repeat 0 -150px;margin:20px 4px 0;}
.font-icon a:nth-child(2){background-position: -103px -150px;}
.font-icon a:nth-child(3){background-position: 0px -183px;}
.font-icon a:nth-child(4){background-position: -103px -183px;}
.font-icon a:nth-child(5){background-position: 0px -216px;}
.font-icon a:nth-child(6){background-position: -103px -216px;}

operation result

Songs do you know?
Released 1597 original articles · won praise 705 · views 40000 +
His message board concerns

Guess you like

Origin blog.csdn.net/weixin_43392489/article/details/103995786
Recommended
Ranking
PAT Level B 1094 Google's Recruitment (20 points) Python
Old Wei wins the offer to take you to learn --- brush (integer number 31. 1 appears) title series
Bilibili: Barrage Screening: Baijiaxing: Import XML directly
개체 배열 중복 제거
matplotlib—patches.Circle
[Observation] It is also a cordless vacuum cleaner, why does Dyson V10 dare to sell 4990 yuan?
0410
Apache Kafka message delivery reliability analysis
How hotel occupancy records inquiry etj
Essential knowledge for getting started with speculating in spot silver
Daily
More
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

Code World

© 2018 codetd.com