前端学完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文件，将图片粘贴上去，点击设置透明色，点击图片背景的地方，保存图片，将图片放在桌面上，重命名为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="data: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代码里了)

六、运行效果

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

阴阳师官网导航栏 html+css
阴阳师官网导航栏通过css html实现阴阳师官网的顶部导航栏具体样式下拉列表下拉列表的实现下面一起看看代码 <div class="header">< ...
前端实现小米官网导航栏的实现主要通过HTML+CSS完成效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显
话不多说直接上代码首先看看小米商城的导航栏,如图: 通过实际测试可以知道,服务和社区不属于下拉菜单,除了这两个,剩下的全是下拉菜单,想成了一个下拉菜单组,一旦鼠标进入下拉菜单组,那么就会有下拉效果, ...
html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌握HTML网页设计前端盒子的布局.嵌套,及css效果的使用... 微信官网首页主要有以下几个需要关注的 ...
CSS_腾讯QQ官网，新浪官网，网易官网，淘宝官网之css初始化代码
CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...
手把手带你写米课官网
手把手带你写米课官网人生没有白走的路,每一步都算数,大家好,我是小王,今天,手把手教你写一个米课官网原创不易,希望大家多多支持! 需要源代码或者素材的评论区留言.大家记得关注我哦!我会不定期的跟大家 ...
html项目_学完html+css就可以做的前端项目实战
爱创课堂专业前端培训微信:haomei0452 前端资料免费分享平台关注博雅互动项目预览: 一.项目搭建 css部署:一定注意css引入顺序1 清除默认样式css文件 reset.css2 可以 ...
《前端框架开发技术》HTML+CSS+JavaScript (站酷静态页面官网7页)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
只学2个月编程能写出什么代码？
2019独角兽企业重金招聘Python工程师标准>>> 俗话说得好: 光说不练假把式编程界也有句名言: Talk is cheap, show me the code. 关注我们编 ...

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

HTML+CSS实现QQ头部栏

一、找到QQ官网界面

二、准备

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

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

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

1、截取QQlogo图片

2、去掉图片背景

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

三、编写HTML代码

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

1、QQlogo

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

3、空白栏填充

4、功能栏：注册

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

(二)编写

1、查看QQ官网标题

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

3、头部栏

4、body栏

四、编写CSS代码

1、初始化

2、界面头部栏

3、排版所有版块

4、设置logo图片

5、设置列表

6、填充空白块，更美观

7、注册栏

8、工具栏

五、优化

六、运行效果

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

最新文章

热门文章

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

HTML+CSS实现QQ头部栏

一、找到QQ官网界面

二、准备

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

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

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

1、截取QQlogo图片

2、去掉图片背景

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

三、编写HTML代码

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

1、QQlogo

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

3、空白栏填充

4、功能栏：注册

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

(二)编写

1、查看QQ官网标题

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

3、头部栏

4、body栏

四、编写CSS代码

1、初始化

2、界面头部栏

3、排版所有版块

4、设置logo图片

5、设置列表

6、填充空白块，更美观

7、注册栏

8、工具栏

五、优化

六、运行效果

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

最新文章

热门文章

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

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