CSS笔记（更新中）

最新推荐文章于 2022-03-11 22:39:07 发布

取网名好难

最新推荐文章于 2022-03-11 22:39:07 发布

阅读量193

点赞数

分类专栏： html5 文章标签： css html5

本文链接：https://blog.csdn.net/raine_gu/article/details/107616703

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、ul、ol、li

ul定义的是无序列表；ul的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心

ol定义的是有序列表； ol的type属性有：1—数字（默认）、a—小写字母、A—大写字母、

i—小写希腊字母、I—大写希腊字母。

li定义的是列表项目

2、如何去掉ul、li中的原点

->

在css样式中加上：

            ul li {
                list-style-type: none;
            }

3、输入框中的字太靠左，想往右偏移一点

向右缩进20px

    text-indent:20px;

4、鼠标悬停在文字上，会变成手指

    cursor: pointer;

其他类似的：

url
需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

5、去掉超链接a标签的下划线

text-decoration: none;

6、将三个div放在同一个区域并排显示

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8">
    <title>test</title>
    <style type="text/css">
    .d1,.d2,.d3{
        float: left;
        width: 33.3%;
        height: 50px;
    }
    .d1{
        background-color: cadetblue;
    }
    .d2{
        background-color: coral;
    }
    .d3{
        background-color: cornflowerblue;
    }

    </style>
</head>

<body>
    <div class="d1">AAA</div>
    <div class="d2">BBB</div>
    <div class="d3">CCC</div>
</body>

</html>

7、当鼠标移动到指定元素上时，会出现下拉菜单

<!DOCTYPE html>
<html>

<head>
	<title>下拉菜单</title>
</head>

<body>
	<div class="titleBar">
		<span>下拉菜单</span>
		<div class="title">
			<p>菜单一</p>
			<p>菜单二</p>
			<p>菜单三</p>
		</div>
	</div>
</body>
<style type="text/css">
	.titleBar {
		display: inline-block;
		position: relative;
	}

	.title {
		display: none;
		position: absolute;
	}

	.titleBar:hover .title {
		display: block;
	}
</style>

</html>

8、line-height和height区别

height：表示行高
line-height：表示每行文字所占的高度

9、padding和margin区别（图源自网络）

padding：内边距

margin：外边距（垂直方向上会出现外边距合并--外边距塌陷）

10、letter-spacing和word-spacing

word-spacing 英文单词之间的距离
letter-spacing 文字与文字之间的距离

11、像素单位

rem

12、padding参数个数分别是表示哪些部分

padding:20px; 上下左右

padding:20px 40px 上下，左右，

padding:20px 30px 40px 上，左右，下

padding:10px 20px 30px 40px 上、右、下、左

13、伪类选择器

未被访问过的状态：link{ }

访问过后的状态：visited{ }

鼠标悬浮时的状态：hover{ }

鼠标点击时的状态：active{ }

取网名好难

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。