网页设计一
日期：2014-05-17 浏览次数：20831 次
自己制作一个网站真是麻烦！业务代码还好，但是界面设计真是太烦人啊！下面是今天完成的文件下载界面中的一部分：自己感觉还不错啊呵呵！尽管我对自己对网页界面颜色搭配很没有自信！大家看看啊！
一下是图片和代码：
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1[1].3.2.js"></script>
<script>
$(document).ready(function(){
$(".add").hide();
??? $(".nav").hide();
??? $("#nav>li").hover(
????? function () {
?????? $(this).css({ backgroundColor:"yellow",fontWeight:"bolder" });
},
????? function () {
??????? $(this).css({ backgroundColor:"blue", fontWeight:"bolder" });
????? }
??? );
???
});
?? function show(t){
?? $(document).ready(function(){
?? $(".nav").hide();
?? $("#"+t).show();
});
}
?? function showaddtopic(t){
??? $(document).ready(function(){
??? $(".add").hide();
??? $("#"+t).show();
? });
? }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#showfile_content{
margin-left:10%;
width:90%;
border:#3333CC;
height:100px;
}
#table{
margin-left:10%;
width:90%;
}
#header{
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFCC33;
width:590px;
float:right;
height:30px;
background:url(nav.gif) repeat-x;
}
#header #headerul{
margin-top:1px;
margin-bottom:1px;
margin-left:0px;
list-style:none;
}
#header #headerul li{
border: 1px solid #ffffff;
padding: 5px 15px 5px 10px;
display: block;
float:left;
}
#header #headerul #forum{
text-align:center;
width:150px;
}
#header #headerul #amount{
text-align:center;
width:100px;
}
#tr #trul #amount{
text-align:center;
width:100px;
}
#tr{
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#3399FF;
width:590px;
height:30px;
background:#CCCCCC;
}
#tr #trul{
margin-top:1px;
margin-bottom:1px;
margin-left:0px;
list-style:none;
}
#tr #trul li{
border: 1px solid #ffffff;
padding: 5px 15px 5px 10px;
display: block;
float:left;
}
#tr #trul #forum{
width:150px;
}
#tr #trul #download{
padding:0;
width:130px;
}
</style>
</head>
<body>
<div id="showfile_content">
? <div id="table">
? <div id="header">
? <ul id="headerul">
? <li id="forum">资料名</li>
? <li id="amount">下载次数</li>
? <li id="amount">上传用户</li>
? <li id="amount">上传日期</li>
? </ul>
? </div><!--end header-->
? <div id="tr">
?? <ul id="trul" >
? <li id="forum">资料名111111<img src="file.jpg" width="30" height="15" /></li>
? <li id="amount">下载次数</li>
? <li id="amount">上传用户</li>
? <li id="amount">上传日期</li>
?? <li id="download"><a href="#"><img src="download.gif"/></a></li>
? </ul>
? </div><!--end tr-->
?? <div id="tr">
?? <ul id="trul" >
<li id="forum">资料名111111<img src="file.jpg" width="30" height="15" /></li>
? <li id="amount">下载次数</li>
? <li id="amount">上传用户</li>
? <li id="amount">上传日期</li>
?? <li id="download"><a href="#"><img src="download.gif"/></a></li>
? </ul>
? </div>
? </div><!--e
