提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、css用户节面样式
所谓的界面样式,就是更改一些用户的操作样式,以便提高更好的用户体验。
1.1鼠标样式
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
代码如下(示例):
<ul>
<li>我是默认的样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
1.2表单轮廓ontline和防止拖拽文本域resize
- 表单轮廓线指得是:表单获取光标后表单的文本框会变颜色
2. .文本域拖拽指得是
<style>
input,textarea{
/* 取消表单轮廓 */
outline: none;
}
textarea{
/* 防止拖拽文本域 resize:调整大小 */
resize: none;
}
/* input:focus{
background-color: skyblue;
color: skyblue;
border-color: pink;
} */
</style>
<body>
<!-- 1、取消表单轮廓 -->
<input type="text">
<!-- 2、防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
二、vertical-align实现图片文字垂直居中对齐
<style>
img{
/* vertical 只能用于行 或者行内块元素 */
/* vertical-align: bottom; 顶部对齐 */
/* vertical-align: top; 顶部对齐 */
vertical-align: middle; /* 中间对齐 */
}
</style>
<body>
<img src="images/tb_2.jpg" alt=""> pink老师真nice
</body>
三、单行文字溢出显示省略号
<style>
div{
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
white-space: nowrap; /* 强制一行显示 默认是:normal(自动换行)*/
overflow: hidden; /*超出的部分隐藏 */
text-overflow: ellipsis; /* 超出的部分用省略号代替*/
}
</style>
<body>
<div>
啥也不说了,此处省略一万字
</div>
1.1多行文字溢出显示省略号
<style>
div{
width: 150px;
height: 45px;
background-color: pink;
margin: 100px auto;
overflow: hidden; /*超出的部分隐藏 */
text-overflow: ellipsis; /* 超出的部分用省略号代替*/
display: -webkit-box; /*限制在一个块元素显示的文本行数 */
-webkit-line-clamp:2 ;
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
}
</style>
<body>
<div>
啥也不说了,此处省略一万字 啥也不说了啊
</div>
</body>
四、常见的布局技巧
1. margin的应用
<style>
ul li{
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
1.1 鼠标经过边框变颜色,利用定位会压住其他盒子的原理
<style>
ul li:hover{
/* position: relative; 如果没有定位 添加相对定位即可 */
z-index: 0;
border: 1px solid skyblue;
}
</style>
2.文字围绕浮动元素
<style>
div{
width: 300px;
height: 70px;
margin: 0 auto;
background-color: pink;
}
.pic{
float: left;
margin-right: 10px;
width: 130px;
height: 65px;
}
.pic img{
width: 100%;
}
</style>
<body>
<div class="box">
<div class="pic">
<img src="images/tb_2.jpg" alt="">
</div>
<p>一定要加油鸭豆沙包 一定要加油鸭豆沙包 一定要加油鸭豆沙包</p>
</div>
</body>
3. 行内块元素巧妙运用
- 只要给父盒子添加水平居中他的子盒子也会水平居中的
<style>
.box{
text-align: center;
}
</style>
五、三角强化
- 实现类似效果
<style>
.box1{
width: 0;
height: 0;
/* border-top: 100px solid transparent; 把上边框宽度调大
border-right: 50px solid skyblue;
border-bottom: 0 solid blue; 左边和下边的边框设置为0
border-left: 0 solid green; */
border-color: transparent skyblue transparent transparent; /*只保留右边的代码*/
border-style: solid;
border-width: 100px 50px 0 0; /* 上边边框宽度要大,右边框 宽度稍小 其余的边框为0 */
}
</style>