一、准备步骤
以京东网页为设计案例,使用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