今天还是对属性的扩充,而且做了几种不同效果的导航。
一、空余空间
语法:
- white-space:nowrap; 强制不换行,与html标记 功能一样。
- white-space:pre; 强制不换行,把原标记转换成pre标记的功能。
- white-space:pre-line; | pre-wrap pre-line和pre-wrap区别:line可以合并空格(内容和内容之间打得空格),wrap可以保留,其他的功能是一样的。
二、省略号
可能大家不太理解这里为啥说到省略号,我直接打 ··· 不就好了,其实有时候文本量太多会导致溢出,而我们也不一定能准确获得文本量的多少,这时候通过代码来实现省略号可以避免每个文本更改的麻烦还能使代码执行速度加快(因为文本量的减少)。
实现省略号的条件:
- 元素必须设置宽度 width
- 让文本强制不换行 white-space:nowrap;
- 溢出隐藏 overflow:hidden;
- 出现省略 text-overflow:ellipsis; clip 默认值,不起作用
- 注意:text-overflow属性不能单独使用
补充点:预留字符
- <是小于号 <,>是大于号 >,可以用来实现文本中显示出代码样子,例如:< div > =
<div>
三、元素类型转换
display 可以进行元素类型转换
大概的值:18个
常用的值:
- block 把其他类型转成块级类型 让隐藏的元素显示
- none 隐藏显示的元素
- inline 把其他的类型转成内联类型
- inline-block 把其他的类型转成内联块类型
了解的值:
- list-item 表示列表类型
- table 表示表格类型
- inline-table 表示行内表格类型
- table-cell 单元格
注意:多行文本域默认带有尺寸(样式),所以转成内联依旧不会起作用
大家也可以看看这个,感觉写得挺好的,也正好再复习一遍块级、内联、内联块的区别 https://www.cnblogs.com/lightpro/p/10669892.html
四、导航
1、鼠标悬停切换背景
效果图:
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
ul li{list-style:none;}
a{text-decoration:none;}
.nav1{
width:900px;
height:40px;
background-color:#9a0000;
margin:50px auto;
}
.nav1 li{
height:40px;
line-height:40px;
text-align:center;
padding:0 15px;
float:left;
}
.nav1 li a{
color:#fff;
}
.nav1 li:hover{
background:url(images/an1.png);
}
.nav1 li:hover a{
color:red;
background:url(images/s.png) no-repeat center top;
}
</style>
</head>
<body>
<div class="nav1">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
</ul>
</div>
</body>
</html>
2、切换背景2
效果图:
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
ul li{list-style:none;}
a{text-decoration:none;}
.nav{
width:900px;
height:37px;
background:url(images/bg2.png) ;
margin:50px auto;
}
.nav ul{
margin-left:10px;
}
.nav li{
line-height:30px;
font-size:14px;
padding:0 15px;
float:left;
}
.nav li a{
color:black;
}
.nav li:hover{
height:48px;
background-color:#fbe20c;
margin-top:-12px;
}
.nav li:hover a{
display:block;
line-height:50px;
color:#fff;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">adsadasd</a></li>
<li><a href="#">dsads</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
</ul>
</div>
</body>
</html>
3、背景中文切换英文
效果图:
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
ul li{list-style:none;}
a{text-decoration:none;}
.nav{
width:900px;
height:20px;
border-bottom:8px solid red;
margin:0 auto;
margin-top:100px;
}
.nav ul{
margin-left:10px;
}
.nav li{
width:80px;
height:20px;
text-align:center;
line-height:20px;
margin-right:1px;
background-color:#ccc;
padding:0 15px;
float:left;
}
.nav li a{
color:black;
}
.nav li a b{
display:none;
}
.nav li:hover span{
display:none;
}
.nav li:hover b{
font-weight:normal;
display:block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#"><span>home</span><b>首页</b></a></li>
<li><a href="#"><span>about</span><b>关于</b></a></li>
<li><a href="#"><span>no</span><b>不</b></a></li>
<li><a href="#"><span>hello</span><b>你好</b></a></li>
<li><a href="#"><span>yes</span><b>使得</b></a></li>
<li><a href="#"><span>qqq</span><b>算了</b></a></li>
</ul>
</div>
</body>
</html>