div+css布局

accpxudajian

浏览: 460046 次
性别:
来自: 北京

最近访客更多访客>>

hyw100200

CloudPure

116856645

t181

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS 浏览器 F#

position如果用好了比float好用。就怕用不好，用不好的话整个页面会摊痪。建议如果position不是很熟练的话最好还是用float，float记得清除就可以了。 
clear:both; /*清除浮动*/清除浮动主要是为了不让两边显示东西,这样它一条横线就是...一条横线,不会被左右的其它的层所干扰. 

a连接格式： 
/* 链接颜色 */ 
a:link {color: #1f3a87; text-decoration:none;} 
a:hover {color: #bc2931; text-decoration:underline;} 
a:active {color: #bc2931;} 
a:visited {color: #83006f;text-decoration:none;} 

/* 颜色属性 [定义规则，小写c加颜色名称] */ 
.cRed,a.cRed:link,a.cRed:visited{ color:Red; } 
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;} 
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;} 

/* 字体属性 [定义规则，小写f加属性名称] */ 
.fB {font-weight: bold;} 
.fI {font-style: italic;} 

//css中的类.属性:顶一个cRed的class，但是只有p标签才可以用。 
<style type="text/css"> 
p.cRed{//只使用语p标签的class样式 
color:red;} 
</style> 
<div class="cRed">ddddddddddddddd</div>//不标红 
<p class="cRed">ddddddddddddddd</p>//标红 

//细线文本框 
.thintx{ 
border:1px solid black; 
} 

div布局的两种方式： 
position:absolute;top:200px;left:400px;//相对于浏览器的定位 
position:relative;left:20px;top:20px;//relative是相对定位，是相对于前面的容器定位的。 

div+css布局样例： 
<HTML> 
<HEAD> 
  <TITLE>div+css+js </TITLE> 
  <style type="text/css"> 
.div_main{ 
width:80%; 
height:100%; 
background-color:gray; 
margin-left:100px; 
} 
.div_head{ 
width:100%; 
height:100px; 
background-color:blue; 
margin-top:10px; 
} 
.div_body{ 
width:100%; 
height:60%; 
margin-top:30px; 
background-color:white; 
} 
.div_foot{ 
width:100%; 
height:50px; 
margin-top:30px; 
background-color:yellow; 
} 
.div_button1{ 
position:relative; 
height:20px; 
left:533px; 
top:60px; 

} 
.div_button2{ 
position:relative; 
left:500px; 
height:20px; 
top:80px; 
} 
<!--//采取相对定位的按钮位置： 
.div_button1{ 
position:relative; 
height:20px; 
left:93%; 
top:60px; 

} 
.div_button2{ 
position:relative; 
left:86%; 
height:20px; 
top:80px; 
}--> 
//细线边框 
.thintx{ 
border:1px solid black; 
} 
input{ 
border:1 solid black; 
color:red; 
} 
  </style> 
</HEAD> 
<BODY style="background-color:black"> 
   <!--主体---> 
<div class="div_main"> 
   <!--head---> 
   <div id="" class="div_head"> 
           
    <div  class="div_button2"><input type="button" value="登陆"/></div> 
    <div  class="div_button1"><input type="button" value="推出"/></div> 
   
   </div> 
   <!--body---> 
   <div id="" class="div_body"> 
   <!--left---> 
    <div id="" style="float:left;width:20%;height:100%;background-color:red"> 
          <div id="" style="width:100%;height:50px;background-color:blue"></div> 
      <div id="" style="width:100%;height:50px;background-color:green"></div> 
      <div id="" style="width:100%;height:50px;background-color:blue"></div> 
      <div id="" style="width:100%;height:50px;background-color:green"></div> 
    </div> 
   <!--tab---> 
     <div id="" style="height:20%;width:100%;background-color:lightgreen"> 
        <div id="" style="width:10%;height:100%;float:left;background-color:green"></div> 
           <div id="" style="width:10%;height:100%;float:left;background-color:yellow"></div> 
     <div id="" style="width:10%;height:100%;float:left;background-color:green"></div> 
    </div> 
     <!--continer---> 
   <div id="" style="width:100%;height:80%;background-color:Brown;"> 
    <div id="" style="background-color:white;width:200px;height:200px;margin:100px;padding:50px;"> 
   <form> <input type="text" class="thintx" value="ddd" /></form> 
    </div> 
    </div> 
   </div> 
    <!--foot---> 
   <div id="" class="div_foot"></div> 
   
  </div> 
</BODY> 
</HTML>

效果图>>

分享到：

堆栈和队列的demo | js控制iframe内元素

2011-02-23 14:27
浏览 1603
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

div+css布局

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

div+css布局

评论

发表评论

相关推荐

背景图片的透明方法

获取DOM对象的当前(current)样式

css文本样式系小结

兼容的带样式的INPUT

css hack积累

常用脚本

table进阶

关于字体的css

阅读犀牛书小结

混合参数的写法

dl,ul,ol小结

setCookie

css实现shadow窗口

js杂记

A标签美化checkbox

javascript和css兼容性小结

浏览器兼容的text-align写法

EasyTip 简单Tip提示窗口

css小结

三个div实现跨浏览器的text-align:center的效果

最近访客更多访客>>