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 转载请注明出处。
查看全文
相关阅读:
[转]王垠的过去和现状
支持向量机(SVM)基础
C语言编程心得
Fortran学习心得
gdb使用心得
大道至简第一章读后感
第一个音符
Exercise 1.20 最大公约数算法
Exercise 1.19 Fast Fibonacci
Exercise 1.16 1.17 1.18
原文地址:https://www.cnblogs.com/evlon/p/1338914.html
最新文章
linux eclipse 下出现undefined reference ***,在使用boost库时出现的问题
Javascript-Golbal对象
Windows Live Writer推荐SyntaxHighlighter代码着色插件
python 算法
JqGrid中文文档之TreeGrid
python操作mysql数据库
python数据类型
jQuery插件的开发
CRON表达式详解与案例
FusionCharts学习及使用笔记
热门文章
zookeeper资料
yarn查询/cluster/nodes均返回localhost
NodeManager介绍
Java高级应用简笔
java编程高级进阶
Matlab数字信号处理
信号处理基础概念比较----频谱vs功率谱vs能谱
aptitude解决Ubuntu各种依赖问题
MPI运行程序(接触)
Linux系统常用命令
Copyright © 2011-2022 走看看