`
阅读更多

自己制作一个网站真是麻烦!业务代码还好,但是界面设计真是太烦人啊!下面是今天完成的文件下载界面中的一部分:自己感觉还不错啊呵呵!尽管我对自己对网页界面颜色搭配很没有自信!大家看看啊!

一下是图片和代码:

<%@ 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><!--end table-->
  </div><!--end content-->
 
</body>
</html>
图片:

 

  • 大小: 10.2 KB
1
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics