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

香甜的甲基橙

已于 2022-01-20 17:43:55 修改

阅读量1k

点赞数 1

分类专栏： css web前端基础学习笔记文章标签：前端 css

于 2022-01-20 17:42:35 首次发布

本文链接：https://blog.csdn.net/weixin_51249285/article/details/122606712

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

css

22 篇文章 5 订阅

订阅专栏

文章目录

3. 综合案例
- 案例1：产品模块

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="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，大部分情况可以混用，都有优缺点，看实际情况。
思路：先分析好布局，大块，然后其中每一小块，再写代码。

香甜的甲基橙

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web前端学习156-161（案例1：产品模块---小米手机产品）

文章目录3. 综合案例案例1：产品模块3. 综合案例案例1：产品模块分析一下：出现一个命名问题：我开始命名图片b2.png，.box b2 {}一直达不到效果，后来改成普通的英文名字img.png就可以了（为什么？我还没查，应该是命名规则问题）eg : 26-综合案例-产品模块.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me
复制链接

扫一扫

专栏目录