Web前端学习知识点总结（五）qq导航条案例，使用min-width解决留白

最新推荐文章于 2023-02-09 20:20:45 发布

Le`soleil

最新推荐文章于 2023-02-09 20:20:45 发布

阅读量583

点赞数

分类专栏： Web前端文章标签： html css html5 css3

本文链接：https://blog.csdn.net/weixin_45118229/article/details/109190472

版权

Web前端专栏收录该内容

20 篇文章 2 订阅

订阅专栏

系列文章目录

文章目录

系列文章目录
前言
QQ导航条案例
- 1.外部CSS引入
- 2.html界面

前言

关于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>