CSS基本规则综合应用

最新推荐文章于 2023-06-14 16:07:00 发布

Lucivita

最新推荐文章于 2023-06-14 16:07:00 发布

阅读量170

点赞数

分类专栏： Web前端 html+css 文章标签： css html

本文链接：https://blog.csdn.net/qq_41568313/article/details/112847638

版权

Web前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

html+css

7 篇文章 1 订阅

订阅专栏

一、HTML编码：

1.html设计

分成两个部分，箭头和中间图片内容，先设置好一个，其余样式相同，箭头用img，中间内容放在li中

2.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JD秒杀</title>
    <link rel="stylesheet" href="jd.css">
</head>

<body>
    <div class="seckill">
        <div class="seckill-button-left"></div>
        <div class="seckill-main">
            <ul class="clean">
                <li>
                    <a href="">
                        <img src="img/yf.jpg.webp.jpg" alt="" srcset="">
                        <h6>培蒙2019秋款长袖衬衫男韩版流行男装薄款休闲印花衬衣潮青年寸衫 培蒙-TS8110 41</h6>
                        <div>
                            <span class="price-miaosha">
                                <i>¥</i>
                                <span>39.90</span>
                            </span>
                            <span class="price-origin">
                                <i>¥</i>
                                <span>99.00</span>
                            </span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/qdd.jpg.webp.jpg" alt="" srcset="">
                        <h6>趣多多 香脆曲奇饼干 零食大礼包电商特惠装 香浓巧克力味510g 独立小包分享装</h6>
                        <div class="seckill-item__price">
                            <span class="price-miaosha">
                                <i>¥</i>
                                <span>19.90</span>
                            </span>
                            <span class="price-origin">
                                <i>¥</i>
                                <span>24.50</span>
                            </span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/kt.jpg.webp.jpg" alt="" srcset="">
                        <h6>格力 (GREE) 空气能热水器家用 200升 WiFi智能 电辅速热增容 水温75℃ 水之逸SXTD200LCJW/ED-3(适合3-5人)</h6>
                        <div class="seckill-item__price">
                            <span class="price-miaosha">
                                <i>¥</i>
                                <span>5498.00</span>
                            </span>
                            <span class="price-origin">
                                <i>¥</i>
                                <span>5799.00</span>
                            </span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="img/px.jpg.webp.jpg" alt="" srcset="">
                        <h6>双星男鞋秋季新款软底舒适跑步鞋男士运动休闲鞋子时尚百搭运动鞋男 982018 黑色 42</h6>
                        <div class="seckill-item__price"><span class="price-miaosha">
                                <i>¥</i>
                                <span>89.00</span>
                            </span>
                            <span class="price-origin">
                                <i>¥</i>
                                <span>159.00</span>
                            </span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="seckill-button-right"></div>
    </div>
</body>

</html>

二、css编码：

1.设置通用样式，去除li默认设置：

/* 设置通用样式 */
*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;/* 删除列表小黑点 */
}  
a{
     text-decoration: none;/*删除下划线 */
    color: #595959;/* 设置字体颜色 */
}

2.设置合适的宽高，放于适当位置，消除浮动：

ul{
    width: 62%;
    height: 300px;
    margin: 20px auto;
    border: 1px solid red;
}
ul li{
    float: left;
    width: 20%;
    margin-left: 20px;
    text-align: center;/*垂直居中 */
    margin-top: 40px;
    position: relative; /*相对定位 */
}
/* 消除浮动 */
.clear::after{
    content: "";
    display: block;
    clear: both;
}

3.设置h6标签

设置字体颜色，字体大小，超出部分内容进行省略

ul li h6{
    font-weight: 400;
    color: #595959;
    font-size: 12px;/* 设置字体大小 */
    overflow: hidden; /* 超出长度省略 */
    white-space: nowrap;/* 段落中的文本不进行换行 */
    text-overflow: ellipsis;
    padding-top: 10px;
}
h6:hover{
    color: red;
}

4.设置渐变边框：

ul li:nth-child(-n+4) a::after{
    content: "";
    display: block;
    position: absolute;/* 定位 */
    top: 0;
    left: 170px;
    width: 1px;
    height: 140px;
    margin-left: 20px;
    background:linear-gradient(white,#bbb,white);/* 渐变边框 */
}

5.对盒子进行设置：

div{
    height: 30px;
    line-height: 30px;
    background-color: red;
    margin-top: 10px;
    position: relative;
    border: 1px solid red;
}
div .price-miaosha{
   float: left;
   width: 45%;
   color: white;
}
div .price-origin{
    float: right;
    width: 45%;
    color: #bbb;
    font-size: 12px;
    text-decoration: line-through;  /*添加价格划线 */
    background-color: white;
 }

6.设置小三角：

/* 设置小三角 */
.price-miaosha::after{
    content: "";
    border-color: red transparent transparent transparent;
    border-style: solid;
    border-width:30px 8px 0 0;
    position: absolute;
    top:0px;
    left: 55%;
}

7.对金钱图标进行设置：

i{
     font-size: 12px;
     font-style: normal;
 }

8.设置左右轮播图图标：

/* 设置左边图标 */
 .left{
     float: left;
     width: 40px;
     height: 40px;
     padding-top: 110px;
 }
 /* 设置右边图标 */
 .right{
     float:right;
     width: 40px;
     height: 40px;
     padding-top: 110px;
 }

三、效果图：

Lucivita

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基本规则综合应用

一、HTML编码：1.html设计分成两个部分，箭头和中间图片内容，先设置好一个，其余样式相同，箭头用img，中间内容放在li中2.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
复制链接

扫一扫

专栏目录