【前端】考拉海购美妆板块（flex布局+＜li＞＜a＞＜/a＞＜li＞的使用

xxxxbubble

已于 2022-11-05 14:25:12 修改

阅读量168

点赞数

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

于 2022-11-05 14:14:07 首次发布

本文链接：https://blog.csdn.net/weixin_51508523/article/details/127702718

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

考拉海购美妆板块练习
- HTML
- CSS

考拉海购美妆板块练习

HTML

创建div包含这个区域
加入包含img的a标签
建立ul li，每一个li里面包含a

<!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>
    <link rel="stylesheet" href="reset.css">
</head>
<body>

    <div class="beautSection">
        <a href="#">
            <img src="./beauty.jpg">
        </a>
        
            <ul>
                <li><a href="#">精致护肤</a></li>
                <li><a href="#">人气面膜</a></li>
                <li><a href="#">大牌彩妆</a></li>
                <li><a href="#">防晒修护</a></li>
                <li><a href="#">迷人香氛</a></li>
                <li><a href="#">面部精华</a></li>
            </ul>
      
    </div>
    
</body>
</html>

CSS

父级div class=“beautySection”
padding margin均设为0，设置宽高，overflow设为hidden
position：relative，方便后续子级使用绝对定位。
img宽高设为100%
vertal-align设为middle，因为自动对齐父元素的基线，当line-height到达一定高度时下方的距离就会存在，详细解释
ul–>li–>a–>/a–>/li–>/ul顺序
利用ul定位和flex布局，ul的position设为absolute，脱离标准流，因为父元素的position是relative，不是static，即可堆叠在其他元素上（在该例子中可堆叠在img上），相对最近的非static元素调整距离
可跳过不对li进行样式设计
将a设置为块级元素，即可设置宽高、padding等属性，才可后续实现光标悬浮在上面改变颜色。

@charset "utf-8";
body{
    padding: 0;
    margin: 0;
}

.beautSection{
    display: inline-block;
    position: relative;
    background-color: #f00;
    width: 330px;
    height: 541px;
    overflow: hidden;
}




.beautSection ul{
    list-style: none;
    position: absolute;
    bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-evenly;
    
    padding: 0;
    margin: 0;
    
}



.beautSection ul li a{
    display: inline-block; /*将<a>设置为块级元素才可以设置其他属性 */
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #eee;
    font-size: 12px;
    width: 60px;
    padding: 11px;
    border-radius: 40px;
    text-decoration: none;
    height: 18px; 
    text-align: center;
    color: #333;
    margin-top:  10px ;
    box-shadow:  0 0 1px rgb(0 0 0 / 10%)
}

.beautSection img{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.beautSection ul li a:hover{
    
    color: #f00;
    background-color: gainsboro;
    
    
}