【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )

韩曙亮

发布于 2023-03-25 11:42:31

2.4K0

发布于 2023-03-25 11:42:31

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、案例效果

实现下面的案例效果 :

二、核心要点说明

1、网页默认样式

所有的网页 , 基本都需要设置如下默认样式 ,

清除默认的内外边距
清除列表默认样式 : 主要是列表项前面的圆点
设置总体背景 : 为 body 标签设置背景颜色或图片即可
图片自适应填充 : 设置 <img> 标签的内容宽度为 100% 即可 , 目的是令图片自适应缩放 ;

		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 清除列表默认样式 ( 主要是前面的点 ) */
		li {
			list-style: none;
		}
		
		/* 设置总体背景 */
		body {
			background-color: #f4f4f4;
		}
		
		/* 插入图片自适应 */
		img {
			width: 100%;
		}

2、盒子模型居中显示

盒子模型居中显示 : 此处涉及到了顶部的 Banner 图片 , 和下方的导航栏需要居中显示 , 设置 margin: auto; 和 margin: 0 auto; 都可以实现该效果 ;

		/* 顶部的 Banner 条样式 */
		.banner {
			/* 设置顶部 Banner 尺寸 */
			width: 760px;
			height: 150px;
			
			/* 背景颜色方便调试 */
			background-color: pink;
			
			/* 盒子模型 浏览器页面 居中设置 */
			margin: auto;
		}
		.nav {
			/* 设置盒子模型尺寸 */
			width: 760px;
			height: 32px;
			
			/* 盒子模型 浏览器页面 居中设置 */
			margin: 0 auto;
			
			/* 设置渐变背景 , 在 水平方向 平铺 */
			background: url(images/nav_bg.jpg) repeat-x;
		}

3、设置渐变背景

设置渐变背景 , 可设置

样式的小图片 , 让其在水平方向重叠平铺 ,

即可得到下面的连续背景 :

代码示例 :

		.nav {
			/* 设置盒子模型尺寸 */
			width: 760px;
			height: 32px;
			
			/* 盒子模型 浏览器页面 居中设置 */
			margin: 0 auto;
			
			/* 设置渐变背景 , 在 水平方向 平铺 */
			background: url(images/nav_bg.jpg) repeat-x;
		}

4、设置列表浮动

列表项 <li> 默认垂直方向排列 :

设置了列表项浮动 , 就可以变为行内块元素 , 在一行中水平排列 ;

		.nav ul li {
			/* 设置无序列表项浮动 这样就可以变为 行内块元素显示样式 */
			float: left;
		}

如果一行排满则自动换行 , 通过精密计算 , 可以实现网格样式的排列 ;

5、设置文本水平垂直居中

设置 text-align: center; 样式 , 可以使文本水平居中 ;

设置行高 = 内容高度 , 可以设置文字垂直居中 ;

			/* 设置链接尺寸 */
			width: 80px;
			height: 32px;
			
			/* 行高 = 内容高度 , 设置文字垂直居中 */
			line-height: 32px;
			
			/* 水平居中 */
			text-align: center;

6、设置链接文本样式

链接一般需要设置字体大小 , 颜色 , 取消文本装饰 ( 链接的下划线 ) ;

			/* 设置字体大小 */
			font-size: 12px;
			
			/* 取消链接文字的下划线 */
			text-decoration: none;
			
			/* 设置文字颜色 */
			color: #40510a;

7、设置鼠标经过的样式

使用伪类选择器 , 这里使用的是链接伪类选择器 , 设置的是链接在鼠标经过时的样式 ;

		/* 设置鼠标移动到链接上的样式 */
		.nav ul li a:hover {
			/* 鼠标移动上去切换一个背景图片 */
			background-image: url(images/button2.jpg);
		}

三、完整代码示例

完整代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动示例 - 导航栏示例</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 清除列表默认样式 ( 主要是前面的点 ) */
		li {
			list-style: none;
		}
		
		/* 设置总体背景 */
		body {
			background-color: #f4f4f4;
		}
		
		/* 插入图片自适应 */
		img {
			width: 100%;
		}
		
		/* 顶部的 Banner 条样式 */
		.banner {
			/* 设置顶部 Banner 尺寸 */
			width: 760px;
			height: 150px;
			
			/* 背景颜色方便调试 */
			background-color: pink;
			
			/* 盒子模型 浏览器页面 居中设置 */
			margin: auto;
		}
		.nav {
			/* 设置盒子模型尺寸 */
			width: 760px;
			height: 32px;
			
			/* 盒子模型 浏览器页面 居中设置 */
			margin: 0 auto;
			
			/* 设置渐变背景 , 在 水平方向 平铺 */
			background: url(images/nav_bg.jpg) repeat-x;
		}
		.nav ul li {
			/* 设置无序列表项浮动 这样就可以变为 行内块元素显示样式 */
			float: left;
		}
		
		/* 设置无序列表项中的 链接样式 */
		.nav ul li a {
			/* 设置为块级元素 */
			display: block;
			
			/* 设置链接尺寸 */
			width: 80px;
			height: 32px;
			
			/* 行高 = 内容高度 , 设置文字垂直居中 */
			line-height: 32px;
			
			/* 水平居中 */
			text-align: center;
			
			/* 设置按钮背景 */
			background: url(images/button1.jpg) no-repeat;
			
			/* 设置字体大小 */
			font-size: 12px;
			
			/* 取消链接文字的下划线 */
			text-decoration: none;
			
			/* 设置文字颜色 */
			color: #40510a;
		}
		
		/* 设置鼠标移动到链接上的样式 */
		.nav ul li a:hover {
			/* 鼠标移动上去切换一个背景图片 */
			background-image: url(images/button2.jpg);
		}
	</style>
</head>
<body>
	<!-- banner 条 -->
	<div class="banner">
		<img src="images/banner.jpg" alt="">
	</div>
	<!-- 导航栏  -->
	<div class="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>
		</ul>
	</div>
</body>
</html>

显示效果 :