css 练习1

Ll Lin

已于 2023-11-23 16:06:34 修改

阅读量32

点赞数

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

于 2023-07-25 19:07:53 首次发布

本文链接：https://blog.csdn.net/m0_74852435/article/details/131924273

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.五彩导航

html：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./五彩导航.css">
</head>

<body>
    <a href="#" class="a1">
        五彩导航 
        <div class="box1"></div> 
    </a>

    <a href="#" class="a2">
        五彩导航 
        <div class="box2"></div> 
    </a>

    <a href="#" class="a3">
        五彩导航
        <div class="box3"></div>
    </a>

    <a href="#" class="a4">
        五彩导航 
        <div class="box4"></div> 
    </a>

</body>

</html>

css：

a {
    text-decoration: none;
    color: black;
    display: inline-block;
    width: 120px;
    height: 58px;
    background-color: aqua;
    text-align: center;
    line-height: 50px;
}

.a1 {
    position: relative;
    background-image: url(../images/五彩导航/bg1.png);
}

.a2 {
    position: relative;
    background-image: url(../images/五彩导航/bg2.png);
}

.a3 {
    position: relative;
    background-image: url(../images/五彩导航/bg3.png);
}

.a4 {
    position: relative;
    background-image: url(../images/五彩导航/bg4.png);
}

.a1:hover {
    background-image: url(../images/五彩导航/bg5.png);
}

.a1:hover .box1 {
    display: block;
}

.a2:hover {
    background-image: url(../images/五彩导航/bg6.png);
}

.a2:hover .box2 {
    display: block;
}

.a3:hover {
    background-image: url(../images/五彩导航/bg7.png);

}

.a3:hover .box3 {
    display: block;
}

.a4:hover {
    background-image: url(../images/五彩导航/bg8.png);
}

.a4:hover .box4 {
    display: block;
}

div {
    display: none;
    position: absolute;
    bottom: -120px;
    width: 120px;
    height: 120px;
    background-color: pink;
}

2.商品简介图

html：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./商品图.css">
</head>

<body>
    <div class="box">
        <a href="#">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202305241112_ecb14876904f09f3cbc605350a02eff0.png?thumb=1&w=250&h=250&f=webp&q=90" alt="" width="160px" height="160px">
            <h3>Xiaomi Civi 3</h3>
            <p>仿生双眸&nbsp;天生双色</p>
            <div>2499元起</div>
        </a>
    </div>
</body>

</html>

css：

.box {
    width: 234px;
    height: 300px;
    background-color: pink;
    text-align: center;
}

a {
    text-decoration: none;

}

h3 {
    color: black;
    font-size: 14px;
    font-weight: 400;
}

.box a p {
    font-size: 12px;
    color: #B0B0B0;
}

.box a div {
    font-size: 14px;
    color: orange;
}