css+div——一周半的总结

      这个星期学习了css+div，一开始用div过度，在小赖（头）的带领下，终于开始有点自己的想法，在这里跟大家分享一下。

1.下面是一般模版里面的文件

下面是在style文件里 

这里有两个image 但是放的图片分类不一样，在style里面放的是布局的背景图片，比如background之类的

而在第一个的image里面主要放的是img标签的图片。

2.页面居中方法有两种

第一种：

.container{

  width:1070px;

  margin-left:auto;

 margin-right:auto;

}

  margin-left:auto;margin-right:auto;这个可以写成margin:0 auto;相当于 margin-top:0px;margin-bottom:0px; margin-left:auto;margin-right:auto;

第二种：

.container{

  position:absolute;

  width:1070px;

  height:1000px;

  left:50%;

  top:50%;

 margin-top:-500px;

 margin-left:-535px;

}

这个对页面只有一个窗口类似下面的效果会更好，不管你屏幕怎么变，总会显示在屏幕中间。

3.关于class和id

class 可以重复用但是id是唯一的，一般id用在比较外围的div里面，这样方便js查找你要的元素。

一般来说#header  .logo 比较经常看到，而.header #logo比较画蛇添足，因为id本来就是唯一的，没必要加个.header.

 

4.关于背景：

这个sidebar你会怎么实现呢？

首先这个先定义sidebar的背景为下面的，当然要顺便定义高度和宽度，以便更好的显示。

这个图片背景有阴影，这个可以设sidebar 的border:1px solid #ccc;或者在弄背景的时候记得把黑色边框截上。然后用ul和li来处理里面的数据，

对标题的处理：

#sidebar  li ：first-child{

background:url(image/sidebarul-bg.png) no-repeat;
padding:10px 0;
margin-left:17px;
font-weight:700;

}

5.对于一排的标签怎么写--O(∩_∩)O~没有标准答案，但是下面的方法大家可以参考

<div class="lnk">
<span><a href="#">Other links</a></span><span><a href="#">Other links</a></span> 

<span><a href="#">Other links</a></span> <span><a href="#">Other links</a></span>
<span><a href="#" style="border:none;">Other links</a></span>

</div>

css:

 .lnk a{
padding:0 8px;
border-right:1px solid #B5B7B6;/*这个就是横线产生的东西*/
color:#676969;
}

6.clearfix

这个东西挺好用的

 <div class="header">

 </div>

<div class="container">

    <div class="sidebar">

    </div>

    <div class="content">

    </div>

</div>

<div class="footer">

 </div>

在这个div里面要是.sidebar{float：left;height:100px;}  .content{float:right;height:200px;}

你也许会发现你的页面下的footer显示跟header黏在一起。其实这是因为是float所以container没有高度。所以修改<div class="container clearfix">这样conrainer就有高度了

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

 

虽然这一个半星期都在写同样页面的css，有点无聊，但是发现收获挺大的，再次感谢小赖（头）。