老裴帮助关于CSS的小练习

老裴_帮助 · 发表于 2013-2-8 00:19:16

<%@ 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>

		自动登录	找回密码
密码			立即注册