前端学习-第一阶段-day06-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34723035/article/details/110009211

本文分享了三个网页设计与交互的实例，包括效果展示、代码实现和功能细节。第一部分介绍了如何使用HTML/CSS创建响应式布局，第二部分展示了如何通过CSS hover触发隐藏内容，以及第三部分探讨了JavaScript在呈现专业服务优势中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今日练习

练习一

效果图

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .clearfix::after,.clearfix::before{
            content: "";
            display: block;
            clear: both;
        }
        a{
            text-decoration: none;
            color: black;
        }

        .box {
            position: relative;
            margin: 100px auto;
            width: 900px;
            height: 200px;
            /* background-color: rgb(13, 17, 236); */
        }

        .box1 {
            width: 220px;
            height: 90px;
            /* background-color: blueviolet; */
            border-right: 1px solid #cccccc;
            border-bottom: 1px solid #cccccc;
            float: left;
            
        }
        .box1 img{
            line-height: 90px;
            margin-top: 20px;
            margin-left: 35px;
            float: left;
        }
        .box1 span{
            margin-top: 35px;
            margin-left: 20px;
            float: left;
        }
        .box1-1{
            position: absolute;
            width: 220px;
            height:90px;
            background-color:#f682397a;
            color: white;
            text-align: center;
            font-size: 13px;
            display: none;
        }
        .box1:hover .box1-1{
            display:block;         
        }
        .font-box{
            margin: 20px;
        }
        .font-border{
            position: absolute;
            left: 0;
            right: 0;
            bottom:8px;
            margin: auto;
            width: 95px;
            height: 25px;
            border: 1px solid white;
            border-radius: 25px;
            line-height: 25px;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <a href="">
            <div class="box1 clearfix">
                <img src="./img/作业1.png" alt="">
                <span>推荐就业</span>
                <div class="box1-1">
                    <div class="font-box">一地学习全国就业</div>
                    <div class="font-box font-border">查看详情</div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="box1 clearfix">
                <img src="./img/作业1.png" alt="">
                <span>推荐就业</span>
                <div class="box1-1">
                    <div class="font-box">一地学习全国就业</div>
                    <div class="font-box font-border">查看详情</div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="box1 clearfix">
                <img src="./img/作业1.png" alt="">
                <span>推荐就业</span>
                <div class="box1-1">
                    <div class="font-box">一地学习全国就业</div>
                    <div class="font-box font-border">查看详情</div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="box1 clearfix">
                <img src="./img/作业1.png" alt="">
                <span>推荐就业</span>
                <div class="box1-1">
                    <div class="font-box">一地学习全国就业</div>
                    <div class="font-box font-border">查看详情</div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="box1 clearfix">
                <img src="./img/作业1.png" alt="">
                <span>推荐就业</span>
                <div class="box1-1">
                    <div class="font-box">一地学习全国就业</div>
                    <div class="font-box font-border">查看详情</div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="box1 clearfix">
                <img src="./img/作业1.png" alt="">
                <span>推荐就业</span>
                <div class="box1-1">
                    <div class="font-box">一地学习全国就业</div>
                    <div class="font-box font-border">查看详情</div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="box1 clearfix">
                <img src="./img/作业1.png" alt="">
                <span>推荐就业</span>
                <div class="box1-1">
                    <div class="font-box">一地学习全国就业</div>
                    <div class="font-box font-border">查看详情</div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="box1 clearfix">
                <img src="./img/作业1.png" alt="">
                <span>推荐就业</span>
                <div class="box1-1">
                    <div class="font-box">一地学习全国就业</div>
                    <div class="font-box font-border">查看详情</div>
                </div>
            </div>
        </a>
        



    </div>
</body>

</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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {

            text-decoration: none;
            color: #fcfcfc;
            font-size: 15px;
            text-align: center;
            font-weight: 900;
        }

        .box {
            
            margin: 100px auto;
            height: 392px;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }

        .title-size {
            margin-top: 25px;
            margin-bottom: 15px;
            height: 40px;
            text-align: center;
            font-size: 25px;
            color: #494c4d;
        }

        .backgroung-box {
            /* width: 715px; */
            height: 300px;
            background-color: #373d41;
        }

        .pic-box {
            margin: 0 auto;
            width: 680px;
            height: 300px;
            /* background-color: blue; */
        }

        .pic-box1 {
            position: relative;
            width: 170px;
            height: 300px;
            float: left;
            
        }

        .pic-box1-1 {
            width: 170px;
            height: 300px;
            background-color: brown;
            background: url(./img/作业2.jpg) no-repeat;
            overflow: hidden;
            /* border: 1px solid black; */
        }
        .font-box1{
            margin-top: 200px; 
            color: #f6f6f6;   
        }
        .font-box2{
            margin-top: 10px;
            font-size: 12px;  
            font-weight: 400; 
            color: #c3c4c5; 
        }
        .cover{
            position: absolute;
            margin-top: -300px;
            width: 100%;
            height: 300px;
            background-color:#2f9cb477;
            display: none;
        }
        .pic-box1:hover .cover{
            display: block;
        }
        .pic-box1:hover .font-box1 {
            visibility: hidden;
        }
        .pic-box1:hover .font-box2 {
            visibility: hidden;
        }
        .cover-font1{
            margin-top: 150px;
            margin-bottom: 10px;
            color: white;
        }
        .cover-font2{
            font-weight: 400;
            font-size: 12px;
            color: white;
        }
        .cover-border{
            margin: 0 auto;
            margin-top: 25px;
            width: 85px;
            height: 24px;
            border: 1px solid white;
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            text-align: center
            
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title-size">品牌优势</div>
        <div class="backgroung-box">
            <div class="pic-box">
                <div class="pic-box1">
                    <a href="">
                        <div class="pic-box1-1">
                            <div class="font-box1">一站式专属服务</div>
                            <div class="font-box2">全国470家直营分部</div>
                        </div>
                        <div class="cover">
                            <div class="cover-font1">专业深度指导</div>
                            <div class="cover-font2">哥伦比亚资深留美专家</div>
                            <div class="cover-border">查看详情</div>
                        </div>
                    </a>
                </div>
                <div class="pic-box1">
                    <a href="">
                        <div class="pic-box1-1">
                            <div class="font-box1">一站式专属服务</div>
                            <div class="font-box2">全国470家直营分部</div>
                        </div>
                        <div class="cover">
                            <div class="cover-font1">专业深度指导</div>
                            <div class="cover-font2">哥伦比亚资深留美专家</div>
                            <div class="cover-border">查看详情</div>
                        </div>
                    </a>
                </div>
                <div class="pic-box1">
                    <a href="">
                        <div class="pic-box1-1">
                            <div class="font-box1">一站式专属服务</div>
                            <div class="font-box2">全国470家直营分部</div>
                        </div>
                        <div class="cover">
                            <div class="cover-font1">专业深度指导</div>
                            <div class="cover-font2">哥伦比亚资深留美专家</div>
                            <div class="cover-border">查看详情</div>
                        </div>
                    </a>
                </div>
                <div class="pic-box1">
                    <a href="">
                        <div class="pic-box1-1">
                            <div class="font-box1">一站式专属服务</div>
                            <div class="font-box2">全国470家直营分部</div>
                        </div>
                        <div class="cover">
                            <div class="cover-font1">专业深度指导</div>
                            <div class="cover-font2">哥伦比亚资深留美专家</div>
                            <div class="cover-border">查看详情</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</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>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .clearfix::before,.clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
            position: relative;
            margin: 100px auto;
            width: 590px;
            height: 220px;
            background-color: burlywood;
        }
        .box span{
            font-size: 20px;
        }
        .pic-box{
            position: absolute;
            margin-top: 10px;
            width: 190px;
            height: 140px;
            background-color: darkblue;
            overflow: hidden;
            /* float: left; */
           
        }
        p{width: 190px;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
        }
        .cover{
            position: absolute;
            margin-top: 8px;
            width: 190px;
            height: 100px;
            background-color:#00c38e;
            transition:0.5s linear;
            
        }
        .pic-box:hover .cover{
            margin-top: -94px;

        }
        .font-box{
            margin: 0 auto;
            margin-top: 5px;
            width: 152px;
            font-size: 12px;
            color: white;
            text-align: center;
        }
        .font-border{
            margin: 0 auto;
            margin-top: 15px;
            width: 50px;
            height: 20px;
            border: 1px solid white;
            font-size: 12px;
            color: white;
            text-align: center;
            line-height: 20px;

        }
        .pic-box-1{
            margin-left: 200px;
        }
        .pic-box-2{
            margin-left: 400px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>留学活动</span>
        <div class="pic-box">
            <a href="">
                <div><img src="./img/作业4.png" alt=""></div>
                <p>中科院、设计思维、两场高质</p>
            </a>
            <a href=""><div class="cover">
                <div class="font-box">中科院、设计思维、两场高质量体验美国</div>
                <div class="font-border">详细</div>
            </div></a>
        </div>
        <div class="pic-box pic-box-1">
            <a href="">
                <div><img src="./img/作业4.png" alt=""></div>
                <p>中科院、设计思维、两场高质</p>
            </a>
            <a href=""><div class="cover">
                <div class="font-box">中科院、设计思维、两场高质量体验美国</div>
                <div class="font-border">详细</div>
            </div></a>
        </div>
        <div class="pic-box pic-box-2">
            <a href="">
                <div><img src="./img/作业4.png" alt=""></div>
                <p>中科院、设计思维、两场高质</p>
            </a>
            <a href=""><div class="cover">
                <div class="font-box">中科院、设计思维、两场高质量体验美国</div>
                <div class="font-border">详细</div>
            </div></a>
        </div>
    </div>
</body>
</html>