网页设计1

最新推荐文章于 2022-10-03 13:48:50 发布

jasstion

最新推荐文章于 2022-10-03 13:48:50 发布

阅读量158

点赞数

文章标签： jQuery CSS JavaScript XHTML HTML ViewUI

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

一下是图片和代码：

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

</body>
</html>
图片：

jasstion

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页设计1

自己制作一个网站真是麻烦！业务代码还好，但是界面设计真是太烦人啊！下面是今天完成的文件下载界面中的一部分：自己感觉还不错啊呵呵！尽管我对自己对网页界面颜色搭配很没有自信！大家看看啊！一下是图片和代码： &lt;%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage=...
复制链接

扫一扫