CSS之分类

最新推荐文章于 2023-08-23 19:39:56 发布

web菜鸟程序猿

最新推荐文章于 2023-08-23 19:39:56 发布

阅读量543

点赞数

分类专栏： CSS 文章标签： CSS HTML

本文链接：https://blog.csdn.net/zhou0107/article/details/9146059

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>CSS分类</title>
	<style type="text/css">
		/*
		*clear 清除浮动元素。
		*left 在左侧不允许浮动元素
		*right 在右侧不允许浮动元素
		*both 在左右两侧都不允许浮动元素
		*none 默认值，允许浮动元素出现在两侧
		*/
		.left{
			width:300px;
			height: 20px;
			float:left;
			/*clear:left;*/
		}
		.right{
			width:300px;
			height: 20px;
			float: right;
			/*clear:right;*/
		}
		.clear{
			clear:both;
		}
		/*
		* cursor 更改鼠标图标
		*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：此光标指示可用的帮助（通常是一个问号或一个气球）。
		*/
		span{
			width:200px;
			height: 40px;
		}
		.span_1{
			cursor: crosshair;
		}
		.span_2{
			cursor:pointer;
		}
		.span_3{
			cursor:ne-resize;
		}
		.span_4{
			cursor:help;
		}
		/*display属性规定元素应该生成的框的类型
		*none：此元素不会显示;
		*block：此元素将显示为块级元素，此元素前后会带有换行符
		*inline：默认，此元素显示为内联元素，元素前后没有换行符
		*inline-block：行内块级元素
		*list-item：此元素会作为列表显示
		*run-in：此元素会根据上下文作为块级元素或内联元素显示。
		*/
		.u1 li{
			display: block;
		}
		.u1 li{
			display: inline;
		}
		.u2{
			display:inline-block;
		}
		/*visibility属性规定元素是否可见
		*hidden:元素是不可见;
		*collapse：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"
		*/
		table{
			border-collapse:collapse;
		}
		tr.coll
		 {
		 visibility:collapse
		 }
	</style>
</head>
<body>
	<div style="height:20px;width:auto">
		<div class="left">左边</div>
		<div class="right">右边</div>
	</div>
	<div>
		<span class="span_1">更改鼠标图标 光标呈现为十字线</span>
		<br>
		<span class="span_2">更改鼠标图标 光标呈现为指示链接的指针</span>
		<br>
		<span class="span_3">更改鼠标图标 光标指示矩形框的边缘可被向上及向右移动</span>
		<br>
		<span class="span_4">更改鼠标图标 光标指示可用的帮助（</span>
	</div>
	<ul class="u0">
		<li>display:block块级元素</li>
		<li>display:block</li>
		<li>display:block</li>
		<li>display:block</li>
		<li>display:block</li>
	</ul>
	<ul class="u1">
		<li>display:inline内联元素</li>
		|
		<li>display:inline</li>
		|
		<li>display:inline</li>
		|
		<li>display:inline</li>
		|
		<li>display:inline</li>
	</ul>
	<div class="u2">
		<li>display:inline-block行内块级元素</li>
		<li>display:inline-block</li>
		<li>display:inline-block</li>
		<li>display:inline-block</li>
		<li>display:inline-block</li>
	</div>
	<h1>未使用visibility属性</h1>
	<table border="1">
		<tr>
			<td>Adams</td>
			<td>John</td>
		</tr>
		<tr>
			<td>Bush</td>
			<td>George</td>
		</tr>
	</table>
	<br>
	<br>
	<h1>使用了visibility属性：collapse</h1>
	<table border="1">
		<tr>
			<td>Adams</td>
			<td>John</td>
		</tr>
		<tr class="coll">
			<td>Bush</td>
			<td>George</td>
		</tr>
	</table>
	<div class="clear"></div>
</body>
</html>

web菜鸟程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之分类

CSS分类 /* *clear 清除浮动元素。 *left 在左侧不允许浮动元素 *right 在右侧不允许浮动元素 *both 在左右两侧都不允许浮动元素 *none 默认值，允许浮动元素出现在两侧 */ .left{ width:300px; height: 20px; float:left; /*clear
复制链接

扫一扫

专栏目录