3. 综合案例

案例1：产品模块

分析一下：

整体看成一个大盒子
里面分块分别当作小盒子

当时敲代码出现一个命名问题：

我开始命名图片b2.png，.box b2 {}一直达不到效果，后来改成普通的英文名字img.png就可以了（为什么？我还没查，应该是命名规则问题）

eg : 26-综合案例-产品模块.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;}a{color: #333;text-decoration: none;}body {background-color: #ededed;}.box {width: 291px;height: 374px;background-color: #fff;/* 让块级盒子水平居中对齐 */margin: 100px auto;}.box img {margin: 0 86px;margin-top: 44px;}.review {height: 14px;font-size: 14px;/* 因为这个段落没有width属性  所有padding不会撑开盒子的宽度 */padding: 0 91px;margin-top: 50px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 10px;/* padding: 0 50px; */text-align: center; }.info {font-size: 14px;color: #ff6c09;margin-top: 25px;text-align: center;}</style>
</head>
<body><div class="box"><img src="data:image/img.png" ><p class="review"><a href="#">Xiaomi 12 Pro</a></p><div class="appraise"><a href="#">全新骁龙8 1 2K AMOL ED屏幕</a></div><div class="info">4699元起</div></div>
</body>
</html>

网页显示：

总结：

布局用盒子不是都用div。标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h,大量文字段落就用p。
多用类名。类名就是给每个盒子起了一个名字可以更好的找到这个盒子，选取盒子更容易，后期维护也方便。
用margin还是padding，大部分情况可以混用，都有优缺点，看实际情况。
思路：先分析好布局，大块，然后其中每一小块，再写代码。

web前端学习156-161（案例1：产品模块---小米手机产品）相关推荐

零基础想要学习前端，却无从下手？其实你就差一套这样的web前端学习路线
优秀的前端工程师无论在深度和广度上都得有自己的一套清晰透明的知识体系,同时更应该具备快速学习的能力. WEB前端工程师除了需要掌握基本的前端的开发技能外,当然,这里的基本技能说的比较宽泛,大致包括HT ...
Web 前端学习之js概述
Web 前端学习之js概述 1.JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行JavaScript 代码. JS 是 ...
web前端学习路线图，WEB前端开发新手学习路线
前端的的技术一直在变化,更新和变革,现在基本是三驾马车(vue,angualr,react)主导整个前端框架,但是无论对于新人或者有经验的程序员,这些知识在必须掌握,下面给大家一份详细的表单: 我还是 ...
WEB前端学习路线2023完整版（附视频教程+学习资料）
下面小编为web前端学习爱好者汇总了一条完整的自学线路,适合初学者的WEB前端学习路线汇总! 需要更多教程,文末扫码即可别忘了扫码领资料哦[高清Java学习路线图] 和[全套学习视频及配套资料] 1 ...
html css 前端实现消息提醒数_自学的福音，web前端学习全套视频教程+最新学习思维导图都在这里...
1.产品经理.这些是负责策划应用程序的一群人.他们会想出很多新鲜的.奇怪的.甚至是不可能实现的应用.一般来说,产品经理都追求丰富的功能. 2.UI设计师.这些人负责应用程序的视觉设计和交互模拟. 3. ...
html表单的课后心得体会,web前端学习心得体会范文
<web前端学习心得体会范文>由会员分享,可在线阅读,更多相关<web前端学习心得体会范文(2页珍藏版)>请在装配图网上搜索. 1.web前端学习心得体会范文web前端学习心得 ...
web前端学习基础教程，简单的图片旋转木马自动轮播js代码
一款简单的图片旋转木马自动轮播js代码,图片叠加轮播切换效果,支持点击左右箭头按钮控制切换. 案例效果图案例源码: <!DOCTYPE html> <html lang=" ...
Web前端学习第四周
Web前端学习第四周 position定位指定一个元素在文档中的定位方式 top,right,left,bottom属性决定最终位置 position取值 static(默认) relative a ...
零基础web前端学习路线【全新web前端入门视频教程】
零基础怎么学web前端?下面就一起来看看吧! 想学好web前端,该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?这里为大家整理完整的零基础前端学习路线分享给大家. 适合零基础学员 ...

web前端学习156-161（案例1：产品模块---小米手机产品）

文章目录

3. 综合案例

案例1：产品模块

web前端学习156-161（案例1：产品模块---小米手机产品）相关推荐

最新文章

热门文章