本文介绍了以京东网页为设计案例的静态页面制作过程，详细讲解了HTML和CSS的运用，包括头部CSS文件链接、div分区元素的使用、悬停伪类、定位、行级与块级元素转换、浮动等关键设计要点。特别是秒杀栏的实现，通过HTML和CSS代码展示了其实现细节。
一、准备步骤
以京东网页为设计案例，使用HTML和CSS进行设计，首先要在头部<head>文件中加入<link>对CSS文件里加入的两个CSS代码文件进行链接，一个是设置格式的代码，另一个是下载的图标库代码。
示例代码如下：
<link rel="stylesheet" href="./css/index.css"/>
<link rel="stylesheet" href="./css/iconfont.css"/>关于href里面的路径需根据自己创建的文件夹的位置进行编写。
此次案例设计了网页的上导航、搜索栏、中间主图部分、秒杀栏和排行榜一栏。
二、div分区元素
使用较多的是<div>分区元素，用于在网页上设置一般的结构区域，或所谓的“分区”，用于块显示，其上与其下均会换行。分区元素由<div>标签开始，至</div>标签结束。当我们需要对包含其他块显示元素（如标题、段落、无序列表甚至分区等）的网页区域设置格式时，就可以使用该元素。
在案例中上导航、搜索栏、中间主图部分、秒杀栏和排行榜都各自设计了分区，然后在大分区里设置小的分区进行每一个元素的设计。
三、案例设计要点
1.悬停伪类（:hover）
用来设置元素在鼠标悬停时的样式。
2.定位
在大分区中包含许多的小分区，要让小分区在大分区内被设置，需给作为父元素的大分区设置相对定位，然后给小分区设置绝对定位，在使用top等相关属性进行设置。
3.行级元素和块级元素的转换
行级元素里面的内容可以撑开宽度，但是不能设置宽和高，显示出来的宽高是由内容撑开的。
块级元素可以用样式来设置其宽高。
有时行级元素需要设置宽高时，可以在<style>标签中运用属性display:inline-block;转换成块级元素。
4.浮动
在给分区设置好定位后，分区内的小分区要进行排列，此时需要用到浮动，让子元素相对父元素按需要左右浮动，属性是float:left;左浮动和float:right;右浮动。
5.注意样式
在设置样式时，要注意区分子父类的样式，不要让父类的样式对后面的所要设置的其他子类样式产生影响。
四、秒杀部分实现
秒杀部分HTML代码示例如下：
<div class="miaosha">
<div class="m_con">
<div class="timego">
<div class="timego_m">京东秒杀</div>
<div class="timego_E">FLASH DEALS</div>
<div class="imgxuebi"></div>
<div class="t
最低0.47元/天 解锁文章
扫一扫
2597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
