zoukankan
html css js c++ java
三行两列DIV布局之左固定宽度
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
html
>
<
head
>
<
title
>
Untitled
</
title
>
<
style
type
="text/css"
>
body
{
}
{
/**/
/*
布局样式
*/
text-align
:
center
;
/**/
/*
这里,配合DIV的margin,设置DIV水平居中
*/
}
#layout_header, #layout_footer
{
}
{
/**/
/*
布局样式
*/
margin
:
0px auto
;
/**/
/*
水平居中
*/
width
:
98%
;
}
#layout_header
{
}
{
/**/
/*
这里可以自定
*/
height
:
50px
;
}
#layout_container
{
}
{
/**/
/*
布局样式
*/
margin
:
0px auto
;
/**/
/*
水平居中
*/
width
:
50%
;
/**/
/*
这里可以自定
*/
text-align
:
left
;
background-color
:
#CCE7FF
;
border
:
solid 1px red
;
}
#layout_right_layout
{
}
{
/**/
/*
布局样式
*/
width
:
100%
;
margin
:
2px 0px 2px -100%
;
float
:
right
;
}
#layout_right
{
}
{
/**/
/*
布局样式
*/
float
:
left
;
margin
:
0px 0px 0px 170px
;
/**/
/*
这里对应左侧栏的宽度
*/
/**/
/*
这里可以自定
*/
background-color
:
#fff
;
}
#layout_left
{
}
{
/**/
/*
布局样式
*/
float
:
left
;
width
:
160px
;
/**/
/*
左侧栏的宽度
*/
margin
:
2px 0px 2px 0px
;
/**/
/*
这里可以自定
*/
background-color
:
#eef6ff
;
}
</
style
>
</
head
>
<
body
>
<
div
id
="layout_header"
>
这里头
</
div
>
<
div
id
="layout_container"
>
<
div
id
="layout_right_layout"
>
<
div
id
="layout_right"
>
asdfasdf
<
table
style
="border:solid 1px red;100%;"
border
="0"
cellpadding
="0"
cellspacing
="0"
id
="lable"
>
<
tr
>
<
td
>
<
span
id
="ctl00_WebSiteNavigate1_labelPageDescription"
>
对会员进行查询列表
</
span
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
div
>
<
div
id
="layout_left"
>
这里写菜单
</
div
>
<
div
style
="clear: both;display: block"
>
</
div
>
<!--
这里解决FF 中 layout_container 高度不能自适应
-->
</
div
>
<
div
id
="layout_footer"
>
这里有版权
</
div
>
</
body
>
</
html
>
QQ:273352165 evlon#126.com 转载请注明出处。
查看全文
相关阅读:
SpringCloud之Eureka注册中心
微服务入门概念
迁移桌面程序到MS Store(3)——开机自启动
迁移桌面程序到MS Store(2)——Desktop App Converter
迁移桌面程序到MS Store(1)——通过Visual Studio创建Packaging工程
[UWP]涨姿势UWP源码——适配电脑和手机
[UWP]涨姿势UWP源码——UI布局
微软2017MVP大礼包拆箱攻略
[UWP]涨姿势UWP源码——Unit Test
[UWP]涨姿势UWP源码——IsolatedStorage
原文地址:https://www.cnblogs.com/evlon/p/1009286.html
最新文章
Tree
Tree
Tree
Tree
DeepLearning
Deeplearning
DeepLearning
iOS开发简记(1):指定APP的图标与启动图
我的一位月薪两万单身的程序员同学在跟妹子聊天时,被妹子说了一句:你不会是程序员吧?
如何使用chrome浏览器进行js调试找出元素绑定的点击事件
热门文章
如何打造网站克隆、仿站工具(C#版)
一步步教你如何打造一个网站克隆工具仿站
分享我本人打造微信公众号吸粉引流的恶搞方法
分享我编程工作经历及对软件开发前景的看法
示教编程技术,离线编程技术,自主编程技术,你精通哪种?
工业机器人网首页金币掉落特效分析及实现
springmvc入门及模拟springmvc
javaweb之Servlet,http协议以及请求转发和重定向
SpringCloud之Feign声明式服务调用
SpringCloud之Ribbon负载均衡
Copyright © 2011-2022 走看看