前端学完HTML+CSS 自己动手写出QQ官网导航栏

最新推荐文章于 2024-05-12 22:24:31 发布

Dowell__

最新推荐文章于 2024-05-12 22:24:31 发布

阅读量2.1k

点赞数 9

分类专栏：前端笔记文章标签： html css 前端 1024程序员节

本文链接：https://blog.csdn.net/qq_50485559/article/details/120943513

版权

前端笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML+CSS实现QQ头部栏

一、找到QQ官网界面

在浏览器搜索QQ，找到QQ官网

在这里插入图片描述

我们做的就是QQ官网的头部内容

二、准备

(一)、创建一个index.html文件编写html代码

(二)、建一个css目录，里面放style.css文件编写css代码

(三)、创建images目录存放图片

在这里插入图片描述

1、截取QQlogo图片

找到QQ官网，右击->检查->点击图片第1步->将鼠标放在第2步位置，查看QQlogo图片的大小，然后截取QQlogo的图片

2、去掉图片背景

新建一个pptx文件，将图片粘贴上去，点击设置透明色，点击图片背景的地方，保存图片，将图片放在桌面上，重命名为1.png

3、将图片保存到images目录中

点击images目录，ctrl+v就好了

三、编写HTML代码

(一)观察所需要编写的界面

1、QQlogo

2、列表：首页、下载、动态

3、空白栏填充

4、功能栏：注册

5、工具栏：QQ会员、QQ安全、登录

(二)编写

1、查看QQ官网标题

将Title改为I’m QQ-每一天，乐在沟通

2、通过link标签连接style.css文件

<link rel="stylesheet" href="css/style.css">

3、头部栏

<head>
    <meta charset="UTF-8">
    <title>I'm QQ-每一天，乐在沟通</title>
    <link rel="stylesheet" href="css/style.css">
</head>

4、body栏

<body>    
<div>
    <!--头部-->
    <header class="nav-header">
        <div class="nav-contain">
            <a href="https://im.qq.com/index" class="nav-logo"><img src="images/1.png" width="106" height="76"></a>
            <nav class="nav-top">
                <ul>
                    <li><a href="https://im.qq.com/index">首页</a></li>
                    <li><a href="https://im.qq.com/download">下载</a></li>
                    <li><a href="https://im.qq.com/news">动态</a></li>
                </ul>
            </nav>
            <div class="nav-fill"></div>
            <div class="tools-top">
                <a href="https://ssl.zc.qq.com/v3/index-chs.html" class="tools-login">注册</a>
            </div>
            <div class="tools-right">
                <ul>
                    <li><a href="https://vip.qq.com/">QQ会员</a></li>
                    <li><a href="https://aq.qq.com/cn2/index">QQ安全</a></li>
                    <li><a href="">登录</a></li>
                </ul>
            </div>
        </div>
    </header>
</div>
</body>

四、编写CSS代码

1、初始化

*{
    /*初始化边距*/
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;/*无下划线*/
}

2、界面头部栏

渐变颜色可以去https://www.grabient.com/(干货)

.nav-header{
    height: 75px;
    width: 100%;
    /*渐变颜色*/
    background-color: #8EC5FC;
    background-image: linear-gradient(318deg, #8EC5FC 0%, #ffffff 100%);
}
.head-contain{
    width: auto;
    height:75px;
}

3、排版所有版块

.nav-logo,.nav-top,.nav-top li,.nav-fill,.tools-top,.tools-right,.tools-right li{
    height: 75px;
    display: inline-block;
    vertical-align: top;/**/
}
.nav-top li,.tools-top a,.tools-right li{
    width: 75px;
    line-height: 75px;
}

4、设置logo图片

.nav-logo{
    padding-left: 300px;
}

5、设置列表

.nav-top{/*调整边距*/
    padding-left: 18px;
}
.nav-top li a{
    text-align: center;
    display: block;
    color: black;
}
.nav-top li a:hover{/*鼠标悬停*/
    background: #04a8cb;
}

6、填充空白块，更美观

.nav-fill{
    padding-left: 250px;
}

7、注册栏

.tools-top a{
    margin-top: 18px;
    width: 96px;
    height: 39px;
    line-height: 39px;
    border-radius: 25px;
    text-align: center;
    display: block;
    font-weight: bold;
    color: white;
    background: #00bce5;
}

8、工具栏

.tools-right{/*调整边距*/
    padding-left: 30px;
}
.tools-right li a{
    font-size: small;
    color: black;
}
.tools-right li a:hover{/*鼠标悬停*/
    color: #02d3ff;
}

五、优化

将QQ官网各项功能的网址复制粘贴到a标签的href里(我的已经在html代码里了)

六、运行效果

在这里插入图片描述

Dowell__

关注

9
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
前端学完HTML+CSS 自己动手写出QQ官网导航栏

HTML+CSS实现QQ头部栏一、找到QQ官网界面在浏览器搜索QQ，找到QQ官网我们做的就是QQ官网的头部内容二、准备(一)、创建一个index.html文件编写html代码(二)、建一个css目录，里面放style.css文件编写css代码(三)、创建images目录存放图片1、截取QQlogo图片找到QQ官网，右击->检查->点击图片第1步->将鼠标放在第2步位置，查看QQlogo图片的大小，然后截取QQlogo的图片2、去掉图片背景新建一个pptx文件，将图
复制链接

扫一扫