Html中常用的操作-CSDN博客

本文链接：https://blog.csdn.net/qq_41264896/article/details/137071597

Html中常用的操作

1、鼠标变成小手

style="cursor:pointer"

2、html怎么在网页标题栏上显示图标

<!--需要先把图片格式转换为.ico类型
在这个网址在线转换很方便：https://www.easyicon.net/covert/
在<head></head>加一行来显示图标（注意，如果加入了没有效果，检查一下路径是否正确，文件名是否正确）-->
<!--在网页标题左侧显示：-->
<link rel="icon" href="图标地址" type="image/x-icon">
<!--在收藏夹显示图标：-->
<link rel="shortcut icon" href="图标地址" type="image/x-icon">

3、去掉a标签的下划线并修改a标签字体颜色

text-decoration:none;color:black

4、去除ul前面的空格

margin: 0;padding: 0;

5、文字超出不换行

white-space: nowrap;text-overflow: ellipsis;

6、内容垂直居中

/*flex必须，水平方向，垂直方向，必须heigh的高度，无法设定则使用100%，100vh代替，否则不会锤子居中*/
display: flex;justify-content: center;align-items: center;

7、文字超出内容隐藏并并显示省略号

/*单行*/
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

/*多行*/
overflow: hidden;text-overflow: ellipsis;display: -webkit-box-orient: vertical;-webkit-box;
/*行数*/
-webkit-line-clamp: 3;

/**/
overflow:auto;/*内容会被修剪,超出设置的宽高后会出现滚动条*/
overflow:scroll;/*内容会被修剪,不管内容是否超出,都会出现滚动条的位置*/
overflow:visible;/*这个是默认值,内容不会被修剪,会出现在元素框外面。*/
overflow:hidden;/*内容被修剪,多余的内容被隐藏*/

8、p标签间距

/*外间距*/
margin: 0;
/*p标签行间距,大小根据需要设置*/
padding: 5px;

9、内容分布两边

display: flex;justify-content: space-between;

10、页面边距空白和x轴显示滚动条处理

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

11、图片比例占满整个页面

width: 100vw;height: 100vh;

12、文字浮动在图片上方

    /*位置改为相对定位*/
	position: absolute;
	/*宽度按需设置*/
    width: 100%;
    height: 50px;/*文字的高度*/
	/*位置设置*/
    left: 0px;
    bottom: 15px;
    z-index: 100;/*优先级*/
/*以下部分针对文字设置，按需即可*/
    text-align: center;
    color: white;
    font-size: 25px;
    font-family: "黑体";
    font-weight: bold;

X、滚动条显示及样式美化

/*滚动条只有超出范围才会显示*/
/*显示垂直滚动条*/
overflow-y: scroll;
/*显示水平滚动条*/
overflow-x: scroll;
/*美化滚动条*/
    
     ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 0;
    }
    
     ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 2px;
        height: 2px;
    }
    
     ::-webkit-scrollbar-thumb {
        cursor: pointer;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.15);
        transition: color 0.2s ease;
    }