zoukankan
html css js c++ java
CSS布局有头有尾左中右三分
要实现一个类似框架结构,有头有尾,中间部分要分菜单、分隔条和内容三部分。
写好的效果图如下:
下面是实现代码:(CSS和HTML放一个文件了)
Code
<!
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
>
<
title
>
Untitled
</
title
>
<
script
src
="jquery.js"
type
="text/javascript"
></
script
>
<!--
STYLE
-->
<
style
>
div
{
}
{
margin
:
0px
;
}
.divWrap
{
}
{
height
:
100%
;
background
:
#ccc
;
margin-left
:
205px
;
}
.divWrap .divleft
{
}
{
float
:
left
;
background
:
#FF7400
;
height
:
100%
;
width
:
205px
;
margin-left
:
-205px
;
display
:
inline
;
/**/
/*
下面这两行解决IE6双倍Margin的问题
*/
position
:
relative
;
}
.divWrap .divright
{
}
{
float
:
right
;
background
:
#fefefe
;
height
:
100%
;
width
:
100%
;
}
.divWrap .divright .divInnerWrap
{
}
{
height
:
100%
;
margin-left
:
10px
;
}
.divWrap .divright .divInnerWrap .divInnerLeft
{
}
{
position
:
relative
;
float
:
left
;
background
:
red
;
height
:
100%
;
width
:
10px
;
margin-left
:
-10px
;
border
:
solid 1px red
;
}
.divWrap .divright .divInnerWrap .divInnerRight
{
}
{
float
:
right
;
background
:
white
;
height
:
100%
;
width
:
100%
;
}
.divWrap .divright .divInnerWrap .divInnerRight .divContainer
{
}
{
margin 0px;
/**/
/*
color:blue;
*/
}
.dheader
{
}
{
background
:
#eee
;
height
:
50px
;
}
.dfooter
{
}
{
background
:
#eee
;
height
:
50px
;
}
body
{
}
{
margin
:
0px
;
}
a.line
{
}
{
color
:
blue
;
cursor
:
hand
;
}
</
style
>
</
head
>
<
body
>
<!--
HTML
-->
<
div
id
="all"
>
<
div
class
="dheader"
>
header
</
div
>
<
div
class
="divWrap"
>
<
div
class
="divleft"
>
我是左边
<
br
><
br
><
br
><
br
><
br
></
div
>
<
div
class
="divright"
>
<
div
class
="divInnerWrap"
>
<
div
class
="divInnerLeft"
><
a
href
="#"
class
="line"
>
>
</
a
></
div
>
<
div
class
="divInnerright"
>
<
div
class
="divContainer"
>
这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀
</
div
>
</
div
>
<
div
style
="clear:both"
></
div
>
</
div
>
</
div
>
<
div
style
="clear:both"
></
div
>
</
div
>
<
div
class
="dfooter"
>
footer
</
div
>
</
div
>
<!--
JS
-->
<
script
stype
="text/javascript"
>
var
height
=
Math.max(document.body.clientHeight, document.documentElement.clientHeight);
height
=
height
-
100
;
$(
"
#all
"
).css(
"
height
"
,height
+
'
px
'
);
</
script
>
</
body
>
</
html
>
QQ:273352165 evlon#126.com 转载请注明出处。
查看全文
相关阅读:
在sql2005中附加数据库时出现无法打开物理文件
设置和获取文本框中的光标位置
Dock(停靠)优先小经验
asp.net(c#)GridView实现鼠标悬停高亮显示
C# 截取屏幕个人总结
【作品发布】将硬盘分区为整数的方法
C# 调用系统“运行”功能
Linq 在绑定控件后,DataItem的用法
(一)先配置一些程序 小青年
ruby中的File操作 小青年
原文地址:https://www.cnblogs.com/evlon/p/1338914.html
最新文章
SQL Server数据库表锁定原理以及如何解除表的锁定
B2B网站对接支付宝接口
GAC
分享一个调试多解决方案下的分布式项目的小技巧
ASP.NET配置文件machine.config与性能
进程、线程与JVM、CLR
DataGridView
用悲观并发方式处理数据库并发冲突以保证数据一直性的代码处理方法
数据库中乐观锁与悲观锁的概念
用乐观并发方式处理数据库并发冲突以保证数据一直性的代码处理方法
热门文章
windows 7 64位 安装oracle 11g R2
我们做错了什么?3周了,一毛钱也没赚到!
SqlServer 巧妙解决 多条件组合查询
三大UML建模工具Visio、Rational Rose、PowerDesign的区别
android 利用SimpleDateFormat格式化时间不准确的问题
40+ Beautiful Themes/Skins For Adobe Flex Apps
oracle 11g database control 证书错误
C/C++二维数组名和二级指针
使用ani鼠标指针
【作品发布】Tuff Renamer 1.0.1.1
Copyright © 2011-2022 走看看