<!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>