老糊涂
- 浏览: 171232 次
- 性别:
- 来自: 西安
-
文章分类
- 全部博客 (163)
- POI (8)
- Collection容器 (1)
- java.util (2)
- java调用批处理 (1)
- xml (1)
- jfreechart (3)
- SVN (1)
- tomcat中文 (1)
- jquery (6)
- Log4j (1)
- ppt (1)
- js (48)
- ss (1)
- 综合 (1)
- Spring (2)
- 数据库 (6)
- tomcat (1)
- commons-lang包使用 (1)
- AJAX【Jquery】 (3)
- RMI (2)
- OpenLayers (25)
- html (20)
- css (25)
- Google地图 (2)
- java (1)
- Ibatis (1)
- GoogleMaps (1)
- J2EE (2)
- 软件设计 (1)
- 服务器 (1)
- html5 (4)
- cursor (1)
- AngularJs (5)
- 缓存 (1)
- 构建 (2)
- 域名、空间、服务器 (1)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'layer_demo.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
/*基本信息*/
body{
font:12px Tahoma;
margin:0px;
text-align:center;
background:#FFF;
}
/*页面层容器*/
#container {
width:100%;
margin: 10px auto;
min-width: 500px;
min-height: 300px;
}
/*页面头部*/
#Header {
width:950px;
margin:0 auto;
background:#FFCC99;
background:url('<%=basePath%>images/logo.jpg') no-repeat;
}
#menu{
padding: 20px 20px 0 0;/*固定菜单的位置*/
}
#menu ul{
float:right;/*使菜单位于页面右侧*/
list-style: none;
margin: 0px;
}
#menu ul li{
float: left;/*列表显示在一行*/
margin: 0 10px;/*让列与列之间产生20px距离*/
display:block;
line-height: 28px;/*确保文字在行中间与分割线保持平衡*/
}
/*竖线*/
.menuDiv {width:1px;height:28px;background:#999}
#menu ul li a:link ,#menu ul li a:visited{
font-size: 12px;
text-decoration: none;
font-weight: bold;
color: #666;
}
#menu ul li a:hover{}
#banner {
background:url('<%=basePath%>images/banner.jpg') repeat-x; /*加入背景图片*/
clear:both; /*清除浮动*/
height:10px;
}
/*页面主体*/
#PageBody{
width:950px;
margin:0 auto;
height:500px;
background:#CCFF00;
}
#sidebar{
width:160px; /*设定宽度*/
height:500px;
text-align:center; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border-right: 1px solid red;
}
#mainbody {
width:789px;
height:500px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden ;
}
/*页面底部*/
#Footer {
width:950px;
margin:0 auto;
height:50px;
background:#00FFFF;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div id="banner"></div>
</div>
<div id="pagebody">
<div id="sidebar">bottom_left</div>
<div id="mainbody">bottom_right</div>
</div>
<div id="footer"><hr size="2">ruanqiangbeyond@sina.cn</div>
</div>
</body>
</html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'layer_demo.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
/*基本信息*/
body{
font:12px Tahoma;
margin:0px;
text-align:center;
background:#FFF;
}
/*页面层容器*/
#container {
width:100%;
margin: 10px auto;
min-width: 500px;
min-height: 300px;
}
/*页面头部*/
#Header {
width:950px;
margin:0 auto;
background:#FFCC99;
background:url('<%=basePath%>images/logo.jpg') no-repeat;
}
#menu{
padding: 20px 20px 0 0;/*固定菜单的位置*/
}
#menu ul{
float:right;/*使菜单位于页面右侧*/
list-style: none;
margin: 0px;
}
#menu ul li{
float: left;/*列表显示在一行*/
margin: 0 10px;/*让列与列之间产生20px距离*/
display:block;
line-height: 28px;/*确保文字在行中间与分割线保持平衡*/
}
/*竖线*/
.menuDiv {width:1px;height:28px;background:#999}
#menu ul li a:link ,#menu ul li a:visited{
font-size: 12px;
text-decoration: none;
font-weight: bold;
color: #666;
}
#menu ul li a:hover{}
#banner {
background:url('<%=basePath%>images/banner.jpg') repeat-x; /*加入背景图片*/
clear:both; /*清除浮动*/
height:10px;
}
/*页面主体*/
#PageBody{
width:950px;
margin:0 auto;
height:500px;
background:#CCFF00;
}
#sidebar{
width:160px; /*设定宽度*/
height:500px;
text-align:center; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border-right: 1px solid red;
}
#mainbody {
width:789px;
height:500px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden ;
}
/*页面底部*/
#Footer {
width:950px;
margin:0 auto;
height:50px;
background:#00FFFF;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div id="banner"></div>
</div>
<div id="pagebody">
<div id="sidebar">bottom_left</div>
<div id="mainbody">bottom_right</div>
</div>
<div id="footer"><hr size="2">ruanqiangbeyond@sina.cn</div>
</div>
</body>
</html>
- Div_CSS经典速成教程.pdf (603.3 KB)
- 下载次数: 1
- layer_demo.zip (1.5 KB)
- 下载次数: 3
分享到：
发表评论
-
css属性选择器
2017-01-08 15:11 529<!DOCTYPE html> ... -
css实现div水平、垂直都能充满整个屏幕
2015-07-12 16:15 1107@charset "UTF-8"; ... -
CSS兼容IE的透明度设置
2015-06-30 07:40 671opacity:1; filter:alpha(opac ... -
clip:rect实现图片裁剪
2015-06-19 08:18 687<html> <head> &l ... -
css实现网页全屏显示
2015-05-07 07:35 611<html> <head> ... -
css sprite布局小图标
2015-04-10 01:08 592常用网页小图标加载方式： 1、 css sprite方式， ... -
js实现div拖动
2015-02-02 22:41 437写道 http://blog.csdn.net/not ... -
Js 载入时选中文字的实现代码，需要的朋友可以参考下
2014-11-26 00:09 632<script type="text/jav ... -
CSS禁止文字选择
2014-11-25 23:28 777CSS禁止文字选择 2013-01-15 1 ... -
display:inline
2014-10-28 23:53 653<!DOCTYPE html> <htm ... -
HTML5
2014-10-17 01:11 569http://www.w3schools.com/html/h ... -
CSS 平级和儿子级样式写法
2014-09-21 23:27 1707写道 input:checked+ol:这个是讲当inop ... -
html5制作loading图
2014-08-24 19:27 795<!DOCTYPE html> <htm ... -
设置网页在浏览器中的图标
2014-08-24 18:05 832<link rel="shortcut ic ... -
CSS初始化代码
2014-08-24 17:09 749为什么要初始化CSS？ CSS初始化是指重设浏览器的样式。 ... -
html中meta标签实现页面自动刷新跳转
2014-08-24 17:08 935<!DOCTYPE HTML> <htm ... -
搜索框默认值处理
2014-05-20 00:44 1026<input name="keywords& ... -
自定义鼠标样式
2014-04-25 00:42 811IE版本处理 写道 http://blog.csdn.n ... -
网页代码常用小技巧
2014-04-25 00:03 16521. oncontextmenu="window. ... -
cursor style
2014-04-23 13:32 634cursor说明 写道 Cursor:url()的使用 ...
相关推荐
div+css布局大全 B/S项目表现层也很重要！
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
css css布局 css参考 css介绍 最全的css布局 css css布局 css参考 css介绍 最全的css布局 css css布局 css参考 css介绍 最全的css布局
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构， 然后...
资源名称：div css布局入门教程内容简介：在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了...
DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全
12天学会DIV+CSS从理论到实践的教程，强烈推介。 第一天：选择什么样的DOCTYPE ...第八天：CSS布局入门 第九天：第一个CSS布局实例 第十天：自适应高度 十一天：不用表格的菜单 十二天：校验及常见的错误
CSS布局之道供新手下载学习CSS的各种技巧，欢迎新手使用！
div+css布局制作横向带箭头步骤流程样式 div+css布局制作横向带箭头步骤流程样式 div+css布局制作横向带箭头步骤流程样式
Div+CSS布局入门教程Div+CSS布局入门教程Div+CSS布局入门教程
Div+CSS布局大全
div+css布局制作箭头步骤流程样式 - div+css教程 案例源码 志峰创业室提供技术支持微信公众平台开发,是移动互联网开发API供应商,是移动互联解决供应商
平常收集的一些CSS布局DEMO(48个) 列出几个名称供大家参考： 图片玻璃化.rar 图片滑动.rar 图片轮流切换.htm 无限级联动菜单.zip 小的树形菜单.rar 选择图片产生缩略图，最多10个.htm 页面loading（2...
DIV+CSS布局.ppt 新手易懂PPT
dvi+css布局模板，该模板是从网上下载下来的，上传的目的是积累积分，谢谢大家。
高效学习css布局之道 源代码 高效学习css布局之道 源代码
Div+CSS 布局大全.pdf 项目表现层也很重要!
常见的基本CSS布局
很好的学习实例，大家看看！！！是我写的一个div+css布局的一个例子，方便大家学习