老裴帮助关于CSS的小练习
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>CSS框架结构的实例</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<style type="text/css">
*{
font-family: "宋体", Arial;
font-size: 14px;
}
body {
font-family: "宋体", Arial;
margin: 0px;
padding: 0px;
backgroundcolor: #FFFFFF;
font-size: 12px;
color: #555555;
background-repeat: repeat-x;
}
table {
text-align: center;
border: 1px solid #d4d0c8;
border-collapse: collapse;
width: 100%;
}
th {
background-image: url(/Jquery1/images/bg.jpg);
background-repeat: repeat-x;
}
td a {
text-decoration: none;
font-size: 12px;
font-family: "楷体";
color: gray;
}
a:link { color: gray; }
a:visited { color: green;}
a:hover { color: red; text-decoration:underline;}
a:active { color: blue; }
input[type=button] {
text-decoration: blink;
}
.button_1 {
border: 2px outset green;
padding: 1px;
font-size: 14px;
margin: 10px;
background-color: yellow;
color: blue;
cursor: pointer;
text-align: center;
}
.button_2 {
border: 0px outset green;
padding: 0px;
height: 20px;
width: 72px;
line-height: 20px font-size : 14px;
cursor: pointer;
text-align: center;
letter-spacing: 2px; background-repeat : no-repeat;
background-image: url {/ Jquery1/ images/ buttonbg02 . gif;
background-repeat: no-repeat;
}
;
}
input[type=text] {
font-family: "宋体";
font-size: 12px;
text-align: left;
border: 1px solid gray;
padding: 1px;
color: green;
background-color: #FFFFCC;
text-decoration: none;
font-weight: bold;
font-style: italic;
}
input[type=text]:focus{
border: 1px solid black;
}
ul {
margin: 0px;
padding: 0px;
text-decoration: none;
}
ul li {
margin: 5px;
padding: 2px;
text-decoration: none;
layout: clear;
float: right;
list-style: none;
position: relative;
}
li a {
text-decoration: none;
}
</style>
</head>
<center>
<fieldset>
<legend>
样式模板
</legend>
<body>
<form action="">
<ul>
<table>
<thead>
<tr><td colspan="3" align="center">
<li>
<a href="#">标签1</a>
</li>
<li>
<a href="#">标签2</a>
</li>
<li>
<a href="#">标签3</a>
</li>
</ul>
<td>
</tr>
<tr>
<th>
标题
</th>
<th>
内容
</th>
<th>
问题
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#">事实上</a>
</td>
<td>
<a href="#">sss</a>
</td>
<td>
<a href="#">sss</a>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input class="button_1" type="button" value="确定" />
</td>
<td>
<input class="button_2" type="button" value="提交" />
</td>
<td>
<input type="button" value="保存" />
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</form>
</body>
</fieldset>
</center>
</html>