综合案例小米商城产品模块

一般来说，产品名字，类别名字都用h标题来做，而产品描述等则用p标签来做
写多点类名，可以维护方便
margin和padding各有优缺点，视情况而定

HTML源代码（小米商城.html）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}.box {width: 298px;height: 415px;background-color: #fff;/* 让块盒子水平居中对齐 */margin: 100px auto;}.box img {/* 图片宽度和父亲一样宽 */width: 100%;}.review {height: 70px;font-size: 14px;/* 因为段落没有width，所以不会撑开盒子 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}a {color: #333;text-decoration: none;}</style>
</head><body><div class="box"><img src="data:images/img.jpg" alt=""><p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p><div class="appraise">来自于 117384232的评价</div><div class="info"><h4><a href="#">Redmi AirDots真无线蓝...</a> </h4><em>|</em><span> 99.9元</span></div></div>
</body></html>

最终效果

写在最后

注:上述笔记均来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程这一课程的学习记录，主要供自己的学习分享

各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！＜（＾－＾）＞
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知

HTML(Basic) Chapter4(Pink) 综合案例小米商城产品模块相关推荐

HTML(Basic) Chapter4(Pink) 综合案例悬浮导航栏
文章目录 HTML图像标签示例 HTML源代码(demo.html) 最终效果写在最后 HTML图像标签示例功能:利用之前所学的所有背景图片以及标签选择器的知识,做一个网站导航栏 HTML源代码( ...
案例学习-产品模块和快报模块
依旧是黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩的案例学习,一个是产品模块,另外一个是快报模块. 产品 ...
pink老师综合案例之圣诞节的那些事
pink老师综合案例之圣诞节的那些事一.文字素材圣诞节的那些事 1.圣诞节是怎样由来的 2.圣诞老人的由来 3.圣诞树的由来圣诞节是怎样由来的圣诞节是基督教世界最大的节日.一般认为12月25日 ...
综合案例：新浪微博导航栏，产品模块，快报模块
新浪微博导航栏 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
前端学习从入门到高级全程记录之8 （PS基本使用综合案例）
本期学习目标本期我们将学习PS的基本使用并且运用以前所学的CSS和HTML的技术来完成一个综合案例. 1.Photoshop基本使用早在第一期我就让大家去安装PS,不知道安装了没有,没有安装的尽快 ...
图解大数据 | 综合案例-使用Spark分析挖掘零售交易数据
作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/84 本文地址:http://www.showmeai.tech/article-det ...
Web APIs 正则表达式综合案例丨小兔仙儿登录页面
目录综合案例:小兔鲜登录页面案例代码:CSS丨common 案例代码:CSS丨index 案例代码:CSS丨login 案例代码:CSS丨register 案例代码:HTML丨index 案例代码 ...

HTML(Basic) Chapter4(Pink) 综合案例小米商城产品模块

文章目录

综合案例小米商城产品模块

HTML源代码（小米商城.html）

最终效果

写在最后

HTML(Basic) Chapter4(Pink) 综合案例小米商城产品模块相关推荐

最新文章

热门文章