日期:2014-05-17  浏览次数:20585 次

老裴帮助关于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>
?