练习(二) 仿京东(上) html+css

最新推荐文章于 2019-10-18 18:08:13 发布

sgjbcbhsbvrj

最新推荐文章于 2019-10-18 18:08:13 发布

阅读量518

点赞数

文章标签： html css

本文链接：https://blog.youkuaiyun.com/hyugyug/article/details/102596752

版权

本次是跟着视频仿的京东头部
效果图：
在这里插入图片描述
html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../css/base.css"/>
		<link rel="stylesheet" type="text/css" href="../css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="../css/icon.css"/>
		<title>京东</title>
	</head>
	<body>
		<!-- header 部分 start -->
		<header>
			<div class="w">
				<a href="#">
					<img src="../images/header.png">
				</a>
				<div class="hide-header">
					<span class="icon-cross"></span>
				</div>
			</div>
		</header>
		<!-- header 部分 end -->
		<!-- 导航栏部分 start -->
		<div class="shortcut">
			<div class="w">
				<ul class="fl area">
					<li><span class="icon-location red"></span><a href="#"> 广西</a></li>
				</ul>
				<ul class="fr">
					<li>
						<a href="#">你好，请登录</a>
						<a href="#" class="red">免费注册</a>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">我的订单</a>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">我的京东</a>
						<span class="icon-ctrl"></span>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">京东会员</a>
					</li>
					<li class="space"></li>
					<li>
						<a href="#" class="red">企业采购</a>
						<span class="icon-ctrl"></span>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">客户服务</a>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">网站导航</a>
						<span class="icon-ctrl"></span>
					</li>
					<li class="space"></li>
					<li>
						<a href="#">手机京东</a>
					</li>
				</ul>
			</div>
		</div>
	    <!-- 导航栏部分 end -->
		<!-- 中间头部分 start -->
		<div class="middle">
			<div class="w">
				<!-- logo -->
				<div class="logo">
					<h1>    
						<a href="#"></a>
					</h1>
				</div>
				<!-- 搜索 -->
				<div class="form">
					<input type="text" placeholder="电动滑板车">
					<span class="icon-camera"></span>
					<button><span class="icon-search"></span></button>
				</div>
				<!-- 购物车 -->
				<div class="shop-car">
					<span class="icon-cart"></span>
					<span class="car-goods">0</span>
					<a href="#">我的购物车</a>
				</div>
				<!-- 关键词 -->
				<div class="hot-words">
					<a href="#" class="red">沙龙洗发水</a>
					<a href="#">全球美妆</a>
					<a href="#">仙女同款</a>
					<a href="#">大屏电视</a>
					<a href="#">羊肉</a>
					<a href="#">爆款直降</a&