产品模块(HTML、CSS)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例-产品模块</title><style>* {margin: 0px;padding: 0px;background-color: #dff2da;}.box {width: 300px;height: 450px;background-color: #fff;margin: 100px auto;}.box img {width: 100%;/*  与盒子宽度一样宽 */height: 270px;}.box p {background-color: #fff;}.review {height: 70px;font-size: 14px;/*     因为这个段落没有width属性 所以padding不会撑开盒子的宽度 */padding: 0 28px;margin-top: 30px;}.appraise {background-color: #fff;font-size: 12px;color: #aeafad;padding: 0 28px;margin-top: 10px;}.info {font-size: 14px;margin-top: 10px;background-color: #fff;padding: 0 28px;}.info h4 {background-color: #fff;display: inline-block;/*     变成行内块 让span放置为其右边 */font-weight: 400;color: #000000;}.info a {background-color: #fff;text-decoration: none;color: #000000;}.info span {background-color: #fff;color: #fa7211;}.info em {margin-left: 90px;color: #e6e6ec;font-style: normal;}</style>
</head><body><div class="box"><img src="pg.jpg" alt=""><p class="review">香甜可口、酥脆苹果</p><div class="appraise">来自于 t52155567 的评价</div><div class="info"><h4> <a href="#">富士山红苹果...</a></h4><em>|</em><span> 9.99元</span></div></div>
</body></html>

产品模块(HTML、CSS)相关推荐

CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
css案例-产品模块布局-图片比盒子大怎么办？
文章目录结果图编写中出现的问题 1.规定img盒子的大小,但是发现图片比img盒子大很多怎么办? 2.编写过程中文字冲破盒子怎么办? 实现代码结果图编写中出现的问题 1.规定img盒子的大小, ...
案例学习-产品模块和快报模块
依旧是黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩的案例学习,一个是产品模块,另外一个是快报模块. 产品 ...
HTML(Basic) Chapter4(Pink) 综合案例小米商城产品模块
文章目录综合案例小米商城产品模块 HTML源代码(小米商城.html) 最终效果写在最后综合案例小米商城产品模块一般来说,产品名字,类别名字都用h标题来做,而产品描述等则用p标签来做写多点类 ...
综合案例：新浪微博导航栏，产品模块，快报模块
新浪微博导航栏 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
小米官网——简单产品模块布局实现
注意: 标签都是有语义的,合理的地方用合理的标签.比如产品标题就用h,大量文字段落就用p margin和padding大部分情况下可以进行混用,两者各有优缺点,最好根据实际情况,采取简单的方法实现,比 ...
【HTML-5】小米耳机产品模块
1. 以下为效果图 2.以下为源代码 <!DOCTYPE html> <html lang="en"><head><meta charse ...
web前端学习156-161（案例1：产品模块---小米手机产品）
文章目录 3. 综合案例案例1:产品模块 3. 综合案例案例1:产品模块分析一下: 整体看成一个大盒子里面分块分别当作小盒子当时敲代码出现一个命名问题: 我开始命名图片b2.png,.box ...
80V超高压线性降压LDO仅2uA的待机功耗且具有固定极可调输出电压规格极适用物联网产品模块供电等高压转低压低功耗应用
YB203H系列 80V超高压线性降压LDO仅2uA的待机功耗且具有固定极可调输出电压规格极适用物联网产品模块供电等高压转低压低功耗应用. YB203H概述系列是一组CMOS技术实现的三端低功耗高电 ...

产品模块(HTML、CSS)

产品模块(HTML、CSS)

产品模块(HTML、CSS)相关推荐

最新文章

热门文章