![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css常用布局 (推荐)
share4318
这个作者很懒,什么都没留下…
展开
-
三行(一列:内容)(1)
#header{ width:100%; background:#A94E38; color:#F0DFDB} 高度自动,宽度100% 提示:先去掉body的初始样式 *,html,body{margin:0;padding:0;}#content#content{ width:100%; background:#fff} 只是定义了宽度为100%,背景为白色与body色加转载 2006-11-19 22:09:00 · 344 阅读 · 0 评论 -
平滑圆角水平菜单
#pointermenu{border-top: 7px solid black; /*optional border across top*/margin: 0;padding: 0;}#pointermenu ul{margin: 0;margin-left: 15px; /*菜单距离窗口左边的距离*/float: left;padding-left: 8px;font: bold 13px转载 2006-11-19 22:49:00 · 332 阅读 · 0 评论 -
斜边水平CSS菜单
#slantedmenu{font-weight: bold;font-size: 90%;}#slantedmenu:after{ /*在FF中增加菜单末尾的边距*/content: ".";display: block;height: 0;clear: both;visibility: hidden;}#slantedmenu ul{text-indent: 10px;padding: 3px转载 2006-11-19 22:45:00 · 592 阅读 · 0 评论 -
css 可爱的圆角菜单
/*定义菜单的主框架*/#outer ul {margin:3em; padding:0; list-style-type:none; background:transparent; height:3em;}/*菜单选项向左浮动,达到水平效果*/#outer li {display:block; float:left;}/*这个outer是外面灰色的div部分,可以改成别的颜色*/#outer {转载 2006-11-19 22:42:00 · 560 阅读 · 0 评论 -
css 非常酷的渐变水平菜单
#stylefour{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(media/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;bord转载 2006-11-19 22:36:00 · 406 阅读 · 0 评论 -
css 固定垂直边栏
*{margin:0;padding:0;}html,body{ background:#F0DFDB; height:100%; width:100%; overflow:hidden}#wrap{ height:100%; overflow:auto; overflow-x:hidden; width:100%}h3{ font-size:18px; }p{ padding:20px; }#h转载 2006-11-19 22:21:00 · 374 阅读 · 0 评论 -
三行(三列:内容+2边栏)内容处于两边栏上方(100%)
#header去掉默认的样式:*,html,body{margin:0; padding:0;}#header:#header{ width:100%; background:#A94E38; color:#F0DFDB;}#content#content{ width:100%; float:left; background:#fff; }放在两bar的前面左浮动转载 2006-11-19 22:20:00 · 305 阅读 · 0 评论 -
三行(三列:内容+2边栏) 100%宽,bar| content | bar
#header去掉默认的样式:*,html,body{margin:0;padding:0;}#header:#header{ width:100%; background:#A94E38; color:#F0DFDB;}注意:要针对IE的DIV下掉问题,可以在float的DIV里加上overflow:hidden来解决。 #bar-l#bar{width:30%; flo转载 2006-11-19 22:19:00 · 317 阅读 · 0 评论 -
三行(两列:边栏+内容) 780px固定宽,靠左
#header首先将*,html,body的margin换成了margin:0 auto 0 0;这样基本所包含的元素都能自动靠左。接下来限制下#wrap的宽度,换成780px;那么包含在里面的元素依然可以使用百分比宽度,只不过是相对于#wrap的宽度而已。#wrap{ width:780px; }#header{ width:100%; background:#A94E38; color转载 2006-11-19 22:16:00 · 342 阅读 · 0 评论 -
三行(两列:边栏+内容) (1)
#header#header{ width:100%; background:#A94E38; color:#F0DFDB;} 高度自动,宽度100% 提示:先去掉html的初始样式 *,html,body{margin:0;padding:0;}#bar#bar{width:30%; float:left; background:#eee }左浮动,宽30%转载 2006-11-19 22:11:00 · 316 阅读 · 0 评论 -
三行(一列:内容)(2)
#header{ width:780px; background:#A94E38; color:#F0DFDB} 高度自动,宽度780px 提示:先去掉body的初始样式,并将margin设置为0 auto便可实现居中 *,html,body{margin:0 auto;padding:0;}#content#content{ width:780px; background转载 2006-11-19 22:10:00 · 265 阅读 · 0 评论 -
css 水平的垂直文字菜单
#vertical {width:15em;padding:0;margin:0 auto;list-style-type:none;font-size:1.4em;font-family:georgia, "times new roman", serif;}#vertical li {float:left;border:0.2em solid #eee;margin:0.1em;}#vertic转载 2006-11-19 22:52:00 · 367 阅读 · 0 评论