`

CSS related

    博客分类：
  • J2EE
 
阅读更多
自己设计的第一个页面样式表，比较简陋～ 

#loginbox{
	width: 300px;
	padding: 30px;
	margin: 100px auto;
	background: lightgray;
	border: 3px solid green;
}

#container{
	width:"90%";
	margin:0 auto;/*margin--边界，上下为0，左�自动*/
}

#header{
	width:90%;
	height:20px;
	margin:0 auto;/*margin--边界，上下为0，左�自动*/
	background:lightgray;
}

#middle{
	width:90%;
	height:600px;
	margin:0 auto; /*margin--边界，上下为0，左�自动*/
	overflow:hidden; /*防止div被撑开，超过div大�就��*/
	background:white;
}

#menu{
	width:15%;
	height:600px;
	float:left;
	margin:0 auto; /*margin--边界，上下为0，左�自动*/
	overflow:hidden; /*防止div被撑开，超过div大�就��*/
	background: gray;
}

#main{
	width:75%;
	height:600px;
	float:right;
	margin:0 auto; /*margin--边界，上下为0，左�自动*/
	overflow:hidden; /*防止div被撑开，超过div大�就��*/
	background:white;
}

#footer{
	width:90%;
	height:20px;
	margin:0 auto;/*margin--边界，上下为0，左�自动*/
	background:lightgray;
}


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ page info="This is a text infomation"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="./css/layout.css">
</head>
<body>
		<div id="header"  align="right">
			<span><a href="<%=request.getContextPath() %>/toLogin.action">登录  </a></span>
			<span>  |  </span>
			<span><a href="<%=request.getContextPath() %>/toRegister.action">  免费注册</a></span>
		</div>
		
			<div align="center" id="loginbox">
				<s:form action="login" method="post" >
				<s:textfield name="user.username" label="username"></s:textfield>
					<s:password name="user.password" label="password"></s:password>
					<s:submit></s:submit>
				</s:form>
			</div>


</body>
</html>


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="./css/layout.css">
</head>
<body>

	<div id="container">
		<div id="header"  align="right">
			<span style="color:lightgreen">Welcome ${loginUser} </span>  
			<span>  |  </span>
			<span><a href="<%=request.getContextPath() %>/logout.action">安全退出</a></span>
		</div>
		<div id="middle">
			<div align="left" id="menu">
			<br><br><br>
				<a href="<%=request.getContextPath() %>/newPublishedProjects.action">最新项目</a><br>
				<a href="<%=request.getContextPath() %>/newDealProjects.action">近期成交项目</a><br>
				<a href="<%=request.getContextPath() %>/toPublishProjects.action">发布项目</a><br>
				<a href="<%=request.getContextPath() %>/myPublishedProjects.action">我发布的所有项目</a><br>
				<a href="<%=request.getContextPath() %>/myRequestProjects.action">我承接的所有项目</a><br>
			</div>
			<div align="left" id="main">
				<span style="color:blue">最新项目  </span>  <span style="color:gray">近期成交项目</span>
				<table width="100%">
					<tr><th width="30%">项目名称</th><th width="20%">啊十大</th><th width="10%">啊十大</th><th width="10%">阿萨</th><th width="30%">啊十大市场</th></tr>
					<tr><td><a href="<%=request.getContextPath() %>/toRequest.action">pro1</a></td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
					<tr><td><a href="<%=request.getContextPath() %>/toRequest.action">pro1</a></td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
				</table>
			</div>
		</div>
		<div id="footer" align="right">@copyright XXX company.</div>
	</div>

</body>
</html>
分享到：
| 时间相关
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    53种CSS3阴影效果box-shadows.css

    `fonts`目录可能包含了用于样例页面的字体文件，而`related`目录可能包含与这个库相关的其他资源链接。 在实际开发中，`box-shadow`不仅可以用于增加美观性，还可以用于创建交互效果，如按钮悬停时改变阴影，或者在...

    CSS3斑马线进度条动画特效

    `related`可能包含相关资源链接；`fonts`和`css`目录分别存储字体和样式文件，其中`css`中的样式表文件将包含上述CSS3动画的定义。 总结来说，CSS3斑马线进度条动画特效是通过巧妙地结合Bootstrap的进度条样式、CSS...

    CSS3名片式卡片设计特效

    `related`文件夹可能包含与卡片设计相关的其他资源。`jQuery之家.url`可能是开发者收藏的jQuery教程链接，虽然这里主要讨论CSS3，但jQuery可能被用作交互效果的辅助工具。`readme.html`通常是项目说明文档，提供关于...

    纯CSS3炫酷checkbox美化库checkboxes.css

    同时，`related`目录可能包含了一些相关的资源链接，如`jQuery之家.url`，这可能是用于查找更多CSS3或前端开发资源的链接。 **四、注意事项** 1. 请确保浏览器支持CSS3特性，否则某些效果可能无法显示。 2. 考虑到...

    5种动画过渡效果的纯CSS3幻灯片特效

    5. **模块化结构**：文件列表中包含的`style`, `img`, `related`, `other`, `fonts`, `font`, `dist`等目录，暗示了项目采用了模块化组织方式，方便管理和维护。`style`目录下可能包含主要的CSS样式文件，`img`存放...

    CSS3荧光灯文字闪烁动画特效

    在提供的压缩包文件中，`index.html`是示例页面，`readme.html`可能包含有关项目的说明，`jQuery之家.url`可能是开发者常用的资源链接，`related`和`fonts`可能包含相关资源或自定义字体。`css`文件夹内应有实现这个...

    4种纯CSS3小球物理运动动特效

    `readme.html`可能包含关于如何使用这些特效的说明，而`css`目录下的文件可能存储了实现这些效果的CSS样式，`js`目录可能包含辅助JavaScript代码，`fonts`可能用于加载特殊字体，`related`可能包含相关资源链接。...

    纯CSS3按钮边框线条动画特效

    此外，库中的`fonts`目录可能包含用于按钮文本的特殊字体或图标，而`related`目录可能包含与这个特效相关的其他资源或示例。 为了使用这个库，通常会在HTML文件（如`index.html`）中引入`animated-border.css`样式...

    66种基于animate.css的CSS消息提示动画效果

    Animate.css 是一个强大的开源 CSS3 动画库，它提供了大量的预定义动画效果，使得开发者在构建网页交互时能够轻松地添加丰富的动态效果。在这个"66种基于animate.css的CSS消息提示动画效果"资源中，你可以找到各种...

    纯CSS3超时尚Tabs选项卡流线型标签效果

    `related`目录可能包含与该项目相关的其他资源或示例。 总结来说，"纯CSS3超时尚Tabs选项卡流线型标签效果"利用了CSS3的强大特性，如边框半径、过渡和动画，以及自定义颜色，创造出一款既实用又美观的标签组件。...

    纯CSS3炫酷元素盒阴影效果插件shadow.css

    - `related` 文件夹：可能包含了与`shadow.css` 相关的其他资源或示例文件。 - `index.html`：通常作为示例页面，展示`shadow.css` 的所有预设效果，帮助开发者直观地理解如何使用这些效果。 **总结** `shadow.css...

    三圆点CSS3 loading加载动画特效库

    8. **related** - 可能包含相关资源或者补充材料。 **使用方法** 集成`three-dots.css`非常简单，只需将库的CSS文件引入到HTML页面的`&lt;head&gt;`部分，并通过类名添加到需要显示加载动画的元素上。在`readme.html`中...

    11种炫酷CSS3复选框checkbox样式美化效果

    fonts目录可能包含用于图标替换的字体文件，related目录可能包含相关的资源或链接。 值得注意的是，虽然这些美化效果能够提升视觉体验，但在实际应用中，要确保它们对所有用户都是可访问的，遵循无障碍设计原则。...

    css3火焰文字特效

    【CSS3火焰文字特效】是一种基于CSS3技术的...`related`目录可能包含与火焰文字特效相关的其他资源或示例。 通过理解和学习这个CSS3火焰文字特效，开发者可以进一步提升CSS3技能，创作出更多富有创意的网页视觉效果。

    CSS3鼠标hover背景图片缩放动画效果

    - **related**：可能是一些相关的或参考的资源文件。 总之，CSS3的hover背景图片缩放动画是提升用户体验的一个有效手段，它利用了CSS3的高级特性，无需JavaScript即可实现。通过灵活运用这些技术，开发者可以创造出...

    css3跑道式时间轴设计效果

    - **related**：这个目录可能包含与项目相关的其他文件，如示例图片或额外的CSS/JS资源。 总的来说，这个“css3跑道式时间轴设计效果”充分利用了CSS3的先进特性，创造出独特且富有动态感的时间线展示方式。通过...

    炫酷css3垂直时间轴特效

    在实际的项目中，`index.html`文件通常包含HTML结构，`readme.html`可能提供关于如何使用这个特效的说明，而`related`目录可能包含与时间轴特效相关的其他资源。`css`目录下则会有样式表文件，其中定义了所有必要的...

    纯CSS3创意导航菜单特效

    6. `related`：可能包含与这个特效相关的其他文件或链接。 为了复现这个特效，开发者需要编辑`index.html`中的HTML结构，然后在`css`目录下的CSS文件中编写相应的样式规则，利用transform和transition属性来实现...

    纯CSS3 Material Design扁平风格按钮设计

    - `related`目录：可能包含与项目相关的其他资源或示例。 通过分析这些文件，开发者不仅可以学习到如何利用CSS3实现Material Design风格的按钮，还能了解如何组织和管理CSS代码，以及如何使用预处理器如SCSS提高...

    css3炫酷进度条动画

    - `related`：可能包含与项目相关的其他文件或资源，如图片、字体等。 - `fonts`：用于存放项目中使用的特殊字体或图标字体。 在实际应用中，开发者可以根据自己的需求调整这些CSS3属性和步骤，创造出更多变的...

Magicbox
Global site tag (gtag.js) - Google Analytics