系列文章目录
Web前端 学习知识点总结(一)HTML基本标签.
Web前端 学习知识点总结(二)之Form和Css选择器.
Web前端 学习知识点总结(三)Css字体、文本样式以及盒子模型.
Web前端 学习知识点总结(四)之display 和 float.
Web前端 学习知识点总结(五)qq导航条案例,使用min-width解决留白.
Web前端 学习知识点总结(六)定位position.
Web前端 学习知识点总结(七)Css3动画animation.
Web前端 学习知识点总结(八)JavaScript的常用基础.
Web前端 学习知识点总结(九)JavaScript的BOM和DOM基础.
Web前端 学习知识点总结(十)jQuery基础 获取文本和选择器.
Web前端 学习知识点总结(十一)jQuery进阶 动画和节点操作.
Web前端 学习知识点总结(十二)jQuery进阶 表单验证和简单正则表达式.
Web前端 学习知识点总结(十三)学生管理系统案例.
前言
关于HTML和CSS的学习,需要经过不断的练习,不断的模仿以及做好的成品,积极地总结属于自己的经验。
QQ导航条案例
用一个qq导航条的案例来解释。
1.外部CSS引入
在项目的css文件中使用外部css,创建一个.CSS文件。
在css的文档第一句中加入@charset “utf-8”;
最关键的解决留白问题:
当窗口过小的时候,只需要设置出来页面的最小宽度min-width=控件的width即可。
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
body header{
/*复制颜色要加#*/
background-color:#666666;
height: 90px;
/*最大的背景层,设置为最小的min-width*/
min-width: 1100px;
}
#top{
/*规定宽度,并设定auto的margin进行页面的居中操作*/
width: 1100px;
height: 90px;
margin: 0 auto;
/*border: 1px solid red;*/
}
#top img{
height: 100%;
float: left;
}
#top nav{
margin: 0 20px;
/*border: 1px solid red;*/
float: left;
height: 90px;
}
#top nav ul li{
float: left;
list-style: none;
padding: 0 15px;
line-height: 90px;
}
#top nav ul li a{
text-decoration: none;
color: white;
}
#top nav ul li a:hover{
text-decoration: underline;
color: blue;
}
#online :first-child{
line-height: 90px;
/*不需要float float会变成一个行内元素*/
/*float: left;*/
/*去掉下划线*/
text-decoration: none;
/*边界颜色*/
border: 1px solid #FAD65C;
/*撑起来容器,进行扩充*/
padding: 7px 25px;
/*字体大小*/
font-size:14px;
/*圆角效果*/
border-radius:30px ;
color:#FAD65C ;
}
#online :nth-child(2){
line-height: 90px;
/*不需要float*/
/*float: left;*/
text-decoration: none;
border: 1px solid #FAD65C;
/*用padding去撑开*/
padding: 7px 25px;
font-size:14px;
border-radius:30px ;
color:#956709 ;
font-weight: bold;
background-color: #FAD65C;
}
#online a:hover{
line-height: 90px;
text-decoration: underline;
}
/*a的悬浮效果*/
#online a:nth-of-type(1):hover{
color:#956709 ;
background-color: #FAD65C;
}
.clear:after{
content: "";
clear: both;
display: inline-block;
}
2.html界面
使用link href=“css/qq_header.css” rel=“stylesheet” 来外部引入css的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/qq_header.css" rel="stylesheet" />
</head>
<body>
<header>
<div id="top" class="clear">
<img src="img/微信图片_20201012202508.png"/>
<!--元素只是作为标注一个导航链接的区域-->
<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 id="online">
<a href="#">登录</a>
<a href="#">开通超级会员</a>
</div>
</div>
</header>
</body>
</html>
最终效果