全球I Wanna - 开发日记1 主页设计

最新推荐文章于 2025-04-07 09:41:04 发布

魔方12139

最新推荐文章于 2025-04-07 09:41:04 发布

阅读量184

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_56940320/article/details/125017519

版权

本文介绍如何使用HTML和CSS创建一个包含导航链接的网页标题栏，包括样式调整和响应式设计技巧。

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

　　主页是进入一个网站后最先到的地方。在主页应该介绍这个网站能做什么，以及设置其他页面的入口。

标题栏

　　主页需要做一个标题栏。其实不只是主页，每个页面都需要。标题栏上应该有各种功能页面的入口，点击即可进入。

　　标题栏代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>全球I Wanna</title>
        <style>
            #header {
                height: 60px;
                width: 100%;
                background-color: #212529;
            }
            body {
                margin: 0px;
            }
            ul {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
            ul li {
                display: inline-block;
                width: 100px;
                height: 60px;
                line-height: 60px;
                text-align: center;
            }
            ul li a {
                display: block;
                text-decoration: none;
                color: white;
            }
            ul li a:hover {
                background-color: black;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <ul>
                <li>
                    <a href="/play/">玩I wanna</a>
                </li>
                <li>
                    <a href="/make/">做I wanna</a>
                </li>
            </ul>
        </div>
        全球I Wanna，一个玩I wanna和做I wanna的地方
    </body>
</html>

　　效果如下：

　　用一个<div>放在页面最上面，背景为暗灰色，来充当标题栏。然后在里面放一个无序列表，每个列表元素里放一个按钮。因为我的目的是点击按钮跳转页面，所以用<a>元素定义超链接。

　　标题栏的宽度应该和页面的宽度一样，所以用width: 100%来实现。

　　因为body四周会默认有外边距，也就是margin值（之前修改的时候是上下左右各8px），而标题栏又在body里，所以标题栏四周会有8px的白边。用CSS改变body的外边距为0，这样标题栏就能紧贴在页面上、左、右了。

　　用<ul>元素做列表也会存在一定问题，因为它里面的元素前面都会自带一个黑点，并且会有默认的外边距和内边距（padding）值。解决方法还是用CSS，list-style: none能让元素前面没东西。它其实是设置了list-style-type的值为none。

　　<li>元素是块（block）元素，也就是会自己另起一行，并且让之后的元素也另起一行，而我需要让它们在标题栏上横向排列显示，所以用CSS把它改成内联块（inline-block）元素。内联（inline）元素的特点是不占一整行，只占必要的位置，但是不能设置尺寸、边距等；而内联块元素的特点是既不会占一整行，又可以设置尺寸和边距。

　　要让按钮上的字在列表元素里水平、竖直居中，需要设置text-align: center，并且让line-height和元素高度一样。

　　<a>本来是内联元素，要让它占据列表元素里的全部位置，需要把它改成块元素。另外还需要用text-decoration: none去掉它的下划线，然后让里面的字变成白色，因为标题栏背景是暗灰色。

　　为了让用户在鼠标移过按钮时给出提示，要修改a:hover，也就是鼠标移过时的a样式，把背景色改成另一种颜色。这里改成纯黑色。

　　这样网站的标题栏就做好了。再加上一个简短的说明，主页就算完成了。当然以后还要再做改进，比如把简短说明弄得高级一点，以及在用户登录功能完成之后把入口也加上。

杂谈

　　学校到底什么时候才能解除封闭，我什么时候才能坐在餐厅吃饭...