index.css(中间主要部分)
/*广告*/ .ad { height: 480px; background: url(../images/bg.png) no-repeat top center; position: absolute; /* 行内块转换 */ top: 0; left: 0; width: 100%; /* 强制显示宽度 */ } .ad a { /*display: block;*/ height: 100%; } /*广告结束*/ /* 主界面开始*/ .jd { /*background-color: pink;*/ position: relative; } .jd-inner { height: 480px; /*background-color: skyblue;*/ /*为了不被盖住*/ z-index: 999; /* 只有定位的盒子才有 z-index */ position: relative; } .jd-clo1 { width: 190px; height: 465px; background-color: #6E6568; float: left; padding-top: 15px; } .jd-clo1 li { padding-left: 10px; height: 28px; line-height: 28px; } .jd-clo1 li:hover { background-color: #999395; } .jd-clo1 li a { color: #fff; font-size: 14px; } .jd-clo1 li span { color: #fff; font-size: 12px; } .jd-clo2 { width: 790px; height: 480px; float: left; margin-left: 10px; /*background-color: yellow;*/ } .jd-clo2-hd { height: 340px; margin-bottom: 10px; position: relative; } .jd-clo2-bd div { width: 390px; height: 130px; float: left; } .jd-clo2-bd div img { width: 100%; } .firstPic { margin-right: 10px; } .arr-l, .arr-r { position: absolute; top: 50%; margin-top: -30px; width: 30px; height: 60px; background:rgba(0,0,0,.3); font-family: "icomoon"; color: #fff; text-align:center; line-height: 60px; font-size: 25px; } .arr-l { left: 0; } .arr-r { right: 0; } .jd-clo2-hd ol { position: absolute; bottom: 20px; left: 50%; margin-left: -90px; width: 180px; height: 20px; background: rgba(255,255,255,0.3); border-radius: 10px; } .jd-clo2-hd ol li { width: 12px; height: 12px; background-color: #fff; border-radius: 50%; float: left; margin: 4px 5px; cursor: pointer; } .jd-clo2-hd .current { background-color: #f10215; } .jd-clo3 { width: 190px; height: 480px; float: right; } .jd-clo3 a { font-size: 12px; color: #747474; } .user { height: 95px; padding: 20px 15px 0; } .user-info { height: 40px; padding-left: 54px; font-size: 12px; color: #747474; line-height: 22px; position: relative; } .user-info a { font-size: 12px; color: #747474; } .user-info a:hover { color: #f10215; } .info-img { width: 40px; height: 40px; position: absolute; top: 0; left: 0; border-radius: 50%; overflow: hidden; } .info-img img { width: 100%; /*自动跟随宽度一起缩放*/ height: auto; } .user-profit { margin-top: 14px; } .user-profit a { float: left; width: 70px; height: 20px; border: 2px solid #f10215; display: inline-block; font-size: 12px; color: #f10215; text-align: center; line-height: 20px; margin-right: 4px; } .user-profit a:hover { background-color: #f10215; color: #fff; } .news { height: 149px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 5px 15px 0; } .tab-hd { border-bottom: 1px solid #CCC; padding: 3px 0; position: relative; } .tab-hd a { margin: 0 4px; } .cuxiao { border-right: 1px solid #ccc; padding-right: 10px; } .news .more1 { position: absolute; top: 6px; right: 0; } .line { width: 28px; height: 2px; background-color: #f10215; position: absolute; bottom: -1px; left: 0; } .tab-bd { margin-top: 10px; } .tab-bd li { height: 23px; line-height: 23px; } .jd-service ul { width: 195px; } .jd-service li { width: 47px; height: 69px; /* background-color: purple; */ float: left; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .jd-service li a { width: 100%; height: 100%; /* 根据父亲 */ /* height: auto; 针对于自己的高度和宽度 */ display: block; } .jd-service i { display: block; width: 24px; height: 24px; margin: 15px auto 8px; background: url(../images/sprite_fs@1x.png) no-repeat; } .jd-service p { text-align: center; }
base.css(头部,尾部)
/*版心主要通用*/ .w { width: 1190px; margin: auto; } .fr { float: right; } .fl { float: left; } .style-red { color: #f10215!important; } li { list-style: none; } ul { margin: 0; padding: 0; } input, button { padding: 0; margin: 0; } a { text-decoration: none; } img { vertical-align: top; } .clearfix:before,.clearfix:after { content:""; display: table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */ } .clearfix:after { clear:both; } .clearfix { *zoom:1; } @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?axvffw'); src: url('../fonts/icomoon.eot?axvffw#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?axvffw') format('truetype'), url('../fonts/icomoon.woff?axvffw') format('woff'), url('../fonts/icomoon.svg?axvffw#icomoon') format('svg'); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; } body { background-color: #F6F6F6; } /*京东顶部*/ .J_event { background-color: #000; } .J_event a { display: block; height: 88px; background: url(../images/top.jpg) no-repeat; position: relative; } .J_event a i { width: 20px; height: 20px; font-family: "icomoon"; position:absolute; right: 0; top: 6px; font-style: normal; text-align:center; line-height: 20px; color: #fff; background: rgba(0,0,0, .3); } .J_event a i:hover { color: #F10215; } /*京东导航栏*/ .shortcut { height: 30px; line-height: 30px; background-color: #E3E4E5; border-bottom: 1px solid #DDDDDD; color:#9D9D9D; font-size: 12px; } .shortcut a { color: #9D9D9D; font-size: 12px; text-decoration: none; } .shortcut a:hover { color: #c81623; } .pos { font-family: "icomoon"; font-style: normal; font-size: 14px; color: #f10215; } .shortcut .fl li { margin-left: 200px; height: 30px; overflow: hidden; } .shortcut .fr li { float: left; } .spacer { width: 1px; height: 10px; background-color: #CCC; margin: 10px 10px 0; } .dropdown { padding-right: 15px; /*子绝父相*/ position: relative; } .dropdown i{ font-family: "icomoon"; font-style: normal; font-size: 16px; position: absolute; /*这俩是测出来的*/ right: -2px; top: -2px; } .erweima { width: 60px; height: 60px; border: 1px solid #ccc; padding: 3px; position: absolute; top: 35px; left: -8px; } /* header 部分 start */ .header { height: 140px; } .inner { height: 140px; /*background-color: pink;*/ position: relative; } /* logo模块 */ .logo { width: 190px; height: 170px; position: absolute; top: -30px; left: 0; background-color: red; box-shadow: 0 -12px 10px rgba(0,0,0,.3); } .logo h1 { margin: 0px; } .logo a { display: block; width: 190px; height: 170px; background:url(../images/logo.jpg) no-repeat; text-indent: -9999999px; } /* 搜索模块 */ .search { width: 550px; height: 35px; position: absolute; top: 25px; left: 320px; } .search input{ width: 493px; height: 33px; border: 1px solid #F10215; padding-left: 5px; outline: none; color: #989898; float: left; } .search button { width: 50px; height: 35px; background-color: #F10215; float: left; cursor: pointer; /* 鼠标变成小手 */ outline: none; } .search i { font-family: "icomoon"; color: #fff; font-style: normal; font-size: 16px; } .search em { position: absolute; top: 10px; right: 65px; width: 19px; height: 15px; cursor: pointer; background: url(../images/sprite-search.png) no-repeat; } .search em:hover { background-position: -30px 0; } /* 热点模块 */ .hotwords { position: absolute; top: 70px; left: 320px; } .hotwords a { color: #9E9B99; font-size: 12px; } .hotwords a:hover { color: #f10215; } /* 购物车模块 */ .myCar { width: 188px; height: 33px; border: 1px solid #ccc; position: absolute; top: 25px; right: 100px; text-align: center; line-height: 33px; } .myCar a { font-size: 12px; color: #f10215; } .myCar i { font-family: "icomoon"; font-style: normal; color: #f10215; margin-right: 3px; } .myCar s { position: absolute; top: 5px; left: 140px; text-decoration: none; background-color: #f10215; height: 16px; line-height: 16px; font-size: 12px; padding: 0 3px; border-radius: 5px; color: #fff; } /*电脑模块*/ .computer { position: absolute; right: 0; bottom: 10px; } /* 导航栏信息模块 */ .navitems { position: absolute; left: 200px; bottom: 0; } .navitems ul { float: left; } .navitems ul li { float: left; margin-left: 30px; } .navitems li a { font-size: 16px; color: #555A5F; font-weight: 700; height: 40px; line-height: 40px; display: block; } .navitems li a:hover { color: #f10215; } .navitems .spacer { float: left; margin-top: 15px; margin-left: 20px; margin-right: -10px; } /* footer 开始 */ .footer { height: 560px; background-color: #EAEAEA; } .footer-service { border-bottom: 1px solid #DEDEDE; } .footer-service-inner { padding: 30px 0; } .footer-service-inner li { float: left; width: 297px; height: 42px; } .service_unit { width: 225px; height: 42px; margin: 0 auto; position: relative; } .service_unit h5 { width: 36px; height: 42px; position: absolute; top: 0; left: 0; background: url(../images/ico_service.png) no-repeat; text-indent: -999px; overflow: hidden; } .service_unit p { line-height: 42px; margin-left: 45px; font-size: 18px; font-weight: 700; } .service_unit .kuai { background-position: 0 -44px; } .service_unit .hao { background-position: 0 -86px; } .service_unit .sheng { background-position: 0 -128px; } .help { height: 180px; padding-top: 20px; } .help dl { float: left; width: 195px; } .help dt { font-size: 14px; font-weight: 700; color: #666; height: 30px; } .help dd { height: 22px; } .help dd a{ color: #727272; font-size: 12px; } .help dd a:hover { color: #f10215; } .help .cover { float: right; width: 207px; height: 150px; background: url(../images/ico_footer.png) no-repeat; } .cover dt { text-align: center; } .help .info { width: 175px; height: 50px; font-size: 12px; margin-top: 5px; margin-left: 10px; line-height: 18px; color: #727272; } .more { text-align: right; padding-right: 10px; } /* 版权模块 */ .copyright { border-top: 1px solid #ccc; padding-top: 15px; } .links { text-align: center; } .links a { color: #727272; font-size: 12px; } .links span { font-size: 12px; color: #D4CDCD; margin: 0 6px; } .c-info { font-size: 12px; color: #9E9E9B; text-align: center; line-height: 20px; margin-top: 10px; } .tupian { text-align: center; margin-top: 10px; } .tupian a{ width: 103px; height: 32px; display: inline-block; background: url(../images/ico_footer.png) no-repeat 0 -151px; } .tupian .kexin { background-position: -104px -151px; }
normal.css
html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* 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 */ } /** * 1. Remove the bottom border in Chrome 57- and 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; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 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; }
图片资源