【Web】CSS（No.33）Css页面布局经典案例（三）《京东首页》
2024-06-03 05:31:48
需要素材点击图片联系我或私信、评论
效果图：
html源码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><!-- 项目描述 --><meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"><!-- 项目关键词 --><meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /><!-- 引入网站小图标 --><link rel="shortcut icon" href="favicon.ico"><!-- 引入css库 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入公共css文件 --><link rel="stylesheet" href="css/base.css"><!-- css页面的样式 --><link rel="stylesheet" href="css/index.css"></head><body><!-- 头部模块 --><div class="header"><div class="w"><a href="#"><img src="img/header.jpg" alt=""></a></div></div><!-- 导航模块 --><div class="nav"><div class="nav_item01"><div class="w"><a class="address" href="#">北京</a><ul class="nav_list right_f"><li><a href="">您好，请登录</a><a class="red" href="">免费注册</a></li><li>|</li><li><a href="">我的订单</a></li><li>|</li><li><a href="">我的京东</a><i></i></li><li>|</li><li><a href="">京东会员</a></li><li>|</li><li><a href="">企业采购</a></li><li>|</li><li><a href="">客户服务</a><i></i></li><li>|</li><li><a href="">网站导航</a><i></i></li><li>|</li><li><a href="">手机京东</a></li></ul></div></div><div class="nav_item02 w"><!-- logo --><div class="logo"><img src="img/logo.png" alt=""></div><!-- 搜索框 --><form class="form"><input type="text" placeholder="移动硬盘"><button><i></i></button></form><!-- 关键词 --><div class="hotwords"><a class="now" href="">199减100</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></div><!-- 子导航 --><ul class="navItems"><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 class="shopCar"><i></i><a href="#">我的购物车</a><span class="zero">0</span></div><!-- 二维码 --><div class="mobile"><img src="img/mobile.png" alt=""></div><!-- 数码盒子 --><div class="super"><img src="img/super.png" alt=""></div></div></div><!-- 轮播图模块 --><div class="banner w"><!-- 边栏广告 --><div class="ad"><img src="img/ad-l.png" alt=""><!-- 悬浮显示的图片 --><img class="display" src="img/ad-r.jpg" alt=""></div><div class="grid01 left_f"><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="grid02 left_f"><!-- 中上轮播 --><div class="ban"><!-- 图片容器 --><div class="img"><img src="img/banner.jpg" alt=""><img src="img/banner.jpg" alt=""><img src="img/banner.jpg" alt=""><img src="img/banner.jpg" alt=""><img src="img/banner.jpg" alt=""><img src="img/banner.jpg" alt=""><img src="img/banner.jpg" alt=""><img src="img/banner.jpg" alt=""></div><!-- 点容器 --><ul><li></li><li></li><li class="now"></li><li></li><li></li><li></li><li></li><li></li></ul><!-- 按钮 --><a class="left" href="#"><</a><a class="right" href="#">></a></div><!-- 中下图片 --><div class="computer left_f"><img src="img/l.jpg" alt=""></div><div class="fresh left_f"><img src="img/r.jpg" alt=""></div></div><div class="grid03 left_f"><!-- 右边上面的盒子 --><div class="grid03_top"><div class="u"><div class="clearFix"><div class="user left_f"><img src="img/no_login.jpg" alt=""></div><div class="right_f"><p>Hi,欢迎来到京东@%#%￥%*%￥￥……%……**（……#%……￥%……￥#%……#%￥……%</p><a href="">登陆</a> <a href="">注册</a></div></div><a href="">新人福利</a><a href="">PLUS会员</a> </div></div><!-- 右边中间的盒子 --><div class="grid03_center"><div class="more"><a href="#">促销</a> | <a href="#">公告</a><a href="#" class="right_f">更多</a></div><div><ul><li><a href="#">挑战30天不洗头</a></li><li><a href="#">挑战30天不洗头</a></li><li><a href="#">挑战30天不洗头</a></li><li><a href="#">挑战30天不洗头</a></li></ul></div></div><!-- 右边下面的盒子 --><div class="grid03_bottom"><div class="charge"><div class="charge1"><div class="aa"><div></div><a href="#">话费</a></div><div class="aa"><div></div><a href="#">话费</a></div><div class="aa"><div></div><a href="#">话费</a></div><div class="bb"><div></div><a href="#">话费</a></div></div><div class="charge2"><div class="aa"><div></div><a href="#">话费</a></div><div class="aa"><div></div><a href="#">话费</a></div><div class="aa"><div></div><a href="#">话费</a></div><div class="bb"><div></div><a href="#">话费</a></div></div><div class="charge3"><div class="aa"><div></div><a href="#">话费</a></div><div class="aa"><div></div><a href="#">话费</a></div><div class="aa"><div></div><a href="#">话费</a></div><div class="bb"><div></div><a href="#">话费</a></div></div></div></div><div class="clearFix"></div></div></div><!-- 尾部模块 --><div class="tail"><!-- 多快好省 --><div class="dkhs"><div class="more"><div class="d"></div><span>品类齐全，轻松购物</span></div><div class="fast"><div class="k"></div><span>品类齐全，轻松购物</span></div><div class="good"><div class="h"></div><span>品类齐全，轻松购物</span></div><div class="save"><div class="s"></div><span>品类齐全，轻松购物</span></div></div><!-- 购物指南 --><div class="map"><div class="map-l"><div class="guide1"><span>购物指南</span><ul><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li></ul></div><div class="guide2"><span>购物指南</span><ul><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li></ul></div><div class="guide3"><span>购物指南</span><ul><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li></ul></div><div class="guide4"><span>购物指南</span><ul><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li></ul></div><div class="guide5"><span>购物指南</span><ul><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li><li>购物流程</li></ul></div></div><div class="map-r"><div class="map-i"><h4>京东自营覆盖区县</h4><span>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</span><a class="left_f" href="#">查看详情 ></a></div></div></div><!-- 关于我们 --><div class="us"><div class="about-us"><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> | <a href="#">关于我们</a> | <a href="#">京东公益</a> | <a href="#">English Site</a> | <a href="#">Media & IR</a></div><p><a href="#">京公网安备11000002000088号</a> | <a href="#">京ICP证070359号</a> | <a href="#">互联网药品信息资格证编号(京)-经营性-2014-0008</a> | <a href="#">新出发京零字第大120007号</a></p><p><a href="#">互联网出版许可证编号新出网证(京)字150号</a> | <a href="#">出版物经营许可证</a> | <a href="#">网络文化经营许可证京网文[2014]2148-348号</a> | <a href="#">违法和不良信息举报电话：4006561155</a></p><p>Copyright © 2004 - 2017 京东JD.com版权所有|消费者维权热线：4006067733经营证照 京东旗下网站：京东支付|京东云</p><div class="partner"><div class="pic1"></div><div class="pic2"></div><div class="pic3"></div><div class="pic4"></div><div class="pic5"></div><div class="pic6"></div></div></div></div></body>
</html>
css源码：
base.css
/* 公共的重置样式 */
* {margin:0;padding:0;box-sizing:border-box;
}li {list-style:none;
}a {text-decoration:none;color:#999999;font-size:12px;
}body {background-color:rgb(246,246,246);
}/* 去除input边框，轮廓线 */.left_f {float:left;
}.right_f {float:right;
}.clearFix::after {content:" ";display:block;height:0;visibility:hidden;clear:both;
}a:hover {color:#f10215 !important;
}/* 版心 */
.w {width:1190px;margin:0 auto;
}/* 声明 */
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?8qhwk5');src: url('../fonts/icomoon.eot?8qhwk5#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?8qhwk5') format('truetype'),url('../fonts/icomoon.woff?8qhwk5') format('woff'),url('../fonts/icomoon.svg?8qhwk5#icomoon') format('svg');font-weight: normal;font-style: normal;
}/* 使用字体图标 */
i {font-family:"icomoon";font-style:normal;
}
index.css
/* 页面样式 *//* 头部模块 */
.header {width: 100%;background-color:#000000;
}.header a {display:block;width:100%;
}.header a img {display:block;height:100%;
}/* 导航模块 */
/* 模块1 */
.nav .nav_item01 {width:100%;height:30px;background-color:rgb(227,228,229);
}.nav .nav_item01 .address {margin-left:195px;display:inline-block;line-height:30px;
}.nav .nav_item01 .address::before {content:""; font-family:"icomoon";color:#f10215;
}.nav .nav_item01 ul li {float:left;margin:0px 6px;line-height:30px;font-size:13px;color:rgb(204,204,204);list-style:none;
}.nav .nav_item01 ul li i {margin-left:3px;font-size:12px;color:rgb(204,204,204);
}.nav .nav_item01 ul .red {color:#f10215;
}/* 模块2 */
.nav_item02 {height:140px;position:relative;
}.nav_item02 .logo {position:absolute;left:0px;top:-30px;background-color:#ffffff;box-shadow:0px -10px 10px rgba(0,0,0,0.3);
}.nav_item02 .form {position:absolute;left:320px;top:25px;
}.nav_item02 .form input {padding-left:3px;width:500px;height:35px;border:1px solid #f10215;
}.nav_item02 .form button {width:56px;height:35px;background-color:#f10215;color:#ffffff;border:none;margin-left:-5px;
}.nav_item02 .hotwords {position:absolute;left:320px;top:65px;
}.nav_item02 .hotwords .now {color:#f10215;
}.nav_item02 .navItems {position:absolute;left:215px;bottom:10px;
}.nav_item02 .navItems li {float:left;margin:0px 15px;list-style:none;
}.nav_item02 .navItems li a {color:#555555;/*font-weight: 700px;*/font-size:16px;
}.nav_item02 .space {color:#cccccc;font-size:12px;line-height:20px;
}.nav_item02 .shopCar {position:absolute;top:25px;right:92px;width:190px;height:32px;border:1px solid #cccccc;line-height:36px;background-color:#ffffff;padding-left:55px;
}.nav_item02 span{width: 18px;height: 14px;font-size:12px;border-radius:10px;background-color: #f10215;color:#ffffff;text-align:center;line-height:14px;position:absolute;top:5px;right:36px;
}.nav_item02 .shopCar i,
.nav_item02 .shopCar a {color:#f10215;
}.nav_item02 .shopCar .zero {width:14px;height:14px;font-color:#ffffff;font-size:8px;background-color:#f10215;border-radius:50%;padding-bottom:3px;box-sizing:border-box;
}.nav_item02 .mobile {width:70px;height:70px;position:absolute;margin-top:5px;left:1130px;background-color:#ffffff;border:1px solid #cccccc;padding:4px 4px;
}.nav_item02 .super {width:190px;height:40px;position:absolute;bottom:10px;left:980px;
}/* 轮播图模块 */
.banner {position:relative;height:480px;
}/* 边栏广告 */
.ad {position:absolute;left:-250px;top:0px;
}.ad img {display:block;
}.ad .display {position:absolute;z-index:11;top:0px;left:250px;display:none;
}.ad:hover .display {display:block;
}/* 左边 */
.banner .grid01 {width: 190px;height: 100%;background-color:rgb(110,101,104);
}.banner .grid01 ul li {line-height:29px;color:#ffffff;padding-left:16px;
}.banner .grid01 ul li a {color:#ffffff;font-size:15px;
}/* 中间 */
.banner .grid02 {margin:0px 10px;width: 790px;height: 100%;/*background-color:#abcdef;*/
}/* 中上轮播 */
.ban {width: 100%;height: 340px;margin: 0px auto;position: relative;
}.ban .img img {position: absolute;top:0;left:0;
}.ban ul {width: 130px;height: 15px; position: absolute;left: 50%;margin-left: -40px;bottom: 20px;background-color: rgba(110,101,104,0.1);border-radius: 10px; }.ban ul li {float:left;list-style: none;width: 10px;height: 10px;border-radius: 50px;background-color: #eeeeee;margin:2px 3px;
}.ban ul li:hover {background-color: darkred;
}.ban ul li.now {background-color:#f10215;
}.ban a {color:#dddddd;text-decoration: none;position: absolute;top: 50%;margin-top:-20px;width: 30px;height: 40px;text-align: center;line-height: 40px;font-size:15px;
}.ban a:hover {color:#f10215;
}.ban a.left {width: 15px;height: 40px;background-color: rgba(110,101,104,0.5);left:0;line-height:40px;
}.ban a.right {width: 15px;height: 40px;background-color: rgba(110,101,104,0.5);right:0;line-height:40px;
}/* 中下图片 */
.computer {width:390px;height:130px;margin-top:10px;margin-right:10px;
}.fresh {width:390px;height:130px;margin-top:10px;}/* 右边 */
/* 右上 */
.banner .grid03 {width: 190px;height: 100%;background-color:#ffffff;
}.grid03 .grid03_top {width:100%;height:117px;padding:10px 20px 10px 10px;border-bottom:1px solid #cccccc;text-align:center;
}.grid03 .grid03_top .u .user {overflow:hidden;padding:5px;width:50px;height:50px;background: url(../img/sprite_userinfo@1x.png) no-repeat -70px 0px;
}.grid03 .grid03_top .u .user img {width: 40px;height: 40px;border-radius:50%;
}.grid03 .grid03_top .u p {font-size:12px;white-space:nowrap;width: 100px;overflow:hidden;text-overflow:ellipsis;margin:9px 0px 4px 0px;
}.grid03 .grid03_top .u>a {margin-top:10px;display:inline-block;width: 70px;height: 20px;border:2px solid #f10215;text-align: center;color:#f10215;line-height:16px;
}/* 右中 */
.grid03 .grid03_center {height:150px;padding:5px 15px 20px;
}.grid03 .grid03_center .more {border-bottom:1px solid #cccccc;line-height:26px;color:#cccccc;font-size:12px;float: left;
}.grid03 .grid03_center ul {margin:15px 0;
}.grid03 .grid03_center li {line-height:20px;}/* 右下 */
.grid03 .grid03_bottom .charge {width:100%;height:213px;position:relative;
}.charge1,
.charge2,
.charge3 {width:100%;height:71px;float:left;border-top:1px solid #cccccc;
}.aa {width:47px;height:100%;border-right:1px solid #cccccc;float:left;
}.bb {width:47px;height:100%;float:left;
}.aa>div,
.bb>div {width:25px;height:35px;/*background-color:#abcdef;*/background:url(../img/sprite_fs@1x.png) no-repeat 0px -85px;margin-top:15px;margin-left:11px;overflow:hidden;
}.aa>a,
.bb>a {position:absolute;margin-left:11px;font-size:12px;
}/* 尾部模块 */
.tail {width:100%;height:500px;background-color:rgb(234,234,234);margin-top:30px;
}.dkhs {width:100%;height:100px;border-bottom:1px solid rgb(222,222,222);
}.more,
.fast,
.good,
.save {width:25%;height:100%;/*text-align:center;*/font-size:18px;float:left;line-height:100px;
}.d,
.k,
.h,
.s {width:36px;height:43px;background:url(../img/ico.png) no-repeat;float:left;margin-top:30px;margin-left:20%;margin-right:5px;
}.d {background-position: 0px 0px;
}.k {background-position: 0px -43px;
}.h {background-position: 0px -86px;
}.s {background-position: 0px -129px;
}.map {width:100%;height:230px;
}.map-l {width:75%;height:100%;float:left;padding-top:20px;padding-bottom:15px;
}.guide1,
.guide2,
.guide3,
.guide4,
.guide5 {width:20%;height:100%;text-align:center;padding:10px 0px;float:left;
}.guide1 ul,
.guide2 ul,
.guide3 ul,
.guide4 ul,
.guide5 ul {margin-top:13px;
}.guide1 ul li,
.guide2 ul li,
.guide3 ul li,
.guide4 ul li,
.guide5 ul li {line-height:25px;font-size:14px;
}.map-r {width:25%;height:100%;text-align:center;float:left;padding-top:40px;
}.map-i {width: auto;height:150px;background:url(../img/ico_footer.png) no-repeat 0px 0px;float:left;
}.map-r span {width:210px;height:50px;text-align:left;display: block;font-size:14px;margin:25px 0px 0px 10px;
}.map-r a {margin-left:150px;
}.us {width:90%;height:170px;border-top:1px solid rgb(222,222,222);margin:0px auto;text-align:center;
}.about-us {width:100%;height:50px;line-height:50px;font-size:12px;color:#999999;
}.us p {font-size:12px;color:#999999;line-height:19px;
}.partner {width:100%;height:63px;padding:15px 280px;
}.pic1,
.pic2,
.pic3,
.pic4,
.pic5,
.pic6 {width:103px;height:30px;float:left;background:url(../img/ico_footer.png) no-repeat;
}.pic1 {background-position: 0px -150px;
}.pic2 {background-position: -103px -150px;
}.pic3 {background-position: 0px -183px;
}.pic4 {background-position: -103px -183px;
}.pic5 {background-position: 0px -216px;
}.pic6 {background-position: -103px -216px;
}.pic1 {background-position: 0px -150px;
}
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;
}
【Web】CSS（No.33）Css页面布局经典案例（三）《京东首页》相关推荐
- 【Web】CSS（No.32）Css页面布局经典案例（二）《云道商城首页》
需要素材点击图片联系我或私信.评论 效果图 html源码: <!DOCTYPE html> <html lang="en"> <head>< ...
- 【Web】CSS（No.34）Css页面布局经典案例（四）《米柚官网》
需要素材点击图片联系我或私信.评论 效果图: html源码: <!DOCTYPE html> <html lang="en"><head>< ...
- 应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
- css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
- CSS+DIV进行的页面布局
CSS+DIV进行的页面布局 第一部分.布局概述 1.网页布局 2.页面元素定位机制 第二部分.布局常用属性 1.浮动属性(float) 2.清除浮动(clear) 3.定位属性(position) ...
- 了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...
- 影响页面布局的css属性,6 和页面布局有关的CSS属性（三）
6 和页面布局有关的CSS属性(三) 03.png 04.png 05.png #box { /* 声明ID选择器,名称为box */ position:absolute; /* 设置层的定位为绝对定 ...
- 初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局 浮动流 制作导航栏 如何页面布局 定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
- CSS盒子模型与页面布局
202209 week1 day5~day6 前端学习 1 盒子模型 1.1 盒子模型结构 1.1.1 内容 1.1.2 边界(margin) 1.1.3填充(padding) 1.1.4 边框(bo ...
- web前端（12）—— 页面布局2
本篇博文,主要就讲定位的问题,也就是页面布局里最重要的,本篇博文不出意外的话,也是css的最后一篇博文了 定位,position属性 定位有三种: 相对定位 绝对定位 固定定位 相对定位,positi ...
最新文章
- Beaker：一个基于Electron的点对点Web浏览器
- 排序和顺序统计学(2)——快速排序
- Angular.js中使用$watch监听模型变化
- web前端开发论文写作_外语论文文献引言格式—MLA Style
- 力扣203，移除链表元素（JavaScript）
- import package怎么用
- 不登录复制 CSDN代码
- 大数据项目开发进度（实时更新）
- 迅为4412开发板上的步进电机小知识
- 【亲测有效】硬盘/分区修复教程
- c语言case语句比较大小,[求助]用switch语句编写比较数值大小程序
- 解决IPOD NANO7无法开机
- matlab神经网络应用设计 张德丰,MATLAB神经网络应用设计
- CSS手机端的主界面
- 大连理工计算机科学与技术,学院概况-大连理工大学计算机科学与技术学院
- 小岳岳吐槽房子隔音差：买房小心隔墙有耳
- Html5网页小游戏
- 随机事件及其概率（一）：
- python解析pdf文件_抽img_text（pymupdf）
- Ubuntu设置IP地址、网关、DNS