【Web】CSS(No.33)Css页面布局经典案例(三)《京东首页》


需要素材点击图片联系我或私信、评论

效果图:

在这里插入图片描述

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>&nbsp;/
	      	<a href="">运营商</a>&nbsp;/
	      	<a href="">数码</a>
	      </li>
	      <li>
	      	<a href="">手机</a>&nbsp;/
	      	<a href="">运营商</a>&nbsp;/
	      	<a href="">数码</a>
	      </li>
	      <li>
	      	<a href="">手机</a>&nbsp;/
	      	<a href="">运营商</a>&nbsp;/
	      	<a href="">数码</a<
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值