CSS——背景(background)和列表(list-style)

最新推荐文章于 2024-04-17 21:49:00 发布

ShyuDai

最新推荐文章于 2024-04-17 21:49:00 发布

阅读量649

点赞数

分类专栏：前端入门——CSS

本文链接：https://blog.csdn.net/qq_39228087/article/details/83057942

版权

前端入门——CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

背景

background-attachment图片滚动条滚动

div
		{
			width: 300px;
			height: 2000px;
			background-image: url(img/a31c4997d0d261be5329cf402f6b7ec1.jpg);
			background-repeat: no-repeat;
			/*background-attachment: scroll;
			不滚动一直存在页面中*/
			background-attachment: fixed;
			 /*跟随滚动过去*/
		}

background-position背景定位

div
		{
			width: 300px;
			height: 2000px;
			border: 1px red solid;
			background-repeat: no-repeat;
			background-image: url(img/a31c4997d0d261be5329cf402f6b7ec1.jpg);
		}
			/*background-position: 50px 50px;
			距离上下50px;*/
			/*background-position: 10% 10%;
			距离上下10%距离*/
			/*background-position: left;
			距离上下默认居中，然后在最左侧，right相同*/
			/*background-position: bottom;
			距离左右默认居中，然后位于最底部，top相同*/
			/*background-position: center;
			左右居中*/

background-repeat

div
		{
			width: 1000px;
			height: 1000px;
			background-image: url(img/a31c4997d0d261be5329cf402f6b7ec1.jpg);
		}
			/*background-repeat: no-repeat;
			不重复显示*/
			/*background-repeat: repeat;
			重复显示，这是默认值，水平垂直全部重复*/
			/*background-repeat: repeat-x;
			水平方向重复显示*/
			/*background-repeat: repeat-y;
			垂直方向重复显示*/

背景缩写

background: #000000 url(img/a31c4997d0d261be5329cf402f6b7ec1.jpg) 
		no-repeat right fixed;
		/*空格隔开*/

列表样式

增加图片背景

list-style-image: url();
/*输入文件地址即可既可*/

列表样式

list-style-type: upper-roman;
list-style-position: inside;
/*默认是outside,标签在字段外*/

none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）