<!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> <h1>CSS测试正式开始！</h1> <!-- 重写的属性会在所有使用中生效 --> <h2>H2测试</h2> <a href="http://www.baidu.com" target="_blank">百度一下</a> <!-- 新窗口打开链接 --> <p class="abb">测试样例</p> <p>测试样例2</p> <!-- 并不是所有 p 标签都被重写 --> <p class="houdu">字体厚度如何</p> <h1>覆盖</h1> <!-- 如果h1重写设定了位置，则所有都会设定 --> <ul class="fruit"> <li>苹果</li> <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> <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> <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 上面时改变模块的背景色；
