自己制作一个网站真是麻烦!业务代码还好,但是界面设计真是太烦人啊!下面是今天完成的文件下载界面中的一部分:自己感觉还不错啊呵呵!尽管我对自己对网页界面颜色搭配很没有自信!大家看看啊!
一下是图片和代码:
<%@ 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:网页设计入门"部分,我们将探讨网页设计的基本概念,包括网页的组成元素、颜色理论、字体选择、版面设计原则以及网页设计的目标与目的。了解这些基础知识是构建吸引人且用户友好的网站的前提。此外,...
预览地址:https://blog.csdn.net/qq_42431718/article/details/141569777 html+css网页设计 动漫 海绵宝宝网页设计1个页面
这四套网页设计分别命名为“家乡主题网页设计1”至“家乡主题网页设计4”,每一套都代表了不同的设计思路和实现方式,为学习者提供了对比和学习的机会。通过分析和比较这些实例,学习者可以深入理解HTML、CSS和...
大学生网页设计大作业成品源代码模板 - 多个网页设计制作作品任选 大学生网页设计大作业-以下5个网页设计制作作品自己任选: 1.网页制作基础大二dw作业 2.web网页大作业 3.大学生期末网页大作业-6页面的网页设计,是...
网页设计是信息技术领域中一个重要的组成部分,它涵盖了创建和维护网站的所有方面,包括视觉艺术、用户体验、交互设计以及技术实施。对于大学生和高中生来说,学习网页设计不仅可以提升他们的技术技能,还能培养创新...
学生dreamweaver网页设计作业成品,采用html+css布局,是学习网页设计不错的案例和源代码,希望对大家有所帮助 作品介绍 小黄人网页设计 5页 无js 带视频带音频 非常好看, 非常适合大学生网页设计大作业, 学生...
大学生网页设计大作业-以下5个网页设计制作作品自己任选: 1.网页制作基础大二dw作业 2.web网页大作业 3.大学生期末网页大作业-6页面的网页设计,是个人主页类型。包含了6个页面,包含视频、脚本等元素。水平不高...
【校园门户网页设计】是指为学校打造一个集信息展示、资源共享、在线服务于一体的综合性网络平台。这类网页设计通常包括以下几个核心知识点: 1. **用户体验设计(UX/UI)**:校园门户网页应具备清晰的导航结构,...
Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web...
网页设计基础(web课程设计) 在本实验中,我们将学习网页设计的基础知识,包括 HTML 语言的常用标记、可视化网页设计软件 DreamWeaver 的使用、Div+CSS 网页布局等。通过本实验,我们将掌握使用表格和表单设计...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计...
本资源包“网页设计资料 网页设计模板”聚焦于网页设计模板,这是许多设计师和开发者快速创建网站时的重要工具。模板通常包含了预设的HTML结构、CSS样式和有时甚至包括JavaScript代码,使得非专业人员也能轻松搭建...
Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计...
Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计...
大学生静态网页设计期末作业,大学生网页设计期末作业静态网页.zip,大学生网页设计期末作业动态网页.zip。网页设计期末作业,静态网页,HTML,大学生期末必过,90分以上,大学生网页设计期末作业静态网页.zip,大学...
大学生静态网页设计期末作业(必过版),大学生静态网页设计期末作业(必过版)大学生静态网页设计期末作业(必过版)大学生静态网页设计期末作业(必过版)大学生静态网页设计期末作业(必过版)大学生静态网页设计...
大学生静态网页设计期末作业蛋糕店主题静态网页大作业html源码。 网页设计期末大作业,静态网页,HTML,大学生期末必过项目,95分以上,代码含有注释,亲自操作就可以搞定期末作业啦 大学生静态网页设计期末作业...
增加3D相片demo增加文章note_jekyll更正图片档名增加作品集:表单删除tab选项卡的背景图更改posts/rwd的文章更改导航栏更正图片档名更正图片档名添加RWD文章各类网页设计项目demo演示各类网页设计项目demo演示各类...