制作主页

最新推荐文章于 2024-09-18 09:47:26 发布

夏炎正好眠

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量53

点赞数

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

本文链接：https://blog.csdn.net/m0_74618370/article/details/131671638

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

要求：

制作如下图的网页

过程：

先用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="xiaomi.css">
</head>
<body>



  <div class="header">
    <!-- 导航栏设置 -->
    <div class="top  head">
        <!-- logo设置 -->
        <div class="logo"><img src="picture/logo.jfif"></div>
       <!-- 右边导航设置 -->
        <div class="text">
            <ul>
                <li></li>
                <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="right">
            <input type="text" placeholder=" 冰箱">
           
            <span>搜索</span>
        </div>
    </div>
</div>
<!-- 主题元素设置 -->
<div class="main">
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/acc4efe480ef8f3f3d46f2aa1fdd9eb8.jpg?thumb=1&w=1931&h=460&f=webp&q=90">

    <!-- 右侧导航栏设置 -->
    <div class="thing">
        <ul>
            <li>
                <a href="#">
                    手机
                </a>
                <span>></span>
            </li>
            <li>
                <a href="#">
                    电视
                </a>
                <span>></span>
            </li>
            <li>
                <a href="#">
                    家电
                </a>
                <span>></span>
            </li>
            <li>
                <a href="#">
                    笔记本 平板
                </a>
                <span>></span>
            </li>
            <li>
                <a href="#">
                 出行 穿戴
                </a>
                <span>></span>
            </li>
            <li>
                <a href="#">
                    耳机 音响
                </a>
                <span>></span>
            </li>
            <li>
                <a href="#">
                    健康 儿童
                </a>
                <span>></span>
            </li>
            <li>
                <a href="#">
                    生活 箱包
                </a>
                <span>></span>
            </li>
            <li>
                <a href="#">
                    智能 路由器
                </a>
                <span>></span>
            </li>
            <li>
                <a href="#">
                    电源 配件
                </a>
                <!-- 设置主题图片左右两侧的小箭头 -->
                <span>></span>
            </li>
        </ul>
    </div>
    <span class="left"><</span>
    <span class="right">></span>
    <div class="circle">
        <span></span>
        <span></span>
        <span></span>
        <span></span>

    </div>


</div>
</body>
</html>

再用css对其布局


        
        /* 全局去除外边距，内边距防止盒子大小和位置被影响 并设置全部盒子的计算大小方式*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            /* 设置所有的li列表都去除前面的标识 */
            list-style: none;
        }

        a {
          /* 设置所有的a链接都去除下划线 */
            text-decoration: none;
        }

        input {
          /* 设置所有的输入框都没有边框样式 */
            outline: none;
        }

        .top{
            /* 对顶部的盒子进行设置 */
            width: 1226px;
            margin: 0 auto;
        }
 /* 设置图片属性 */
        .logo img {
            width: 56px;
            height: 56px;
        }
            /* 设置顶部的各元素 */
        .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
            /* 对ul使用flex布局 */
        .head .text ul {
            display: flex;
        }
        /* 设置外边距，使顶部的元素们间隔距离相等 */
        .head .text ul li {
            margin-right: 30px;
        }
        /* 设置超链接的颜色 */
        .head .text ul a {
            color: black;
        }
            /* 设置鼠标悬停在超链接时的颜色变化 */
        .head .text ul a:hover {
            color: rgb(171, 115, 36);
        }


            /* 设置顶部的搜索框的相对定位 */
        .head .right {
            position: relative;
        }
            /* 设置顶部搜索框的属性 */
        .head .right input {
            width: 245px;
            height: 30px;
            margin-top: 30px;
            border: 1px solid black;
            border-radius: 5px;
        }
            /* 设置顶部导航栏的右侧搜索按钮 */
        .head .right span {
            display: inline-block;
            width: 52px;
            height: 40px;
            line-height: 88px;
            position: absolute;
            right: 0;
        }


            /* 对主题元素进行设置 */
        .main {
            position: relative;
            margin-top: 20px;
        }
            /* 对右侧盒子进行设置 */
        .thing {
            position: absolute;
            top: 0;
            left: 0;
        }
            /*对右侧导航栏进行设置  */
        .thing ul {
            background-color: rgba(143, 140, 140, 0.6);
            width: 234px;
            height: 460px;
             font: 18px;
            padding: 20px 0px;
        }
            /* 对右侧导航栏中各个盒子进行到单独设置 */
        .thing ul li {
            display: flex;
            justify-content: space-between;
            padding: 0px 30px;

        }
            /* 对右侧导航栏中各个链接进行设置 */
        .thing ul li a {
            display: inline-block;
            width: 234px; 
             height: 42px; 
            line-height: 42px;
            color: aliceblue;
        }
            /* 当鼠标停留在右侧链接上时,变色 */
        .thing ul li:hover {
            background-color: orange;

        }

            /* 设置主题图片两侧的小箭头 */
        .main box span {
            display: inline-block;
            width: 41px;
            height: 69px;
            font-size: 30px;

        }
                /* 对左侧小箭头设置 */
        .left {
            position: absolute;
            top: 50%;
            margin-top: -33.5px;
            left: 240px;
        }
            /* 对右侧小箭头设置 */
        .right {
            position: absolute;
            top: 50%;
            margin-top: -33.5px;
            right:20px;

        }
                /* 设置主体右下角的小圆圈 */
        .main .circle {
            width: 200px;
            position: absolute;
            right: -100px;
            bottom: 15px;
        }
             /* 设置小圆圈的样式 */
        .main .circle span {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: rgb(126, 119, 120);
            border-radius: 50%;


        }

效果图如下：