目录
1、input和文本框的优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input,
textarea {
/* 消除输入时默认显示的黑色边框 */
outline: none;
}
textarea {
/* 用于防止文本框被拖拽放大 */
resize: none;
}
</style>
</head>
<body>
<input type="text">
<!-- 注意textarea应该写在一行上，否则文本域输入时会出现换行和空白 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
2、单行多行文字溢出省略号显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 这个单词的意思是如果文字显示不开自动换行 */
/* white-space: normal; */
/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
}
.two {
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="one">
啥也不说，此处省略一万字
</div>
<div class="two">
啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字z
</div>
</body>
</html>
3、margin负值运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
position: relative;
/* 虽然浮动到一行上但是由于有边框，重合部分会有2px的边框 */
float: left;
/* 解决方案采取margin负值使得所有li都向左移动1px，让后面的li覆盖在前面的li上。注意，浏览器渲染方式：会先加载第一个li然后设置样式，然后再加载第二个li，float浮动会让第二个li紧靠第一个li（这样就不会是所有都向左移动1px，导致样式没有变化）。 */
margin-left: -1px;
list-style: none;
width: 200px;
height: 300px;
border: 1px solid pink;
}
/* ul li:hover {
1. 如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
} */
ul li:hover {
/* 2.如果li都有定位，则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html> 
4、文字围绕浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 0 auto;
padding: 5px;
width: 200px;
height: 110px;
background-color: pink;
}
.pic {
float: left;
margin-right: 5px;
width: 100px;
height: 100px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="../../images/1.jpg" alt="">
</div>
<!-- 运用浮动元素不会压住文字的特性 -->
<p>文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</body>
</html> 
5、css3属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
/* input[value] {
color:pink;
} */
/* 只选择 type = text 文本框的input 选取出来 双引号可以有可以无 */
input[type="text"] {
color: skyblue;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
/* ^表示以什么开头，和正则表达式类似 */
div[class^=icon] {
color: red;
}
/* $表示以什么结尾，和正则表达式类似 */
/* section标签与div标签类似，是html5新特性 */
section[class$=data] {
color: blue;
}
/* 类选择器和属性选择器 伪类选择器 权重都是一样的*/
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
<!-- <input type="text" name="" id="">
<input type="password" name="" id=""> -->
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
</body>
</html> 
6、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even) {
background-color: skyblue;
}
/* 上面代码含义和child类似 */
/* nth-child 会把所有的盒子都排列序号 */
/* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<!-- 区别 -->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
7、伪元素选择器使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
div::before {
/* 伪元素显示模式是行内，不能设置宽高，其优先级和标签选择器一样 */
content: '我';
}
div::after {
content: 'sy';
}
</style>
</head>
<body>
<div>是</div>
</body>
</html> 
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
