效果图：
HTML源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
<!-- 引入ico图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- 引入css初始化文件 -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- 头部和底部结构基本相同，这里引入基本的公共样式 -->
<link rel="stylesheet" type="text/css" href="css/base.css">
<!-- 引入专属的首页样式 -->
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- header部分开始 -->
<header>
<div class="w">
<a href="#">
<img src="images/header.jpg" height="80" width="1190" alt="">
</a>
</div>
</header>
<!-- header部分结束 -->
<!-- 快速导航栏开始 -->
<div class="shortcut">
<div class="w">
<ul class="fl city">
<li><i class="f10"></i>北京</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="mobile">手机京东
<img src="images/mobile.png" height="60" width="60" 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="笔记本电脑">
<!-- 按钮的意思 双标签 等价于 <input type="button" value=""> -->
<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>
<l
最低0.47元/天 解锁文章
2916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
