京东首页静态页面的代码书写,熟悉html和css的使用和网页页面的实现。
1.编码格式为UTF-8,由于页面代码冗长,选择外链式css文件来加入css代码。
2.京东首页整体分为页面头部导航,中部内容和页面底部服务栏,其中头部导航与底部服务在每个京东子页面里出现,可以将其css代码写入base.css中
3.编写html代码时重要的是进行结构分析,比如轮播图的设计,首先使用<div></div>标签构造一个大盒子,里面包裹分别用ul标签和ol标签包裹若干li标签,ol 里的 li 负责表现 ul 里的 li 的索引,在书写css代码时 ol 需要进行绝对定位,子绝父相,div 需要相对定位.ul 里的 li 需要左浮动,ul 需溢出隐藏。
4.html和css零碎知识多,结合W3C手册,书写web页面可以快速系统的练习和掌握。
上代码 html代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>不是所有的页面都叫京东</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<!--京东的头部导航开始-->
<div class="shortcut">
<div class="w">
<div class="fl">
<div class="dt"> 送至:北京
<i><s>◇</s></i>
</div>
</div>
<div class="fr">
<ul>
<li>
<a href="#">你好,请登录</a>
<a href="#" class="col-red">免费注册</a>
</li>
<li class="line"></li>
<li>我的订单</li>
<li class="line"></li>
<li class="fore">我的京东
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li>京东会员</li>
<li class="line"></li>
<li>企业采购</li>
<li class="line"></li>
<li class="fore tel-jd">
<em class="tel"></em>
手机京东
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li class="fore">
关注京东
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li class="fore">
客户服务
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li class="fore">
网站导航
<i><s>◇</s></i>
</li>
</ul>
</div>
</div>
</div>
<!--京东头部导航结束-->
<!--京东的topbanner部分-->
<div class="topbanner">
<div class="w tp">
<img src="images/topbanner.jpg" alt=""/>
<a href="javascript:;" class="close-banner"></a>
</div>
</div>
<!--京东的topbanner部分 end-->
<div class="w clearfix">
<div class="logo">
<a href="http://www.jd.com" target="_blank" class="jd-a" title="叮咚">京东</a>
<div class="db11">
<a href="#"><img src="images/dong.gif" alt=""/></a>
</div>
</div>
<div class="search">
<input type="text" name="" id="" value="图书开抢"/>
<button>搜索</button>
</div>
<div class="car">
<a href="#">俺的购物车</a>
<span class="icon1"></span>
<span class="icon2">></span>
<span class="icon3">8</span>
</div>
<div class="hotwords">
<a href="#" class="col-red">11月11天</a>
<a href="#">11.11秒杀</a>
<a href="#">买2免1</a>
<a href="#">Note5 黑</a>
<a href="#">12期免息</a>
<a href="#">智能科技</a>
<a href="#">清仓</a>
<a href="#">国际服饰</a>
<a href="#">优惠券</a>
</div>
</div>
<!--nav 部分开始-->
<div class="jd-nav">
<div class="w">
<div class="dropdown">
<div class="dt">
<a href="#">全部商品分类</a>
</div>
<div class="dd">
<div class="items">
<h3>家用电器</h3>
<span>></span>
</div>
<div class="items">
<h3>手机、数码、京东通信</h3>
<span>></span>
</div>