<!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>
前端:CSS使用示例
猜你喜欢
转载自blog.csdn.net/xuejianbest/article/details/86158870
今日推荐
周排行