京东静态网页设计案例（1） |
您所在的位置：网站首页 › 静态网页设计图 › 京东静态网页设计案例（1） |
京东静态网页设计案例（1）
|
大家好，又见面了，我是你们的朋友全栈君。 一、准备步骤以京东网页为设计案例，使用HTML和CSS进行设计，首先要在头部文件中加入对CSS文件里加入的两个CSS代码文件进行链接，一个是设置格式的代码，另一个是下载的图标库代码。  京东静态网页设计案例（1）示例代码如下： 代码语言：javascript复制关于href里面的路径需根据自己创建的文件夹的位置进行编写。 此次案例设计了网页的上导航、搜索栏、中间主图部分、秒杀栏和排行榜一栏。 二、div分区元素使用较多的是分区元素，用于在网页上设置一般的结构区域，或所谓的“分区”，用于块显示，其上与其下均会换行。分区元素由标签开始，至标签结束。当我们需要对包含其他块显示元素（如标题、段落、无序列表甚至分区等）的网页区域设置格式时，就可以使用该元素。 在案例中上导航、搜索栏、中间主图部分、秒杀栏和排行榜都各自设计了分区，然后在大分区里设置小的分区进行每一个元素的设计。 三、案例设计要点1.悬停伪类（:hover） 用来设置元素在鼠标悬停时的样式。 2.定位 在大分区中包含许多的小分区，要让小分区在大分区内被设置，需给作为父元素的大分区设置相对定位，然后给小分区设置绝对定位，在使用top等相关属性进行设置。 3.行级元素和块级元素的转换 行级元素里面的内容可以撑开宽度，但是不能设置宽和高，显示出来的宽高是由内容撑开的。 块级元素可以用样式来设置其宽高。 有时行级元素需要设置宽高时，可以在标签中运用属性display:inline-block;转换成块级元素。 4.浮动 在给分区设置好定位后，分区内的小分区要进行排列，此时需要用到浮动，让子元素相对父元素按需要左右浮动，属性是float:left;左浮动和float:right;右浮动。 5.注意样式 在设置样式时，要注意区分子父类的样式，不要让父类的样式对后面的所要设置的其他子类样式产生影响。 四、秒杀部分实现秒杀部分HTML代码示例如下： 代码语言：javascript复制 京东秒杀 FLASH DEALS 本场距离结束还剩 00 00 00
西麦 冲饮谷物 营养早餐 即 ￥11.90 ￥33.90
小米 红米6 Pro AI美颜双摄 ￥1049.00 ￥1119.00
纪梵希（Givenchy）高级定 ￥314.00 ￥349.00
维他奶 原味豆奶植物蛋白饮 ￥56.74 ￥67.20
秒杀部分CSS代码示例如下： 代码语言：javascript复制.m_con{ width: 1190px; height:275px; margin: 20px auto; } .timego{ width: 190px; height: 275px; float: left; background-color: #E83632; text-align: center; } .data_image1{ position: relative; float: left; width: 800px; height: 275px; background-color: white; } .data_image2{ float: left; width: 200px; height: 275px; background-color: white; } .timego_m{ margin-top: 45px; color: white; font-size: 33px; } .timego_E{ color: rgba(255, 255, 255, 0.69); font-size: 20px; } .timego_txt{ color: white; } .imgxuebi{ width: 20px; height: 33px; margin: 15px auto; background-color: black; background-image: url("../img/sprite.seckill.png"); background-repeat: no-repeat; background-position: -35px -25px; } .times{ width: 135px; height: 40px; margin: 20px auto; } .times>div{ position: relative; width:40px; height: 40px; float: left; margin-right: 5px; background: #2f2f2f; } .line_h{ position: relative; top: 4px; display: inline-block; width: 40px; border-top: 1px solid red; } .timesnumber{ position: absolute; width: 40px; height: 40px; font-weight: bold; font-size: 20px; line-height: 40px; color: white; z-index: 1; } .data_image1content{ width: 800px; height: 275px; } .data_image1content>div{ border-right: 1px solid #dadada; height: 275px; width: 199px; float: left; } .imagepar{ width: 140px; height: 140px; margin: 0 auto; margin-top: 40px; margin-bottom: 20px; } .imagepar>img{ width: 100%; height: 100%; } .imagepar_txt{ text-align: center; font-size: 12px; color: #4f4f4f; } .data_image1content>div:hover .imagepar_txt{ color: #fb5f4d; } .imagepar_txt:hover{ color: #fb5f4d; } .imagepar_price_nowprice{ background-color: #ff475b; color: white; display: inline-block; width: 80px; height: 20px; line-height: 20px; text-align: center; font-size: 13px; font-weight: bold; float: left; border: 1px solid #ff475b; } .imagepar_price_oldprice{ float: left; border: 1px solid #ff475b; color: silver; background-color: white; display: inline-block; width: 80px; height: 20px; line-height:20px; text-align: center; font-size: 12px; } .imagepar_price{ width: 164px; margin: 15px auto; } .data_image1_left{ position: absolute; text-align: center; line-height: 40px; width: 20px; height: 40px; background-color: silver; color: white; left: 0; top: 110px; } .data_image1_right{ position: absolute; text-align: center; line-height: 40px; right: 0; width: 20px; height: 40px; background-color: silver; color: white; top: 110px; } .data_image1_right:hover,.data_image1_left:hover{ background-color: grey; } .data_image2_ban{ position: relative; margin: 10px 10px; width: 180px; height: 255px; } .data_image2_ban>img{ width: 100%; height: 100%; } .diandian{ position: absolute; left: 83px; z-index: 2; bottom: 10px; } .diandian>span{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: grey; }秒杀部分显示图片：  京东静态网页设计案例（1）五、本次静态页面案例显示网页的效果图 京东静态网页设计案例（1）京东静态网页设计案例（1） 京东静态网页设计案例（1）版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/197177.html原文链接：https://javaforall.cn |
【本文地址】
今日新闻 |
推荐新闻 |