HTML+CSS案例京东静态界面
初学前端，花了几天时间学了CSS，发现翻来覆去常用的就只有几个点，所以做了一个静态页面的案例（只会这些），JS还没学完，后期再补吧。有需要素材的可以留言鸭~
1. 结果展示
包含title、description、keywords以及网页标题顶部的icon
网页底部
2. 结构
分为四个文件夹，分别是CSS、images、fonts、js（以后存放js文件）。其中CSS中包含base.css， index.css, normalize.css。
images存放需要用到的图片，fonts存放字体图标
HTML
结构index.html
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！title>
<meta name="description"
content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
head>
<body>
<header>
<div class="w">
<a href="#">
<img src="images/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>
<li class="space">li>
<li><a href="#">网站导航a>
<i>i>li>li>
<li class="space">li>
<li><a href="#" class="mobile">手机APP
<img src="images/mobile.png">a>
li>
<li class="space">li>
ul>
div>
div>
<div class="w middle">
<div class="logo">
<h1><a href="#">
<img src="images/logo.png">
a>h1>
div>
<div class="search">
<input type="text" placeholder="加湿器">
<button><i>i>button>
div>
<div class="shopCar">
<i>i>
<a href="#" class="f10">我的购物车a>
<span>0span>
div>
<div class="hotwords">
<a href="#">满199减100a>
<a href="#">食品饮料a>
<a href="#">品质家具a>
<a href="#">5Ga>
<a href="#">冰果诱惑a>
<a href="#">母亲节a>
div>
<div class="ad-l">
<img src="images/ad-l.png" width="200px">
div>
<div class="navitems">
<ul>
<li><a href="#">秒杀a>li>
<li><a href="#">优惠券a>li>
<li><a href="#">PLUS会员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>
ul>
div>
div>
<div class="w grid">
<div class="grid-col1 fl">
<ul>
<li><a href="#">家用电器a>li>
<li><a href="#">手机a><span>/span><a href="#">运营商a><span>/span><a href="#">数码a>li>
<li><a href="#">电脑a><span>/span><a href="#">办公a>li>
<li><a href="#">家具a><span>/span><a href="#">家居a><span>/span><a href="#">家装a><span>/span><a href="#">厨具a>li>
<li><a href="#">男装a><span>/span><a href="#">女装a><span>/span><a href="#">童装a><span>/span><a href="#">内衣a>li>
<li><a href="#">美妆个护a><span>/span><a href="#">宠物a>li>
<li><a href="#">女鞋a><span>/span><a href="#">箱包a><span>/span><a href="#">钟表a><span>/span><a href="#">珠宝a>li>
<li><a href="#">男鞋a><span>/span><a href="#">运动a><span>/span><a href="#">户外a>li>
<li><a href="#">汽车a><span>/span><a href="#">汽车用品a>li>
<li><a href="#">母婴a><span>/span><a href="#">玩具a>li>
<li><a href="#">食品a><span>/span><a href="#">酒类a><span>/span><a href="#">生鲜a><span>/span><a href="#">特产a>li>
<li><a href="#">礼品鲜花a><span>/span><a href="#">农资绿植a>li>
<li><a href="#">医疗a><span>/span><a href="#">药品a>li>
<li><a href="#">图书a><span>/span><a href="#">音响a><span>/span><a href="#">电子书a>li>
<li><a href="#">旅游a><span>/span><a href="#">机票a><span>/span><a href="#">酒店a>li>
<li><a href="#">理财a><span>/span><a href="#">众筹a><span>/span><a href="#">保险a><span>/span><a href="#">白条a>li>
ul>
div>
<div class="grid-col2 fl">
<div class="grid-col2-t">
<a href="#"><img src="images/banner.jpg">a>
<a class="arrow-l" href="#"> < a>
<a class="arrow-r" href="#"> > a>
<ul class="circle">
<li>li>
<li class="current">li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
<div class="grid-col2-b">
<div><img src="images/l.jpg">div>
<div><img src="images/r.jpg">div>
div>
div>
<div class="grid-col3 fr">
<div class="login">
<div class="login-t">
Hi，欢迎来到京东！<br>
<a href="#">登录a>
<a href="#">注册a>
<a class="user-photo" href="#">
<img src="images/no_login.jpg">
a>
div>
<div class="login-b">
<a href="#">新人福利a>
<a href="#">PLUS会员a>
div>
div>
<div class="news">
<div class="news-t">
<a class="promotion" href="#">促销a>
<a class="gg" href="#">公告a>
<a class="more" href="#">更多a>
<div>div>
div>
<div class="news-b">
<a href="#">飘柔，挑战3天不洗头a>
<a href="#">ADM锐龙首发a>
<a href="#">家具狂欢领199减100a>
<a href="#">益生菌领劵满300减100a>
div>
div>
<div class="expand">
<ul>
<li>
<a href="#"><div>div><span>话费span>a>
li>
<li>
<a href="#"><div>div><span>话费span>a>
li>
<li>
<a href="#"><div>div><span>话费span>a>
li>
<li>
<a href="#"><div>div><span>话费span>a>
li>
<li>
<a href="#"><div>div><span>话费span>a>
li>
<li>
<a href="#"><div>div><span>话费span>a>
li>
<li>
<a href="#"><div>div><span>话费span>a>
li>
<li>
<a href="#"><div>div><span>话费span>a>
li>