前端：CSS使用示例 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css基本</title>

<style>
body {
	background-color: #EEEEEE;
	color: #000000;
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 100%;
	/* 	使用Univers 字体，如果 Univers 在用户计算机上不可用，默认将使用 sans-serif。计算机一般都有三种字体：serif、sans-serif 和 monospace */
	font-family: Univers, sans-serif;
}

#info {
	/*  边框为 1 像素宽的黑色实线 */
	border: 1px solid #000000;
	/* 	CSS3 样式（以 -moz、-webkit 等开头的样式）的特定于浏览器的实现。 */
	/* 	设置边框的圆角边缘 */
	/* 	此示例是为了让该标记适用于基于 Mozilla（比如 Mozilla Firefox）和基于 Webkit（比如 Apple Safari）的旧浏览器。 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/* 	生成一个阴影 */
	-webkit-box-shadow: 8px 8px 6px #AAAAAA;
	-moz-box-shadow: 8px 8px 6px #AAAAAA;
	box-shadow: 8px 8px 6px #AAAAAA;
}

/* 为有序列表内容提供阴影 */
ol li {
	/*  decimal、lower-roman 和 lower-greek。 */
	list-style-type: lower-roman;
	text-shadow: 2px 2px 2px #AA00FF;
}

/* 无序列表 */
ul li {
	text-align: center;
	/* 	没有序号标记 */
	list-style-type: none;
	width: 50px;
	padding: 10px;
	margin: 10px;
	background-color: #EEEEEE;
	border: 1px solid #000000;
	/* 	加粗 */
	font-weight: bold;
	/* 	圆角 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/* 	旋转 */
	-moz-transform: rotate(-20deg);
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
}
/* 无序列表，鼠标经过 */
ul li:hover {
	/* 下划线：underline、none等 */
	text-decoration: underline;
	background-color: #FFFFAA;
}

div.equal-column {
	width: 45%;
	height: 100%;
}

div#left {
	float: left;
	background-color: red;
}

div#right {
	float: right;
	background-color: blue;
}

div.something-below {
	width: 100%;
	clear: both;
	background-color: yellow;
}
</style>

<script type="text/javascript">
</script>
</head>

<body>
	<div id="info">div块</div>
	<ol>
		<li>有序列表1
		<li>有序列表2
		<li>有序列表3
	</ol>
	<ul id="nav">
		<li>无序列表A
		<li>无序列表B
		<li>无序列表C
	</ul>

	<div id="left" class="equal-column">left</div>
	<div id="right" class="equal-column">right</div>
	<div class="something-below">clear</div>
</body>
</html>
posted @ 2019-01-11 11:18  xuejianbest  阅读(241)  评论(0)  编辑  收藏  举报