老糊涂
- 浏览: 177491 次
- 性别:
- 来自: 西安
-
文章分类
- 全部博客 (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 560<!DOCTYPE html> ... -
css实现div水平、垂直都能充满整个屏幕
2015-07-12 16:15 1138@charset "UTF-8"; ... -
CSS兼容IE的透明度设置
2015-06-30 07:40 709opacity:1; filter:alpha(opac ... -
clip:rect实现图片裁剪
2015-06-19 08:18 730<html> <head> &l ... -
css实现网页全屏显示
2015-05-07 07:35 658<html> <head> ... -
css sprite布局小图标
2015-04-10 01:08 653常用网页小图标加载方式： 1、 css sprite方式， ... -
js实现div拖动
2015-02-02 22:41 473写道 http://blog.csdn.net/not ... -
Js 载入时选中文字的实现代码，需要的朋友可以参考下
2014-11-26 00:09 652<script type="text/jav ... -
CSS禁止文字选择
2014-11-25 23:28 820CSS禁止文字选择 2013-01-15 1 ... -
display:inline
2014-10-28 23:53 693<!DOCTYPE html> <htm ... -
HTML5
2014-10-17 01:11 598http://www.w3schools.com/html/h ... -
CSS 平级和儿子级样式写法
2014-09-21 23:27 1750写道 input:checked+ol:这个是讲当inop ... -
html5制作loading图
2014-08-24 19:27 836<!DOCTYPE html> <htm ... -
设置网页在浏览器中的图标
2014-08-24 18:05 855<link rel="shortcut ic ... -
CSS初始化代码
2014-08-24 17:09 778为什么要初始化CSS？ CSS初始化是指重设浏览器的样式。 ... -
html中meta标签实现页面自动刷新跳转
2014-08-24 17:08 967<!DOCTYPE HTML> <htm ... -
搜索框默认值处理
2014-05-20 00:44 1059<input name="keywords& ... -
自定义鼠标样式
2014-04-25 00:42 850IE版本处理 写道 http://blog.csdn.n ... -
网页代码常用小技巧
2014-04-25 00:03 16791. oncontextmenu="window. ... -
cursor style
2014-04-23 13:32 677cursor说明 写道 Cursor:url()的使用 ...
相关推荐
下面，我们将深入探讨div+css布局的相关知识点。 1. **Div元素**：HTML中的`<div>`（division）元素是一个通用容器，用于组合HTML元素，为页面提供结构。通过设置`<div>`的类或ID属性，我们可以对多个元素进行分组...
在描述中提到的“table布局网页转换为div+CSS布局的转换软件”能够快速高效地完成这一转变，无论是对于简化网页代码，还是提升网页性能，都有显著效果。 软件支持绝对定位和流定位，这意味着它可以处理复杂的布局...
本资源"CSS布局之道"是一个专为初学者准备的学习资料，旨在帮助新手掌握CSS布局的核心概念和技术。 1. **CSS基础知识**：首先，了解CSS的基本语法和选择器至关重要。包括ID选择器、类选择器、元素选择器等，以及...
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
这表明文档主要围绕Div和CSS布局技巧展开，且强调了项目表现层（即前端展示层）的重要性。标签“Div+CSS 布局大全.pdf”与标题一致，进一步确认了文档的分类和主要内容。在核心内容的摘录中，我们可以看到文档的结构...
下面我们将深入探讨这一主题，了解Div+CSS布局的核心概念、优势以及常见的布局模式。 1. **Div元素**：在HTML中，Div元素是一个无语义的块级元素，常用来组合其他元素或为页面创建分隔区域。通过设置CSS样式，Div...
是我写的一个div+css布局的一个例子，方便大家学习"表明这是一个实践性的教学资源，旨在帮助学习者理解并掌握如何使用div元素和CSS进行网页布局。作者通过自己的实践案例，分享了如何利用div进行内容划分，并结合CSS...
在网页设计中，掌握DIV+CSS布局对于创建响应式、高效且易于维护的页面至关重要。以下是对这个主题的详细讲解： 一、什么是DIV 是HTML中的一个通用容器元素，全称为“division”，意为划分或区域。它没有特定的语义...
"利用CSS布局到底有多难?" 这个标题暗示了我们在探讨一个常见的挑战：如何有效地使用CSS来创建美观且功能完备的网页布局。这篇博客文章可能是作者分享他在实践中的经验，讨论CSS布局的难度以及提供可能的解决方案。 ...
css css布局 css参考 css介绍 最全的css布局 css css布局 css参考 css介绍 最全的css布局 css css布局 css参考 css介绍 最全的css布局
本资源“高效学习css布局之道 源代码”旨在帮助你深入理解CSS布局，并通过源代码实践来提升你的技能。以下是关于CSS布局的一些关键知识点： 1. **盒模型**：CSS布局的基础是盒模型，每个HTML元素都被视为一个矩形...
本资源"DIV+CSS布局练习"提供了一个经典的实例，适合那些想要深入理解和掌握`CSS`与`DIV`的开发者。在这个压缩包中，你将找到一系列相关素材和练习，帮助你提升`CSS`和`DIV`布局的能力。 首先，让我们详细了解一下`...
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构， 然后...
在提到的"Ext 制作的CSS布局编辑器"中，我们可以推断这是一个基于ExtJS开发的工具，允许用户可视化地设计和编辑CSS布局。 CSS布局是网页设计的核心，它决定了元素在页面上的排列方式。传统的CSS布局方法包括流式...
资源名称：div css布局入门教程内容简介：在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了...
12天学会DIV+CSS从理论到实践的教程，强烈推介。 第一天：选择什么样的DOCTYPE ...第八天：CSS布局入门 第九天：第一个CSS布局实例 第十天：自适应高度 十一天：不用表格的菜单 十二天：校验及常见的错误
本篇文章将重点围绕Div和CSS布局展开，探讨相关知识点。 首先，Div是HTML中的一个块级元素，全称为“division”，意为“分隔”或“分区”。在网页设计中，Div常被用作容器，用于组织和管理页面内容。通过设置Div的...