CSS+DIV布局的学习

最新推荐文章于 2022-08-30 16:34:38 发布

swort_177

最新推荐文章于 2022-08-30 16:34:38 发布

阅读量1.3k

点赞数

分类专栏： javascript css 文章标签： div css border float menu class

本文链接：https://blog.csdn.net/swort_177/article/details/2021935

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

1 左右自适应布局
#left {
background-color: #FFFF33;
height:250px;
width:25%;
border:10px solid #000000;
float:left;
margin:10px;
}
#right
{

height:250px;
width:60%;
border:10px solid #000000;
background-color: #FFFF33;
float:right;
margin:10px;
}
2 float属性用来设置流布局，也就是象水一样自动流动。如果是左边的话 left就会自动和最左边的
一个对象的旁边靠齐
3 position用来设置位置的，有相对relative和绝对absolute
4 margin是用来设置对象和外面的对象之间的距离的也就是对象的边外延
.cent{
margin-top:100px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
}
左右设置为auto则为居中浏览器在判断的时候会将左右边界设置为相同距离所以会居中
顺序是上右下左
4 CSS的盒模型，对象的真实宽度是由对象的宽度+左右填充+左右边框+左右边界构成。
css注释只能用/**/

6 2列自适应布局
.left
{
float:left;
height:250px;
width:30%;
background-color:#000000;
border:1px solid:#FFFF33;
position:relative;
}
.right
{
height:250px;
background-color:#CCCC00;
margin-left:32%;
}
多应用与blog系统中，这个好正好拿来用用

7 2列左边固定右边宽度自适应
在right中不设置任何右边宽度的值
.left
{
float:left;
height:250px;
width:120px;
background-color:#000000;
border:5px solid:#FFFF33;
margin:10px;

}
.right
{
border:5px solid:#000000;
background-color:#FF0000;
margin:10px;
height:250px;
}

8 2列固定宽度居中
需要一个嵌套的div
<div id="cent" class="cent">
<div id="left" class="left">此处显示新 left 标签的内容</div>
<div id="right" class="right">此处显示新 Div 标签的内容</div>
</div>
.cent
{ margin-top:0px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
width:490px;

}
.left
{
float:left;
height:250px;
width:100px;
background-color:#000000;
border:10px solid:#FF0000;

}
.right
{
float:left;
height:250px;
width:350px;
background-color:#FF0000;
border:10px solid:#000000;
}
9 3列固定宽度布局内容自动调整
缺陷：浏览器缩的太小的话就难看了
.left
{
float:left;
height:250px;
width:200px;
background-color:#000000;
border:10px solid:#FF0000;

}
.cent
{

border:10px solid:#FFFF33;
height:250px;
width:480px;
background-color:#FF0000;
float:left;

}
.right
{
float:left;
height:250px;
width:200px;
background-color:#FF0000;
border:10px solid:#000000;

}

10 3列固定列宽度布局内容也固定了
浏览器怎么变内容都不会变
.left
{
float:left;
height:250px;
width:200px;
background-color:#000000;
border:10px solid:#FF0000;
position:absolute;
left:0px;
top:0px;

}
.cent
{

border:10px solid:#FFFF33;
height:250px;
width:440px;
background-color:#FF0000;
position:absolute;
margin-right:220px;
margin-left:220px;
margin-top:0px;

}
.right
{
float:left;
height:250px;
width:200px;
background-color:#FF0000;

border:10px solid:#000000;
position:absolute;

   left:680px;
top:0px;

}
body
{
margin:0px 0px 0px 0px;边界
padding:0px 0px 0px 0px;填充就是距离内部的多远把哪个部分填充掉
}
11   顶行三列式布局
.left
{
float:left;
height:250px;
width:200px;
background-color:#000000;
border:10px solid:#FF0000;
position:absolute;
left:0px;
top:120px;

}
.cent
{

border:10px solid:#FFFF33;
height:250px;
width:440px;
background-color:#FF0000;
position:absolute;
margin-right:220px;
margin-left:220px;
margin-top:10px;

}
.right
{
float:left;
height:250px;
width:200px;
background-color:#FF0000;

border:10px solid:#000000;
position:absolute;

left:680px;
top:120px;

}

.top
{
background-color:#0033CC;
border:10px solid:#000000;
height:100px;
margin-top:0px;
margin-right:0px;
margin-left:0px;
}
12 一个对象的高度是否使用白分比显示，取决于对象的父级对象。
例如<body>
<div class="div1">此处显示新 Div 标签的内容</div>
</body>
.div1 {
height:100%;
background-color:#FF0000;
}
高度就不能显示出100%
只有用了这个样式表后
body
{
margin:0px 0px 0px 0px;
height:100%;
}才能显示出100%

13 在使用div嵌套的时候，如果外层对象的尺寸大小不允许被改变，就是说宽和高是固定的这个时候使用填充的话如果左和上都填充20px就相当于把外层对象的宽和高都增加了20px，这时候里面对象就可能不处在中间位置了，改变的办法是把外层对象高和宽都减少20px;还有一种办法是设置内层对象的边界值，不设置外层对象的填充值

14 css导行栏动态菜单
<div id="globalLink"> <a href="#" id="gl1" class="glink" οnmοuseοver="ehandler

(event,menuitem1);">global link</a></div>
<div id="subglobal1" class="subglobalNav"> <a href="#">subglobal1 link</a> | <a

href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a>

| <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1

link</a> </div>
css如下
.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}
a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}
javascript如下
<script type="text/javascript">
    
    </script>
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;

function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = allitems;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}

function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}

function closesubnav(event)
{
if ((event.clientY <48)||(event.clientY > 107)){
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。用的时候需要修改

这个数值

    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';
    }
}
}
// -->
应用的时候注意在body里面添加方法closesubnav