文章目录
- 一、案例效果
- 二、核心要点说明
- 1、网页默认样式
- 2、盒子模型居中显示
- 3、设置渐变背景
- 4、设置列表浮动
- 5、设置文本水平垂直居中
- 6、设置链接文本样式
- 7、设置鼠标经过的样式
- 三、完整代码示例
一、案例效果
实现下面的案例效果 :
二、核心要点说明
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>显示效果 :
鼠标移动到第一个选项后的效果 ;
