7.5-7.6Web作业

最新推荐文章于 2024-11-04 17:05:06 发布

hdlaichi_

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量50

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/hdlaichi_/article/details/131649442

版权

该文章展示了一个基础的HTML网页结构，包括一个包含logo、导航菜单和搜索栏的头部，以及一个两列布局的底部区域。网页使用CSS进行样式设置，如颜色、大小和对齐方式，且链接未加下划线，鼠标悬停时有字体大小和背景色变化的效果。

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

目标：简单制作一个网页界面

如图所示

全部代码

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

        .box{
            width: 1226px;
            height: 548px;
            background-color: antiquewhite;
            margin: auto;
        }

        .up{
            width: 1226px;
            height: 88px;
            background-color: aliceblue;
            display: flex;
        }

        .up1{
            width: 88px;
            height: 88px;
            padding: 5px;
        }

        .up2{
            width: 900px;
            height: 88px;
        }

        .up2 ul{
            display: flex;
            justify-content: space-around;
            margin-left: 150px;
        }

        .up2 li{
            list-style: none;
            font-size: small;
            line-height: 88px;
        }

        .up3{
            width: 200px;
            height: 88px;
            line-height: 88px;
            text-align: center;
        }

        .bottom{
            width: 1226px;
            height: 460px;
            background-color: azure;
            display: flex;
        }

        .bottom1{
            width: 234px;
            height: 460px;
            background-color: gray;
        }

        .bottom ul{
            padding-top: 21px;
        }

        .bottom li{
            /* position: absolute; */
            width: 234px;
            height: 42px;
            list-style: none;
            line-height: 42px;
            padding-left: 40px;
        }
        

        a{
            text-decoration: none;
            color: black;
        }

        .bottom li:hover{
            font-size: larger;
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="up">
            <div class="up1"><img src="./images/xiaomi.jpg" alt="" width="70px" height="70px"></div>
            <div class="up2">
                <ul>
                    <li><a href="#">Xiaomi手机</a></li>
                    <li><a href="#">Redmi手机</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>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="up3"><input type="text">搜索</div>
        </div>
        <div class="bottom">
            <div class="bottom1">
                <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>
                    <li><a href="#">健康 儿童</a></li>
                    <li><a href="#">生活 箱包</a></li>
                    <li><a href="#">智能 路由器</a></li>
                    <li><a href="#">电源 配件</a></li>
                </ul>
            </div>
            <div class="bottom2">
                <img src="./images/xiaomizhuye.png" alt="" width ="992px" height="460px">
            </div>
        </div>
    </div>
</body>
</html>

最终效果图