CSS实验案例01QQ会员页面导航

文章目录

CSS实验案例01QQ会员页面导航
- 1初步编写导航栏内容（html文件）
- 2导航栏简要排版
- 3设置按钮样式
- 4设置鼠标悬停变色效果
- 5删除边框
- 6第一次优化

CSS实验案例01QQ会员页面导航

1初步编写导航栏内容（html文件）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>QQ会员</title><link href="css/ctyle.css" rel="stylesheet"/>
</head>
<body>
<div class="wrap"><header class="nav-header"><div class="head-contain"><a href="" class="top-logo"><img src="img/qqvip.png" width="180" height="90"/></a><nav class="top-nav"><ul><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></nav><div class="top-right"><a href="">登录</a><a href="">开通超级会员</a></div></div></header>
</div>
</body>
</html>

2导航栏简要排版

*{padding: 0;margin: 0;
}
a{text-decoration: none;
}
.nav-header{border: 1px solid red;height: 90px;width: 100%;background: rgba(0,0,0,.6);
}
.head-contain{border: 1px solid red;width: 1200px;height: 90px;margin: 0 auto;text-align: center;
}
.top-logo,.top-nav,.top-nav li,.top-right{height: 90px;display: inline-block;vertical-align: top;
}
.top-nav{margin: 0 48px;
}
.top-nav li{line-height: 90px;width: 90px;
}
.top-nav li a{display: block;text-align: center;font-size: 16px;color: #fff;
}
.top-right a{display: inline-block;font-size: 16px;text-align: center;margin-top: 25px;border-radius: 35px;
}

3设置按钮样式


.top-right a:first-of-type{width: 93px;height: 38px;line-height: 38px;color: #fad65c;border: 1px #fad65c solid;
}
.top-right a:last-of-type{width: 140px;height: 40px;font-weight: 700;line-height: 40px;background: #fad65c;color: #986b0d;border: 1px solid red;
}

4设置鼠标悬停变色效果

同时替换了logo，导航栏背景调整为现QQ会员页面导航栏颜色

.top-nav li a:hover{color: #EC3833;
}.top-right a:first-of-type:hover{color: #986b0d;background: #FFE78B;
}.top-right a:last-of-type:hover{background: #FFE48A;
}

5删除边框

6第一次优化

于2.8学习定位和透明度时，突然想起QQ会员导航栏的小作业，因官网有背景图片和透明度的效果，遂优化如下：

具体过程详见原创文章：《CSS学习记录06相对定位、绝对定位、固定定位和z-index》

CSS实验案例01QQ会员页面导航相关推荐

CSS实验案例02简单专业介绍网页
文章目录 CSS实验案例02简单专业介绍网页 2.1CSS 2.2HTML CSS实验案例02简单专业介绍网页 2.1CSS body {/* 主体*/font-size: 24px;text-ali ...
用html做qq会员页面导航,练习1：QQ会员页面导航.html
练习1:QQ会员页面导航 *{ margin: 0px; padding: 0px; } body a:link{ color: white; text-decoration: none; } bod ...
Bootstrap-综合案例-编写课程页面-导航条
第一步:导入bootstrap <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
CSS小案例5：实现导航栏在鼠标滑上去时导航栏的字由英文变为中文的特效
在每个导航栏里放置两个标签,分别存放中文和英文 <li><a href="#"><span>首页</span><i>in ...
用html做qq会员页面导航,untitledQQ会员页面导航3.html
无标题文档 *{ margin: 0px auto; padding: 0px; } div{ margin: 10px; color: white; width: 100%; height: 50p ...
用html做qq会员页面导航,untitledQQ会员页面导航.html
无标题文档 *{ margin: 0px auto; padding: 0px; } div{ margin: 10px; color: white; width: 100%; height: 50p ...
用html做qq会员页面导航,untitledQQ会员页面导航4.html
无标题文档 *{ margin: 0px auto; padding: 0px; } div{ margin: 10px; color: white; width: 100%; height: 50p ...
html5qq会员开通页面,untitledQQ会员页面导航5.html
无标题文档 *{ margin: 0px auto; padding: 0px; } div{ margin: 10px; color: white; width: 100%; height: 50p ...
前端学习——CSS初学__5 CSS引入方式、新闻页面案例及Chrome调试工具
一.CSS引入方式按照CSS书写的位置(或者引入方式)的不同,CSS样式表可以分为三类: 1.行内样式表(行内式) 行内样式表是在元素标签内部的style属性中设定CSS样式,适用于修改简单样式. ...
CSS入门二、美化页面元素
零.文章目录 CSS入门二.美化页面元素 1.字体属性 CSS Fonts (字体)属性用于定义字体系列.大小.粗细.和文字样式(如斜体) (1)字体系列font-family font-family ...

CSS实验案例01QQ会员页面导航

文章目录

CSS实验案例01QQ会员页面导航

1初步编写导航栏内容（html文件）

2导航栏简要排版

3设置按钮样式

4设置鼠标悬停变色效果

5删除边框

6第一次优化

CSS实验案例01QQ会员页面导航相关推荐

最新文章

热门文章