CSS格式

最新推荐文章于 2024-10-11 09:09:15 发布

linsa_pursuer

最新推荐文章于 2024-10-11 09:09:15 发布

阅读量696

点赞数

分类专栏： JSP基础文章标签： CSS样式 float position

本文链接：https://blog.csdn.net/linsa_pursuer/article/details/78419105

版权

JSP基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一.文本格式
1.控制文本
指定字体：font-family
字体大小：font-size
字符转换：text-transform:none/uppercase/lowercase/capitalize（首字母大写）
字体加粗：font-weight:normal/bold;

2.控制文本格式
文本颜色：color
文本排列：text-align:left/right/center;
文字修饰：text-decoration:none/underline/overline/line-through/blink;
行高：line-height:1.6em;
首行文本缩进：text-indent:2em;

垂直相对父元素居中：vertical-align: middle;

二.表格格式
1.table常用：width，border，padding，margin
2.特有样式属性（合并周围边框）：border-collapse:separate/collapse

三.列表样式
1.无序列表：list-style-type:none（无标记），disc（实心圆，默认值），
circle（空心圆），square（实心方块）
2.有序列表：none（无标记），decimal（数字），
lower-roman（小写罗马数字如（iii,iv,v）），
upper-roman（小写罗马数字如（III,IV,V））
3.list-style-image:url();——用图片来替换列表项的标记

四.定位
1.默认定位（又名流定位）：块垂直排列，行内水平排列
2.浮动定位：float:none/left/right;
3.清除浮动带来的影响：clear:none/left/right/both;

4.相对定位（以自身为目标移动——不离队）
div{
position:relative;
left/right:50px;
top/bottom:50px;
}

5.绝对定位（以已定位父类为目标移动——离队）
div{
position:absolute;
left/right:50px;
top/bottom:50px;
}

6.固定定位——挂在窗口上（以页面为目标移动——离队）
div{
position:fixed;
left/right:50px;
top/bottom:50px;
}

五.鼠标形状
属性：鼠标属性在元素范围内变形状
cursor: default（默认）,pointer（鼠标变为手型）,crosshair（十字形）,
text（I型）,wait（旋转加载型）,help（问号型）

浮动定位Demo1如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
	#d0,p{
		width: 400px;
		border: 1px solid red;
	}
	#d1,#d2,#d3{
		width: 100px;
		height: 100px;
		margin: 5px;
	}
	#d1{
		background-color: red;
	}
	#d2{
		background-color: green;
	}
	#d3{
		background-color: blue;
	}
	/*浮动*/
	#d1,#d2,#d3{
		float: left;
	}
	/*清除浮动带来的影响*/
	/*第一种办法*/
	/* p{
		clear: left;
	} */
	/*第二种办法*/
	#d4{
		clear:left;
	}
</style>
</head>
<body>
	<div id="d0">
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
		<div id="d4"></div>
	</div>
	<p>浮动时观察我的位置</p>
</body>
</html>

绝对定位Demo2如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学子商城搜索功能</title>
<style>
	#search input{
		width: 300px;
		padding: 8px;
	}
	#search{
		border: 1px solid red;
		width: 320px;
		height:35px;
		margin: 20px auto;
		/*以此为目标进行绝对定位*/
		position: relative;
	}
	#search a {
		position: absolute;
		right: 1px;
		top: 1px;
	}
</style>
</head>
<body>
	<div id="search">
		<input type="text" placeholder="请输入您要搜索的内容">
		<a href="#">
			<img src="../img/header/search.png">
		</a>
	</div>
</body>
</html>