取消表单和文本域外轮廓和拖曳
<style>
input,
textarea {
/* 取消文本框轮扩线 */
outline: 0;
}
/* 文本域控制大小 防止拖曳 */
textarea {
resize: none;
}
</style>
图片和文字实现垂直居中
<body>
<style>
.user img {
vertical-align: middle;
/* 图片与文字位置 */
}
</style>
<div class="user">
<img src="images/use.png" alt="">
qq-limimi
</div>
</body>
解决图片下方的空白缝隙
一、vertical-align: middle;基线问题
二、display：block；行内转块级元素
溢出文字的省略号显示
单行文本：
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
单行显示
white-space: nowrap;
多余的切除
overflow: hidden;
切除部分用省略号显示
text-overflow: ellipsis;
}
</style>
<div class="user">
啥也不说了，此处省略一万字
</div>
鼠标移动到对应的Li时的边框更变颜色
<body>
<style>
ul li {
position: relative;
z-index: 0;
float: left;
margin-left: -1px;
list-style-type: none;
width: 200px;
height: 400px;
border: 1px solid red;
}
ul li:hover {
z-index: 1;
border: 1px solid blue;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
碰见问题就是“z-index”在位置的相对之下生效
