CSS简单示例
来源：互联网 发布：数控铣编程简单无弧线 编辑：程序博客网 时间：2024/05/15 02:05
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>CSS_Examplel.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <style type="text/css"> ul{ list-style: none;/*把li前面的默认的项目符号去掉*/ /*list-style-type: lower-greek;可以设置其他的类型*/ list-style-image: url("../images/aa.JPG");/*也可以自己制作项目符号图片，然后通过这样的方式引用就行了*/ } table{ border: 1px solid black; color: red; width: 900px; /*border-spacing: 0px;*/ border-collapse: collapse; } table td{ border:1px green solid; /*padding: 10px;这样定义一个值，表示单元格内边距都为10px*/ /*padding: 10px 40px;这样定义两个值，表示单元格上下边距是10px，左右边距是20px*/ padding:10px 20px 30px 40px;/*分别代表的是上 右 下 左四个放下，是按顺时针排列的*/ } .input{ /*border-color: blue;改变 输入框的颜色*/ border:none;/*设置输入框的边框为无，在不同的浏览器稍微有一点不同的显示方式，要注意一下*/ border-bottom: 1px solid; } </style> <body> 请输入答案：<input class="input" type="text" /> <hr/> <table > <tr> <td>发的金卡是浪费</td> <td>发的金卡是浪费</td> <td>发的金卡是浪费</td> </tr> <tr> <td>发的金卡是浪费</td> <td>发的金卡是浪费</td> <td>发的金卡是浪费</td> </tr> <tr> <td>发的金卡是浪费</td> <td>发的金卡是浪费</td> <td>发的金卡是浪费</td> </tr> </table> <br/> <ul class="input"> <li>这是一个CSS的实例</li> <li>这是一个CSS的实例</li> <li>这是一个CSS的实例</li> <li>这是一个CSS的实例</li> <li>这是一个CSS的实例</li> <li>这是一个CSS的实例</li> <li>这是一个CSS的实例</li> </ul> </body></html>
