admin管理员组

文章数量:1535374

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

本文标签： 官网自己动手htmlcssqq

版权声明：本文标题：前端 学完HTML+CSS 自己动手写出QQ官网导航栏 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726904985a1089731.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。