CSS排版几点~

1、大概排版

<style type="text/css">
<!--
body {
    margin:0px;
    font-size:12px;

#container{
    position:relative;
    width:980px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;}
#banner{
    height:80px;
    border:1px solid #000000;
    text-align:center;
    background-color:#a2d9ff;
    padding:10px;
    margin-bottom:2px;
}
#content{
    float:left;
    text-align:center;
    padding-right:200px;   
}
#links{
    float:right;
    width:200px;
    border:1px solid #000000;
    margin-left:-200px;       
    text-align:center;
}
#footer{ 
    text-align:center;
    height:30px;
    border:1px solid #000000;
}

.clear { clear:both; visibility:hidden;
}
-->
</style>

<div id="container">
    <div id="banner">banner</div>
    <div id="content"></div>
    <div id="links"></div>

    <div class="clear"></div>
    <div id="footer">footer</div>
</div>

 

2、任意宽度的DIV层中的UL和LI自动居中

<style>
ol,ul{list-style:none}
#cha{ background:#00FFFF; height:50px; }
#cha ul {   text-align:center;  }
#cha li{  display:inline; padding:0 8px;}
</style>
</head>
<body>
<div id="cha">
  <ul>
    <li ><a href="/">[站长学院居中了……]</a></li>
    <li ><a href="/">[我居中了……]</a></li>
    <li ><a href="/">[我居中了……]</a></li>
    <li ><a href="/">[我居中了……]</a></li>
  </ul>
</div>

 

3、在div+css的盒子模式里,分为块元素和行内元素两种
块级元素的位置可以用margin,padding来起作用,而行内元素只可以用padding 来进行上下的设置,也可以从字面上理解,使用margin的 行只能设置左右,不能进行上下的设置

上面的<span></span>属于行内元素,所以你的margin设置是不起作用的,你可以把margin换成padding;或者用display:bolck把它变成块级元素
<div>属于块级元素了,所以可以用margin来进行设置

display常用参数:
none    此元素不会被显示。 
block   此元素将显示为块级元素,此元素前后会带有换行符。 
inline  默认。此元素会被显示为内联元素,元素前后没有换行符。 
4、词不间断换行
.wordspan { float:left; padding:5px; word-break:normal; width:auto; display:block; white-space:nowrap; }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值