案例学习-产品模块和快报模块

依旧是黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩的案例学习，一个是 产品模块，另外一个是 快报模块。

产品模块

效果预览：

HTML 部分

其中图片没有下载下来，是直接用小米家的连接，其他的基本就是 cv 了一下小米笔记本的评价。

顺便多提一句，视频中的布局现在小米商城已经没有在用了。

  <body><div class="box"><imgsrc="http://i1.mifile.cn/f/i/18/mibookair/13/index_sound_bg.jpg"alt=""class="s"/><p class="review">AKG定制扬声器，配合杜比环绕音效技术，满足你对声音的挑剔。闭上眼，仿佛身处影院；睁开眼，独享一片惬意。</p><div class="appraise">来自于 10086 的评价</div><div class="info"><h4><a href="#">小米笔记本Air 13.3"</a></h4><span class="divider">|</span><span>¥5399</span></div></div></body>

CSS 部分

<style>
/*  去除浏览器默认边距，设置背景颜色，以及去除所有的 a 超链的样式 */* {margin: 0;padding: 0;}body {background: #f5f5f5;}a {color: #333;text-decoration: none;}/* 设置盒子的大小，以及内外边距 */.box {width: 300px;height: 400px;background: #fff;margin: 100px auto;}.box img {width: 100%;padding-bottom: 30px;}.review {height: 70px;font-size: 14px;padding: 0 28px;margin-bottom: 20px;}.appraise {font-size: 12px;color: #b0b0b0;padding: 0 28px;margin-bottom: 15px;}.info {padding: 0 28px;font-size: 14px;}.info h4 {display: inline;font-weight: 400;}.info span {color: #ff6700;}.info .divider {display: inline-block;color: #ebe4e0;margin-left: 20px;margin-right: 6px;font-weight: 700;}
</style>

快报模块

效果预览

HTML 部分

<body><div class="box"><h3>品优购快报</h3><ul><li><a href="#">【特惠】爆款耳机5折秒</a></li><li><a href="#">【特惠】母亲节，健康好礼低至5折</a></li><li><a href="#">【特惠】爆款耳机5折秒</a></li><li><a href="#">【特惠】9.9元洗100张照片</a></li><li><a href="#">【特惠】长虹智能空调立省1000</a></li></ul></div>
</body>

CSS 部分

<style>* {margin: 0;padding: 0;}li {list-style: none;}.box {box-sizing: border-box;width: 250px;height: 165px;border: 1px solid #ccc;margin: 100px auto;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}.box ul {padding-top: 7px;padding-left: 20px;}.box ul li {line-height: 23px;height: 23px;}.box ul li a {font-size: 12px;color: #666;text-decoration: none;}.box ul li a:hover {text-decoration: underline;}
</style>

总结下来主要是这几个部分：

使用通用选择器 *{} 去除浏览器默认样式
使用 padding, margin 添加边距，使得容器与容器之间看起来更舒服一点
使用 text-declaration: none; 去除超链接的默认样式
使用 list-style: none; 去除列表前的装饰

再搭配上字体颜色、大小的调整，从单个组件的角度来说，组件已经能看了。

案例学习-产品模块和快报模块相关推荐

综合案例：新浪微博导航栏，产品模块，快报模块
新浪微博导航栏 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
HTML(Basic) Chapter4(Pink) 综合案例小米商城产品模块
文章目录综合案例小米商城产品模块 HTML源代码(小米商城.html) 最终效果写在最后综合案例小米商城产品模块一般来说,产品名字,类别名字都用h标题来做,而产品描述等则用p标签来做写多点类 ...
python网络数据处理之html2text模块和readability模块学习使用
今天在处理html数据的时候发现了python里面比较好玩的几个库,先存起来之后有时间慢慢再去学习和使用,觉得是一件蛮有意思的事情.今天想学习使用的是html2text模块和readability模块 ...
Python学习系列（六）(模块)
Python学习系列(六)(模块) Python学习系列(五)(文件操作及其字典) 一,模块的基本介绍 1,import引入其他标准模块标准库:Python标准安装包里的模块. 引入模块的几种方式: ...
Nginx学习之负载均衡fair模块
2019独角兽企业重金招聘Python工程师标准>>> Nginx学习之负载均衡fair模块 2017-04-10 20:27 写在开始前面对Nginx的三种负载均衡实现做了一个简 ...
pythonurllib模块-python爬虫之urllib模块和requests模块学习
今天学习了request模块和urllib模块,了解到这两个模块最大的区别就是在爬取数据的时候连接方式的不同.urllb爬取完数据是直接断开连接的,而requests爬取数据之后可以继续复用socke ...
Python编程语言学习：包导入和模块搜索路径简介、使用方法之详细攻略
Python编程语言学习:包导入和模块搜索路径简介.使用方法之详细攻略目录包导入和模块搜索路径简介 1.Pyhon搜索模块路径的机制 2.自定义配置搜索路径
【学习笔记】SAP CO模块概念信息（下）
产品成本核算 CO-PC 产品成本计划PCP:产品的标准成本是多少,以及如何计算,这部分与PP模块联系紧密: 成本对象控制OBJ:产品在生产时候通过生产订单来对产品收集生产成本: 实际成本/物料账AC ...
Python学习笔记：常用第三方模块3
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...

案例学习-产品模块和快报模块

案例学习-产品模块和快报模块相关推荐

最新文章

热门文章