CSS学习笔记：一个产品模块

最新推荐文章于 2024-07-15 22:43:41 发布

「已注销」

最新推荐文章于 2024-07-15 22:43:41 发布

阅读量249

点赞数

分类专栏： HTML JavaScript CSS

原文链接：www.mi.com

版权

HTML JavaScript CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用CSS进行元素定位，包括清除默认内外边距、设置盒子宽高及颜色、文字删除线效果、行内元素应用以及价格展示的样式设计。通过示例代码展示了如何使用padding和margin调整元素布局，以及利用class实现不同价格的样式区分。

摘要由CSDN通过智能技术生成

效果：

在这里插入图片描述

知识点

padding和margin
CSS中元素定位，父元素加子元素
对于一个盒子，先定义其宽高、颜色等大体的样式
文字删除线（用于原价）
span行内元素，不会换行

代码

<!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>产品模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: rgb(245, 245, 245);
        }
        .box {
            width: 347px;
            height: 448px;
            background-color: rgb(255, 255, 255);
            margin: 50px auto;
        }
        /* 元素定位一般加上父元素 */
        .box img {
            width: 60%;
            padding: 80px 70px 40px 70px;
        }
        /* 对于一个盒子，先定义其颜色、宽高（块级元素）、padding */
        .box .name {
            font-weight: 300;
            font-size: 17px;
            /* width: 100%; */
            /* background-color: pink; */
            /* 因为这个盒子没有设置width属性，所以padding的值不会撑开盒子的宽度 */
            /* padding: 50px 110px;  */
            margin: 60px auto 10px auto;
            text-align: center;
        }

        .box .review {
            /* background-color: skyblue; */
            font-weight: 300;
            font-size: 15px;
            color: rgb(176, 176, 176);
            /* padding-top: 20px; */
            text-align: center;
        }
        .price {
            text-align: center;
            padding-top: 20px;
        }
        .price .xianjia {
            color: rgb(255, 103, 0);
        }
        .price .yuanjia {
            color: rgb(176, 176, 176);
            /* 删除线 */
            text-decoration: line-through; 
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/TV.jpg" alt="">
        <h4 class="name">全面屏电视E43K</h4>
        <p class="review">全面屏设计，海量内容</p>
        <div class="price">
            <span class="xianjia">1399元 </span>
            <span class="yuanjia">1599元</span>
        </div>
    </div>
</body>
</html>

「已注销」

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记：一个产品模块

效果：知识点padding和marginCSS中元素定位，父元素加子元素对于一个盒子，先定义其宽高、颜色等大体的样式文字删除线（用于原价）span行内元素，不会换行代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
复制链接

扫一扫

专栏目录