【前端学习分享】HTML+CSS京东商城静态页⾯
注意事项
⼀、CSS的定位问题position
static 没有定位，遵循正常的⽂档流对象。
以下使⽤较多
fixed 相对于浏览器窗⼝是固定的，窗⼝的他不会移动（⽐如说百度弹出来的登录窗⼝，不会移动）
relative相对定位元素的定位是相对其正常位置，相对定位元素经常被⽤来作为绝对定位元素的容器块。
absolute绝对定位的元素的位置相对于最近的已定位⽗元素，如果元素没有已定位的⽗元素，那么它的位置相对于<html>
⼆、CSS标签起名问题
不要⽤拼⾳.可以右键检查⽹址看看别⼈的⽹站是怎么起名字的。
头：header 内容：content/container尾：footer导航：nav 侧栏：sidebar栏⽬：column页⾯外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo⼴告：banner页⾯主体：main
三、iconfont
字体图标⼩，不会失真，不会占⽤http请求··· 可以选择然后直接下载
预览图
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="jd.ico">
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- 快捷导航栏 -->
<div class="shortcut">
<div class="w">
<div class="fl">
<a href="#" class="loc-icon">
河北
</a>
</div>
<div class="fr">
<ul>
<li>你好，请登录 <a href="#" >免费注册</a></li>
<li></li>
<li><a>我的订单</a></li>
<li></li>
<li class="arrow-icon"><a>我的京东</a></li>
<li></li>
<li><a>京东会员</a></li>
<li></li>
<li class="arrow-icon"><a>企业采购</a></li>
<li></li>
<li class="arrow-icon"><a>客户服务</a></li>
<li></li>
<li class="arrow-icon"><a>⽹站导航</a></li>
<li></li>
<li><a>⼿机京东</a></li>
</ul>
</div>
</div>
</div>
<!-- header 模块 -->
<div >
<div class="header w">
<div class="logo">
<h1>
<a href="index.html" title="京东">j</a>
</h1>
</div>
<div class="search">
<input type="search" name="" id="" placeholder="螺蛳粉">                <span><span class="vic-btn"> </span></span>
<button class="btn"><i class="btn-icon"> </i></button>
</div>
<div class="hotword">
<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="#">每100-50</a>
</div>
<div class="shopcar">
<p>我的购物车</p>
</div>
<div class="nav1">
<a href="#" >秒杀</a>
<a href="#" >优惠券</a>
<a href="#">PLUS会员</a>
<a href="#">品牌闪购</a>
<a href="#">拍卖</a>
<a href="#">京东家电</a>
<a href="#">京东超市</a>
<a href="#">京东⽣鲜</a>
<a href="#">京东国际</a>
<a href="#">京东⾦融</a>
</div>
<div class="avtm">
</div>
</div>
</div>
<!-- 导航栏模块 -->
<div class="nav w">
<div class="sidebar">
<ul>
<li><a>家⽤电器</a></li>
<li><a>⼿机 / 运营商 / 数码</a></li>
<li><a>电脑 / 办公</a></li>
<li><a>家居 / 家具 / 家装 / 厨具</a></li>
<li><a>男装 / ⼥装 / 童装 / 内⾐</a></li>
<li><a>美妆 / 个护清洁 / 宠物</a></li>
<li><a>⼥鞋 / 箱包 / 钟表 / 珠宝</a></li>
<li><a>男鞋 / 运动 / 户外</a></li>
<li><a>房产 / 汽车 / 汽车⽤品</a></li>
<li><a>母婴 / 玩具乐器</a></li>
<li><a>⾷品 / 酒类 / ⽣鲜 / 特产</a></li>
<li><a>艺术 / 礼品鲜花 / 农资绿植</a></li>
<li><a>医药保健 / 计⽣情趣</a></li>
<li><a>图书 / ⽂娱 / 教育 / 电⼦书</a></li>
<li><a>机票 / 酒店 / 旅游 / ⽣活</a></li>
<li><a>理财 / 众筹 / ⽩条 / 保险</a></li>
<li><a>安装 / 维修 / 清洗 / ⼆⼿</a></li>
<li><a>⼯业品</a></li>
</ul>
</div>
<div class="banner">
<div class="l-banner">
<img src="upload/banner1.jpg" alt="">
</div>
<div class="s-banner">
<div>
<img src="upload/banner2.jpg" alt="">
</div>
<div class="ss-banner">
<img src="upload/banner3.jpg" alt="">
</div>
<div>
<img src="upload/banner4.jpg" alt="">
</div>
</div>
</div>
<div class="column">
<div class="logbar">
<div>
<div class="login">
<div class="log-img">
<img src="imges/log.png" alt="">
</div>
<div class="log-text">
<a href="#">Hi~欢迎逛京东！
<br> 登录/注册</a>
</div>
</div>
<div class="log-btn">
<button class="log-btn1">新⼈福利</button>
<button class="log-btn2">PLUS会员</button>
</div>
</div>
</div>
<div class="news">
<div class="news-tit">
<h5>京东快报</h5><a href="#">更多</a>
</div>
<div>
<ul>
<li><span class="newsword">热议</span><a href="#"> 20款防护⼝罩⼤横评！预防病毒流感外出神兵
利器推荐</a></li>                        <li><span class="newsword">推荐</span><a href="#">iPhone 12正式确认！⽀持5G，七千档起步！</a></li>
<li><span class="newsword">最新</span><a href="#">医⽤外科⼝罩不等于⼀次性医⽤⼝罩</a></li>
<li><span class="newsword">热评</span><a href="#">正确戴⼝罩的⽅式，你还在浪费⼝罩吗</a></li>
</ul>
</div>
</div>
<div class="menu">
<ul>
<li><img src="imges/phone.png" alt=""><span>话费</span></li>
<li><img src="imges/plane.png" alt=""><span>机票</span></li>
<li><img src="imges/hotel.png" alt=""><span>酒店</span></li>
<li><img src="imges/game.png" alt=""><span>游戏</span></li>
<li><img src="imges/gas.png" alt=""><span>加油卡</span></li>
<li><img src="imges/train.png" alt=""><span>⽕车票</span></li>
<li><img src="imges/raise.png" alt=""><span>众筹</span></li>
<li><img src="imges/money.png" alt=""><span>理财</span></li>
<li><img src="imges/jdbt.png" alt=""><span>⽩条</span></li>
<li><img src="imges/movie.png" alt=""><span>电影票</span></li>
<li><img src="imges/company.png" alt=""><span>企业购</span></li>
<li><img src="imges/gift.png" alt=""><span>礼品卡</span></li>
</ul>
</div>
</div>
</div>
<!-- 京东秒杀 -->
<div class="seckill w">
<div class="time">
<div class="time-tit">京东秒杀</div>
<div class="time-art"><strong>22:00</strong>场 ；倒计时</div>
<div class="timer"><span>00</span>:
<span>00</span>:
<span>00</span></div>
</div>
<div class="adkill"><img src="upload/ad1.jpg" alt="">
<div class="ad-text"><a>京东JD.COM-专业综合⽹上购物商城，销售超数万品牌，4020万种商品</a>
</div>
<div class="ad-price">
<span class="pr1"><i>¥</i>29.90</span>
<span class="pr2"></span>
<span class="pr3">99.00</span>
</div>
</div>
<div class="adkill"><img src="upload/ad2.jpg" alt="">
<div class="ad-text"><a>京东JD.COM-专业综合⽹上购物商城，销售超数万品牌，4020万种商品</a></div>
<div class="ad-price">
<span class="pr1"><i>¥</i>29.90</span>
<span class="pr2"></span>
<span class="pr3">99.00</span>
</div>
</div>
<div class="adkill"><img src="upload/ad3.jpg" alt="">
<div class="ad-text"><a>京东JD.COM-专业综合⽹上购物商城，销售超数万品牌，4020万种商品</a></div>
<div class="ad-price">
<span class="pr1"><i>¥</i>29.90</span>
<span class="pr2"></span>
<span class="pr3">99.00</span>
</div>
</div>
<div class="adkill"><img src="upload/ad4.jpg" alt="">
<div class="ad-text"><a>京东JD.COM-专业综合⽹上购物商城，销售超数万品牌，4020万种商品</a>
</div>
<div class="ad-price">
<span class="pr1"><i>¥</i>29.90</span>
<span class="pr2"></span>
<span class="pr3">99.00</span>
</div>
</div>
<div class="l-adkill"><img src="upload/ad5.jpg" alt="">
<div class="l-text">
<p><strong>雷达钟表专场</strong></p>
<p>爆款每满1000减100</p>
<div class="l-a-btn">限时秒杀</div>
</div>
</div>
</div>
<!-- 商品 -->
<!-- 结尾 -->
<div class="end w">
<div class="end-fun">
<ul>
<li><img src="imges/duo.png" alt="">品类齐全，轻松购物</li>                <li><img src="imges/kuai.png" alt="">多仓直发，极速配送</li>                <li><img src="imges/hao.png" alt="">正品⾏货，精致服务</li>                <li><img src="imges/sheng.png" alt="">天天低价，畅选⽆忧</li>            </ul>
</div>
<div class="end-menu">
<div class="e-m-1">
<h5>购物指南</h5>
<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>
</ul>
</div>
<div class="e-m-2">
<h5>配送⽅式</h5>
<ul>
<li><a href="#">上门⾃提</a></li>
汽车商城
<li><a href="#">211限时达</a></li>
<li><a href="#">配送服务查询</a></li>
<li><a href="#">配送费收取标准</a></li>
<li><a href="#">海外配送</a></li>
</ul>
</div>
<div class="e-m-3">
<h5>⽀付⽅式</h5>
<ul>
<li><a href="#">货到付款</a></li>
<li><a href="#">在线⽀付</a></li>
<li><a href="#">分期付款</a></li>
<li><a href="#">公司转账</a></li>
</ul>
</div>
<div class="e-m-4">
<h5>售后服务</h5>
<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>
</ul>
</div>
<div class="e-m-5">
<h5>特⾊服务</h5>
<ul>
<li><a href="#">夺宝岛</a></li>
<li><a href="#">DIY装机</a></li>
<li><a href="#">延保服务</a></li>
<li><a href="#">京东E卡</a></li>
<li><a href="#">京东通信</a></li>
<li><a href="#">鲸鱼座智能</a></li>
</ul>
</div>
<div class="e-m-6">
<h5>京东⾃营覆盖区县</h5>
<ul>
<li>京东已向全国2661个区县提供⾃</li>
<li>营配送服务，⽀持货到付款、</li>
<li>POS机刷卡和售后。</li>
<li>查看详情</li>
</ul>
</div>
</div>
<div class="end-end">
<div class="end-con">
<ul>
<li><a href="#">关于我们</a></li>
<li></li>
<li><a href="#"></a></li>
<li></li>
<li><a href="#"></a></li>
<li></li>
<li><a href="#">合作招商</a></li>
<li></li>
<li><a href="#">商家帮助</a></li>
<li></li>
<li><a href="#">营销中⼼</a></li>
<li></li>
<li><a href="#">⼿机京东</a></li>
<li></li>
<li><a href="#">友情链接</a></li>
<li></li>
<li><a href="#">销售联盟</a></li>
<li></li>
<li><a href="#">京东社区</a></li>
<li></li>
<li><a href="#">风险监测</a></li>
<li></li>
<li><a href="#">隐私政策</a></li>
<li></li>
<li><a href="#">京东公益</a></li>
<li></li>
<li><a href="#">English Site</a></li>
<li></li>
<li><a href="#">Media  &  IR</a></li>
</ul>
</div>
<div class="end-plo">
<ul>
<li><a href="#">京公⽹安备 11000002000088号</a></li>
<li></li>
<li>京ICP证070359号</li>
<li></li>
<li><a href="#">互联⽹药品信息服务资格证编号(京)-经营性-2014-0008</a></li>
<li></li>
<li>新出发京零字第⼤120007号</li>
</ul>
</div>
<div class="end-int">
<ul>
<li><a href="#">互联⽹出版许可证编号新出⽹证(京)字150号</a></li>
<li></li>
<li><a href="#">出版物经营许可证</a></li>
<li></li>
<li><a href="#">⽹络⽂化经营许可证京⽹⽂[2014]2148-348号</a></li>
<li></li>
<li><a href="#">违法和不良信息举报电话：4006561155</a></li>
</ul>
</div>
<div class="end-com">
<ul>
<li><a href="#">Copyright © 2004 - 2020   京东JD 版权所有</a></li>
<li></li>
<li><a href="#">消费者维权热线：4006067733    经营证照</a></li>
<li></li>
<li><a href="#">(京)⽹械平台备字(2018)第00003号</a></li>
<li></li>
<li><a href="#">营业执照</a></li>
</ul>
</div>
<div class="end-glb">
<ul>
<li><a href="#"> <img src="imges/glb1.png" alt=""> Global Site</a></li>
<li></li>
<li><a href="#"><img src="imges/glb2.png" alt="">Сайт России</a></li>
<li></li>
<li><a href="#"><img src="imges/glb3.png" alt="">Situs Indonesia</a></li>
<li></li>
<li><a href="#"><img src="imges/glb4.png" alt="">Sitio de España</a></li>
<li></li>
<li><a href="#"><img src="imges/glb5.png" alt=""></a></li>                </ul>
</div>
<div class="end-ad">
<ul>