网页头部制作（不含二级标题）

最新推荐文章于 2024-11-07 19:48:34 发布

九病难祎

最新推荐文章于 2024-11-07 19:48:34 发布

阅读量552

点赞数 15

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

本文链接：https://blog.csdn.net/2302_78953577/article/details/135539573

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先说明一下这个网页是参考的是：盘子女人坊:https://www.pznrfsy.com/

当前这篇的内容只是制作的不含二级标题的网页头部制作，后续将会逐篇来展示首页的后续制作过程。（老师说原网页的的头部在浏览器缩放过程中向两边散开是不专业的，所以这里进行了修改，让其在缩放时向中间靠拢）

下面我将直接上代码，对于一些代码的作用介绍我也写在了注释中，请放心食用！

<!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;
        }
        ul{
            /* 去掉列表符号 */
            list-style: none;
        }
        a{
            /* 去掉a链接默认下划线 */
            text-decoration: none;
        }
        .header{
            background-color: black;
            height: 86px;
        }
        .header-content{
            width: 1200px;
            height: 100%;
            /* 块级元素水平居中 */
            margin: 0 auto;
            background-color: antiquewhite;
        }
        .header-content>.list{
            height: 100%;
            width: 990px;
            background-color: aqua;
        }
        .header-content{
            display: flex;
            /* 水平对齐方式：两端对齐 */
            justify-content: space-between;
            /* 垂直对齐方式：上下居中 */
            align-items: center;
        }
        .list{
            display: flex;
            /* 水平对齐方式：两端对齐 */
            justify-content: space-between;

            /*
            这里的垂直对齐方式注掉是因为我先写的list，后来在写li时给li设置了高度，
            并且li的高度与ul一致,所以这样这样写便没有了效果。
            如果li没有宽高这样写确实可以实现上下居中，
            
            为什么li非要设置宽高呢，是因为业务需要，a标签转换为
            块级元素，其宽高将默认与父元素li保持一致，这样即使
            在后面设置悬浮时，悬浮在li的范围内上也可以点击到a标签。

            垂直对齐方式：上下居中
            align-items: center; 
            */
        }
        .list>li{
            width: 97px;
            height: 100%;
            display: block;
            /* 文本水平居中 */
            text-align: center;
            /* 这里设置行高与高度一致是为了使文本垂直居中 */
            line-height: 86px;
        }
        .list>li a{
            /* 将a标签转换为块级元素,块级元素的特点：宽高默认与父元素一致 */
            display: block;
            /* 字体样式 */
            font-family: "Microsoft YaHei";
            /* 字体大小 */
            font-size: 14px;
            /* 字体颜色 */
            color: white;
        }
        /* 悬浮到li区域，给li加背景颜色 */
        .list>li:hover{
            background-color: rgb(178,131,96,0.5);
        }
        /* 悬浮到a区域，给a更改字体颜色 */
        .list>li:hover a{
            color: rgb(178,131,96);
        }

        .list>li:first-of-type{
            position: relative;
        }
        /*
        给“网站首页”下方设置一条横线
        这里我们当然可以在html中的“网站首页”下方添加一个div，然后在里面添加一条横线，
        但是这样做没有意义，所以我们选择在css中添加一个标签级的样式，这样的效果相同。
        */
        .list>li:first-of-type::after{
            /* 在li的末尾添加一个虚拟元素 */
            display: block;
            content: "";
            width: 60px;
            height: 3px;
            background-color: rgb(178,131,96);
            /* 这里因为是块级元素，位置上需要通过相对于.list>li:first-of-type进行定位 */
            position: absolute;
            left: 20px;
            bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="header">
            <div class="header-content">
                <a href="javascript:location.reload();">
                    <img width="172" height="49" src="https://www.pznrfsy.com/templets/default/static/img/index/logo01.png" alt="盘子女人坊古装摄影">
                </a>
                <ul class="list">
                    <li><a href="javascript:location.reload();">网站首页</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>
    </div>
</body>
</html>

下面是运行后的效果：

这里设置不同的颜色是为了方便调试，这里我们把上述代码中的30,35行代码对于背景颜色的修改删掉即可得到下面的效果：

后续我也将继续发布对这个首页制作的过程。

下面是我的废话环节，可跳过。

后面没有直接把背景色那点直接删掉，反而有多说了几句也是想告诉自己有些事情是一个循序渐进的过程，不可能一蹴而就。这个网页是我在学完css，html，JavaScript之后写的第一个算是比较完整的网页吧，就这一个头部我写了大概有三四遍还是一头雾水，主要是浮动，弹性布局，行级元素，块级元素这些内容还是比较模糊，使用起来还不是很熟练。后面针对这些不是很熟练的部分，我将会会通过写博客的形式进行复习和再精进。

自己跟别人比还是有点笨了，俗话说：人比人,比死人。有所收获就好，最近点浮躁了。