Css基础笔记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS测试界面</title>
<style>
body { /* 重写body的属性 */
background: url(../img/backgroud.jpg);
background-attachment: fixed;
}
h1 {
font-size: 30px; color: blue; position: absolute;
left: 500px;
top: 200px;
background: #D0E4FE; /* color：字体颜色， background：文本背景色 */
}
h2 {
text-align: center; /* 文本位置 */
text-indent: 2px; /* 开头缩进 */
letter-spacing: 2px; /* 字符距离 */
}
a:link, a:visited { /* 未访问链接、已访问链接 */
text-decoration: none; /* 取消链接下划线 */
text-align: center; /* 字体居中 */
font-weight: bold; /* 字体的厚度 */
color:#FFFFFF;
background-color:#98bf21;
padding: 4px; /* 边框的厚度 */
}
a:hover, a:active { /* 鼠标移到链接上、鼠标点击链接时 */
background: #7A991A;
}
p.abb { /* 自定义类，防止所有 p 标签全部改变 */
font-size: 30px;
}
p.houdu {
font-weight:900;
font-size: 20px;
}
ul.fruit{
list-style:decimal
}
table {
width: 10%; /* 10%，与屏幕的比； 100px，固定宽度 */
}
table,td,th {
border: 1px solid black; /* 统统重写边框形式 */
text-align: center;
border-collapse: collapse;
}
</style>
<style>
div.divr {
width:140px; /* 自定义div的屏幕显示范围 */
border:1px solid black; /* 设置边框形式 */
text-align: center; /* 字体居中 */
}
.hidden {
visibility: hidden; /* 将元素隐藏起来 */
}
img.abb {
float:left; /* 浮动 */
width: 150px;
margin: 10px; /* 周围10px也属于元素的范畴 */
}
.text_line {
clear:both; /* 清除float的影响（个人感觉） */
margin-bottom:2px;
}
ul.abb {
float: left;
padding: 0;
margin: 5px;
list-style: none;
}
li.abb {
display:inline;
text-align: center;
margin: 10px;
}
input:focus {
background: skyblue; /* 给输入框增加背景 */
}
</style>
</head>
<body>
<p class="abb">测试样例</p>
<p>测试样例2</p> <!-- 并不是所有 p 标签都被重写 -->
<ul class="fruit">
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
</ul>
<table>
<tr>
<th>季节</th>
<th>时间</th>
</tr>
<tr>
<td>春天</td>
<td>三月</td>
</tr>
</table><br>
<div>凤兮凤兮归故乡，遨游四海求其凰。</div><br>
<div class="divr">凤兮凤兮归故乡，遨游四海求其凰。</div>
<h3>显示标题， 注：下面含有隐藏标题，占位置</h3>
<h3 class="hidden">隐藏标题</h3>
<div>使用div（div占用一行）</div>
<span>使用span（span只占内容宽度）</span>
<span>使用span</span><br>
<h3 style="cursor: pointer;">请把鼠标移向这里</h3> <!-- 鼠标停留在上面的效果，这里是手指指向 -->
<img class="abb" src="../img/price.jpg">
<h4>凤兮凤兮归故乡</h4>
<h4>遨游四海求其凰</h4>
<ul class="abb">
<li class="abb"><a href="http://www.baidu.com" target="_blank">百度网</a></li>
<li class="abb"><a href="http://www.qq.com" target="_blank">腾讯网</a></li>
<li class="abb"><a href="http://www.taobao.com" target="_blank">淘宝网</a></li>
<li class="abb"><a href="http://www.sina.com.cn" target="_blank">新浪网</a></li>
</ul><br>
<h3 class="text_line"></h3>
<form>
账号:<input type="text"><br>
密码:<input type="password"><br>
<input type="submit" value="登陆">
</form>
</body>
</html>
使用Css建几个简单的网页跳转按钮：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 导航栏界面</title>
<style>
body {
background: url(../img/backgroud.jpg);
background-attachment: fixed;
}
a {
text-decoration: none;
}
ul{
float: left;
list-style: none;
margin: 5px;
}
li.shui{
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: 500;
text-align:center;
color: #FFFFFF;
height: 25px;
background-color:#98bf21;
padding: 1px;
}
a:active, a:hover {
background:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com" target="_blank">百度</a></li>
<li><a href="http://www.qq.com" target="_blank">腾讯</a></li>
<li><a href="http://www.taobao.com" target="_blank">淘宝</a></li>
<li><a href="http://www.sina.com.cn" target="_blank">新浪</a></li>
</ul>
<ul>
<li class="shui"><a href="http://www.baidu.com" target="_blank">百度</a></li>
<li class="shui"><a href="http://www.qq.com" target="_blank">腾讯</a></li>
<li class="shui"><a href="http://www.taobao.com" target="_blank">淘宝</a></li>
<li class="shui"><a href="http://www.sina.com.cn" target="_blank">新浪</a></li>
</ul>
</body>
</html>
其实就是把鼠标的不同操作做自定义，例如下述就是当鼠标 hover 上面时改变模块的背景色
