最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

焦点快报!Html+CSS小案例项目:CSS开发小米商城电商产品展示效果

来源:博客园

关于电商产品展示,无论是从首页还是到栏目页,再到产品的详情页,产品展示效果不仅仅是在电商平台,在很多的企业网站也使用频繁,今天为大家分享一个HTML+CSS小案例项目:小米电商平台的商品展示页面!我们来一起看看吧!


(相关资料图)

那么我们要开发一个什么样的效果呢?来吧展示!!!

接着下来我们实战开发吧!

温馨提示:本期课程是三十个实战案例的第2节,为了更好的学好前端,可以配合艾编程30天计划学习效果更好,因为30个案例就是30天计划的实战作业一部分!具体参与方式,我放在文章的最底部了,大家可以看完这个效果后找助理老师领取!

第一步、构建长方形盒子,同时水平居中

1、操作步骤

(1)构建 一个名为product的盒子

(2)给product 添加宽度、高度 、背景颜色。这里的高度正常情况下是不能设置死,是为了方便大家理解看效果,所以加上的。后面我们会去掉

.product{   width:268px;/*宽度*/   height:400px;/*高度*/   background-color: red;/*背景颜色*/}

(3)、清除body自带的的默认样式

body{margin:0px;/*外边距为0px*/}

(4)、设置.product 长方形盒子与浏览器顶部50px间距,同时水平居中显示

.product{margin:50px auto; /*上外边距50px 左右外边距自动相等-水平居中*/}

(5)、给盒子添加边框线,,同时把添加的背景注释掉。背景是为了开始演示效果

.product{   /* background-color: red;背景颜色*/border:1px solid #ddd; /*1像素 实线 灰色边框*/}

2、代码

3、实现效果

第二步、添加产品图,同时设置水平居中

1、操作步骤

(1)、在.product盒子中添加产品图,同时设置图片宽度和alt描述

   
电水壶

(2)、设置图片在水平方向居中显示

.product{text-align:center;/*设置内容文字或图片在盒子中水平居中*/}

2、代码

    
电水壶

3、实现效果

第三步、设置产品描述样式

1、操作步骤

1、在.product盒子中添加p标签,同时到名为describe,p标签用来包裹产品描述

   
电水壶

快速煮水,安心饮用

2、去掉h3自带的默认margin外边距样式

body,p{margin:0px;/*同时去掉body和h3标签的默认外边距*/}

3、修饰h3中的文字样式

.product p.describe{           font-size:16px ;/*字体大小*/           font-weight: 400;/*字体粗细*/           color:#845f3f;/*字体颜色*/      }

2、实现代码

    
电水壶

快速煮水,安心饮用

3、实现效果

第四步、构建一个长方形,用来包裹后所有内容

1、操作步骤

1、在.product盒子中,再构建一个名为 .product-text的盒子

   
电水壶

快速煮水,安心饮用

2、我们给product-text 添加如下样式。当然里添加的高度也是为了方便看效果,后面我们也会删除。

.product .product-text{           height:100px;/*高度-为了查看效果,后期会删除*/           background-color: #f8f8f8;/*背景颜色*/           margin-top:20px;/*上外边距20px*/           padding:15px;/*上下左右内边距15px*/      }

3、我们把最开始为了方便看效果,给.product添加的高度给删除(或注释)

.product{/*height:400px;*/}

2、实现代码

    
电水壶

快速煮水,安心饮用

添加内容边距,使里面的内容与盒子间有上下左右有15px空隙

3

实现效果

第五步、开发 直播中、特惠、30天保价、售后免邮效果

1、操作步骤

(1)在名为 .product-text盒子中 添加类名为 product-mark的div盒子,同时在里面插入四张图,同时把图片高度设为 20px

   
电水壶

快速煮水,安心饮用

直播中 特惠中 30天保价 售后免邮

(2)添加好的图片之间默认有一定的空隙,这个空隙在不同的浏览器中看到的大小可能不一样。所以我们需要把这个默认的空隙去掉,然后自己给图片添加外边距来实现空隙。

空隙产生的原因,是浏览器把图片间的换行和空格给编译了。我们的处理方式可以在.product-mark中添加font-size:0px;就可以消除。

.product .product-text .product-mark{           font-size: 0px;/*去掉图片间的空隙*/      }

(3)、消除空隙后,我们给图片单独添加margin外边距来实现空隙效果。

.product .product-text .product-mark img{           margin:0px 2px;/*给图片设置左右2像素外边距*/      }

2、代码

    
电水壶

快速煮水,安心饮用

直播中 特惠中 30天保价 售后免邮

3、实现效果

第六步、开发产品标题效果

1、操作步骤

(1)、在product-text盒子中添加 h3标签,用来包裹标题内容

电水壶

快速煮水,安心饮用

直播中 特惠中 30天保价 售后免邮

云米电水壶

(2)、去掉h3自带的默认margin外边距

body,p,h3{           margin:0px;/*同时去掉body,p,h3的默认外边距*/      }

(3)、通过以下css来修饰标题

.product .product-text h3{           font-size: 20px;/*字体大小*/           font-weight:400 ;/*字体粗细*/           margin-top:10px;/*上外边距为 10px*/      }

2、代码

    
电水壶

快速煮水,安心饮用

直播中 特惠中 30天保价 售后免邮

云米电水壶

3、实现效果

第七步、开发产品价格效果

1、操作步骤

(1)在product-text中 添加 p标签,用来包裹价格

   
电水壶

快速煮水,安心饮用

直播中 特惠中 30天保价 售后免邮

云米电水壶

¥59

(2)、通过以下css来修饰价格样式

.product .product-text p{           font-size:20px ;/*字体大小*/           color:#a92112;/*字体颜色*/           margin-top:5px;/*上外边距 5px*/      }

(3)、去掉最开始给 .product-text添中的 高度

.product .product-text{           /* height:100px; */  }

2、代码

        
电水壶

快速煮水,安心饮用

直播中 特惠中 30天保价 售后免邮

云米电水壶

¥59

3、实现效果

第八步、添加a超链接,实现页面跳转

添加了超链接之后,页面中的文字就添加了下划线,同时h3中的文字颜色也发生了改变,那下一步我们就来修正下这些细节

1、代码

2、运行效果

第九步:修改加了a标签后带来的问题

1、操作步骤

(1)清除a标签的默认下划线样式

a{   text-decoration: none;/*去掉下划线*/}

(2)给h3标签中的文字加上颜色

.product .product-text h3{           color:#000;      }

(3)把a标签转换为块级元素

a{display:block;/*a标签转换为块级元素*/}

a标签默认的是属于内联元素,正常情况下内联元素中是不能放块级元素,但a标签特殊,可以这样用。但在这里,如果不把标签转换为块级元素,会发生很奇怪的效果。你给a标签加上 border:1px solid red; 后,如下图所示:

所以我们要把a标签转换为块级元素。当转换为块级元素后,效果如下,一切正常

2、运行代码

    

3、运行效果

为帮助到一部分同学不走弯路,真正达到一线互联网大厂前端项目研发要求,首次实力宠粉,打造了《30天挑战学习计划》,内容如下:

HTML/HTML5,CSS/CSS3,JavaScript,真实企业项目开发,云服务器部署上线,从入门到精通

  • PC端项目开发(1个)
  • 移动WebApp开发(2个)
  • 多端响应式开发(1个)

共4大完整的项目开发 !一行一行代码带领实践开发,实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态,省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理,Markdown 记录学习笔记,包括真实大厂项目的开发标准和设计规范,命名规范,项目代码规范,SEO优化规范

从蓝湖UI设计稿 到 PC端,移动端,多端响应式开发项目开发

  • 真机调试,云服务部署上线;
  • Linux环境下 的 Nginx 部署,Nginx 性能优化;
  • Gzip 压缩,HTTPS 加密协议,域名服务器备案,解析;
  • 企业项目域名跳转的终极解决方案,多网站、多系统部署;
  • 使用 使用 Git 在线项目部署;

这些内容在《30天挑战学习计划》中每一个细节都有讲到,包含视频+图文教程+项目资料素材等。只为实力宠粉,真正一次掌握企业项目开发必备技能,不走弯路 !

过程中【不涉及】任何费用和利益,非诚勿扰 。

如果你没有添加助理老师微信,可以添加下方微信,说明要参加30天挑战学习计划,来自今日头条!老师会邀请你进入学习,并给你发放相关资料

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

关键词: 操作步骤 水平居中 背景颜色