学习前端的第七天

最新推荐文章于 2022-09-27 18:33:09 发布

Robergean

最新推荐文章于 2022-09-27 18:33:09 发布

阅读量82

点赞数

分类专栏：笔记文章标签： html html5 css

本文链接：https://blog.csdn.net/Robergean/article/details/117304984

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

今天还是对属性的扩充，而且做了几种不同效果的导航。

一、空余空间

语法：

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属性不能单独使用

补充点：预留字符

&lt是小于号 <，&gt是大于号 >，可以用来实现文本中显示出代码样子,例如：&lt div &gt = <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>

Robergean

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端的第七天

今天还是对属性的扩充，而且做了几种不同效果的导航。一、空余空间语法：white-space:nowrap; 强制不换行，与html标记功能一样。white-space:pre; 强制不换行，把原标记转换成pre标记的功能。white-space:pre-line; | pre-wrap pre-line和pre-wrap区别：line可以合并空格（内容和内容之间打得空格），wrap可以保留，其他的功能是一样的。二、省略号可能大家不太理解这里为啥说到省略号，我直接打 .
复制链接

扫一扫