论坛风格切换
您好，欢迎光临本站!   登录 注册新用户
发帖 回复
  • 51481阅读
  • 205回复

[DIV+CSS]【红黑联盟DIV+CSS】一分钟学习[每日更新] [复制链接]

 上一主题 下一主题
内蒙小唯
总版主

发帖
5566
黑豆
58
威望
17754
贡献值
0
交易币
0
红豆
86
只看该作者 20 发表于: 2012-06-15
[一分钟学习]居中
明后天不上班，所以今天直接把教程放出来，既然大家都不喜欢隐藏的东西，我就直接贴代码，懒得隐藏了。

html代码
复制代码
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>页面居中</title>
  5. <link rel="stylesheet" type="text/css" href="css/css.css" />
  6. </head>
  7. <body>
  8.     <div class="main">我在这里，哈哈</div>
  9. </body>
  10. </html>

复制代码
  1. /* CSS Document */
  2. body {margin:0;background-color:#FFF;font-size:12px;margin:0 auto;padding:0; font-family:"宋体"}
  3. div,ul,li,span,input,form,img{margin:0;padding:0;}
  4. ul li{list-style-type:none;}
  5. li { float:left}
  6. .clear{clear:both;}
  7. a{text-decoration:none;}
  8. a:link a:hover{text-decoration:none;}
  9. img{border:none;}
  11. /*主体样式开始*/
  12. .main{width:980px; margin:0 auto;background:#f00; height:50px;color:#fff}/*这行代码实现了一个宽980高50背景红色main这个层的水平居中*/
  13. .main{width:980px; margin:0 auto;background:#f00; height:50px;color:#fff; line-height:50px;}/*这行代码实现了main这个层内文字内容的垂直居中*/
  14. .main{width:980px; margin:0 auto;background:#f00; height:50px;color:#fff; line-height:50px; text-align:center}/*这行代码实现了main这个层内内容水平和垂直居中*/

水平居中的关键一个是层的宽度，一个是margin的设置。
垂直居中的关键是height的高度和line-height的高度一致。
内容的居中的关键是text-align的使用。



至于css样式表里的名称，看下雪狼童鞋的这个帖子就可以。http://bbs.2cto.com/read.php?tid=239150
命名既要你看的懂，还要别人能理解。
回复
举报
内蒙小唯
总版主

发帖
5566
黑豆
58
威望
17754
贡献值
0
交易币
0
红豆
86
只看该作者 21 发表于: 2012-06-15
忘记了一点，我这个代码没有在其他浏览器里看过，不过应该没有问题，如果有兼容问题，直接回复帖子就可以。
回复
举报
仑羽昆岚
王者专家

发帖
3699
黑豆
-1
威望
18593
贡献值
0
交易币
0
红豆
0
只看该作者 22 发表于: 2012-06-15
能不能一口气把文章写完啊,这样很吊胃口,不过还是支持下,对新手有帮助
回复
举报
内蒙小唯
总版主

发帖
5566
黑豆
58
威望
17754
贡献值
0
交易币
0
红豆
86
只看该作者 23 发表于: 2012-06-15
[一分钟学习]margin的使用
在css模型的时候我提到一描述，就是说，那个箱子距离四周墙面的，这个距离值就是margin。

想要一个元素离另一个元素有多远，其实有很多方法的，这里介绍最常用的一种，margin的使用。

首先看下集中常用的margin的值
margin{10px 0 20px 50px}
margin{10px 20px}
margin{10px}
如果margin有四个值，那么这四个值的顺序就是上右下左
如果margin有两个只，那么这个顺序就是上下，左右
如果margin只有一个值，那么他的效果等同于margin{10px 10px 10px 10px}


其实margin还有三个值的情况，第一个值表示上margin值，第二个值表示左右margin的值，第三个值表示下margin的值，但是个人不建议遇到这代码的时候这么理解可以，但是不建议这么写。
margin可以是正值也可以是负值，如果值为0的时候，后面就不用跟单位margin{10px 0 20px -50px}


margin的值最常见的不兼容就是IE6下的双倍bug，如果你代码中有margin-left:100px;但实际上在IE6下他距离左边是200px，这个时候就要在同行代码中加display:inline即可。
回复
举报
内蒙小唯
总版主

发帖
5566
黑豆
58
威望
17754
贡献值
0
交易币
0
红豆
86
只看该作者 24 发表于: 2012-06-15
回 1楼(仑羽昆岚) 的帖子
仑羽昆岚:能不能一口气把文章写完啊,这样很吊胃口,不过还是支持下,对新手有帮助 (2012-06-15 11:28) 

一口气讲完我后面讲什么咯，再说稳扎稳打，不急进
回复
举报
内蒙小唯
总版主

发帖
5566
黑豆
58
威望
17754
贡献值
0
交易币
0
红豆
86
只看该作者 25 发表于: 2012-06-19
一行两列的布局思路是，一个大的div里，包含两个小的div，一个div向左浮动，一个div向右浮动，涉及到float的使用。
float:left为左浮动
float:right为右浮动



HTML代码
复制代码
  1. <div class="bigdiv">
  2.      <div class="left">我在左面</div>
  3.      <div class="right">我在右面</div>
  4. </div>


CSS代码复制代码
  1. .bigdiv {width:300px;}
  2. .left{float:left}
  3. .right{float:right}
回复
举报
内蒙小唯
总版主

发帖
5566
黑豆
58
威望
17754
贡献值
0
交易币
0
红豆
86
只看该作者 26 发表于: 2012-06-19

[一分钟学习]一行三列布局
一行三列布局的思路就是，都向左浮动，然后对中间的那个层进行margin左右的设置。

CSS代码
复制代码
  1. .info{width:900px;background:#f00;height:50px;}
  2. .left{float:left;width:200px;background:#CC9966;height:30px; }
  3. .center{background:#666; width:200px;height:30px;float:left; margin:0 50px}
  4. .right{float:left; background:#CC6666; width:200px; height:30px;}

HTML代码
复制代码
  1. <div class="info">
  2.   <div class="left">aaa</div>
  3.   <div class="center">bbbbb</div>
  4.   <div class="right">cccc</div>
  5. </div>

同理，一行多列也是一样

复制代码
  1. .info{width:900px;background:#f00;height:50px;}
  2. .left{float:left;width:200px;background:#CC9966;height:30px; }
  3. .center{background:#666; width:200px;height:30px;float:left; margin:0 50px}
  4. .right{float:left; background:#CC6666; width:200px; height:30px; margin:0 10px}
  5. .center1{float:left;background:#ccc;width:100px;height:30px;}
  7. <div class="info">
  8.   <div class="left">aaa</div>
  9.   <div class="center">bbbbb</div>
  10.   <div class="right">cccc</div>
  11.   <div class="center1">ffff</div>
  12. </div>
回复
举报
低调的瘦子
小黑侠
发帖
20
黑豆
78
威望
16
贡献值
0
交易币
0
红豆
1
只看该作者 27 发表于: 2012-06-20
mark下~~~
回复
举报
内蒙小唯
总版主

发帖
5566
黑豆
58
威望
17754
贡献值
0
交易币
0
红豆
86
只看该作者 28 发表于: 2012-06-20
[一分钟学习] 九宫格布局

HTML代码
复制代码
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>九宫格布局</title>
  5. <link rel="stylesheet" type="text/css" href="css/css.css" />
  6. </head>
  7. <body>
  8.     <div class="jiugongge">
  9.         <ul>
  10.             <li><img src="http://bbs.2cto.com/p_w_upload/thumb/91_298516_0af04caaa6fca7c.jpg?15"></li>
  11.             <li><img src="http://bbs.2cto.com/p_w_upload/thumb/91_298516_0af04caaa6fca7c.jpg?15"></li>
  12.             <li><img src="http://bbs.2cto.com/p_w_upload/thumb/91_298516_0af04caaa6fca7c.jpg?15"></li>
  13.             <li><img src="http://bbs.2cto.com/p_w_upload/thumb/91_298516_0af04caaa6fca7c.jpg?15"></li>
  14.             <li><img src="http://bbs.2cto.com/p_w_upload/thumb/91_298516_0af04caaa6fca7c.jpg?15"></li>
  15.             <li><img src="http://bbs.2cto.com/p_w_upload/thumb/91_298516_0af04caaa6fca7c.jpg?15"></li>
  16.             <li><img src="http://bbs.2cto.com/p_w_upload/thumb/91_298516_0af04caaa6fca7c.jpg?15"></li>
  17.             <li><img src="http://bbs.2cto.com/p_w_upload/thumb/91_298516_0af04caaa6fca7c.jpg?15"></li>
  18.             <li><img src="http://bbs.2cto.com/p_w_upload/thumb/91_298516_0af04caaa6fca7c.jpg?15"></li>
  19.         </ul>
  20.     </div>
  21. </body>
  22. </html>


CSS代码
复制代码
  1. /* CSS Document */
  2. body {margin: 0;background-color: #FFF;font-size:24px;margin:0 auto;padding:0; font-family:"微软雅黑"}
  3. div,ul,li,span,input,form,img{margin:0;padding:0;}
  4. ul li{list-style-type:none;}
  5. li { float:left}
  6. .clear{clear:both;}
  7. a{text-decoration:none;}
  8. a:link a:hover{text-decoration:none;}
  9. img{border:none;}
  11. /*主体样式开始*/
  12. .jiugongge{width:450px; text-align:center; background:#e7e7e7;height:440px;padding-top:10px}
  13. .jiugongge li{width:150px; float:left; height:150px; }
  14. .jiugongge li img{width:100px; height:100px; padding:10px; border:1px solid #ccc}

最终效果




九宫格涉及到的属性是li和float，我个人比较习惯直接定义li的宽度，然后在进行浮动，也有人习惯使用margin来对li的距离进行控制，两种方法都可以，但是使用margin对li进行距离控制的时候注意display:inline;的使用防止IE6下双倍bug。
回复
举报
wking
中级菜鸟

发帖
239
黑豆
101
威望
255
贡献值
0
交易币
0
红豆
1
只看该作者 29 发表于: 2012-06-20
支持支持
回复
举报
发帖 回复
快速回复
限100 字节
 
上一个 下一个