【CSS】CSS前期回顾（3）

1、再在与<div id="header">并列的地方增加如下HTML内容

<div id="continer">

   <div id="content">

       <ul id="depthPath">

   <li><a href="#">首页</a></li>

    <li><a href="#">案例剖析</a></li>

    <li><a href="#">核心原理</a></li>

</ul>

<h2>核心原理、技巧运用</h2>

<div id="contentBody">

    <p>这是正文</p>

</div>

   </div>

   <div id="sideBar">

   </div>

   <div id="footer">

   </div>

</div>

效果如下：

2、设置外层的continer居中对齐，并设置固定宽度为758，与上面的标题菜单等宽

#continer

{

   width:758px;

   margin:0 auto;

   background:#444 url(images/background-2-cols.gif) repeat-y;

}

这里又引入了几个背景图像，分别为：

（1）background-2-cols.gif

通过这个图像的竖直方向扩展，很容易形成如下效果：

（2）cap_content.gif

这个图像不平铺

（3）cap_sideBar.gif

这个图像也不平铺

（4）bottom-2-cols.gif

这个图像在最下面，不平铺

所以四个图像组合的最终效果如下：

其CSS部分为：

#continer

{

   width:758px;

   margin:0 auto;

   background:#444 url(images/background-2-cols.gif) repeat-y;

}

#content

{

   width:512px;

   float:left;

   padding:0 50px 0 0px;

   transparent  url(images/cap_content.gif) no-repeat;

}

#sideBar

{

   width:187px;

   float:right;

   padding:13px 2px 0px;

   transparent  url(images/cap_sideBar.gif) no-repeat;

}

#footer

{

   clear:both;

   background:#444 url(images/bottom-2-cols.gif) no-repeat;

   padding-top:50px;

}

页面的效果为：

3、设置导航

#content #depthPath

{

   margin:5px 0 0 5px;;

   padding:0;

}

#content #depthPath li

{

   display:inline;

}

#content #depthPath li a

{

   color:#000;

   padding:0 5px 0 6px;

   url(images /arrow.gif) no-repeat left center;

}

效果如下：

4、设置正文标题

#content h2

{

   margin:0px;

   font-size:25px;

   font-family:黑体;

}

效果如下：

5、向sideBar中追加一些记录

<div id="sideBar">

   <ul>

       <li>AJAX研究</li>

<li>Web前端</li>

<li>Struts</li>

<li>HTML5的学习</li>

<li>脚本语言</li>

<li>Spring</li>

   </ul>

</div>

6、设置sideBar的显示

#sideBar ul

{

   list-style-type:none;

   margin:0px;

   padding:0px;

}

#sideBar ul li

{

   border-top:1px #555 solid;

   font-size:11px;

   line-height:2em;

}

#sideBar li a

{

   display:block;

   color:#ccc;

   padding:0px 20px;

   text-decoration:none;

   height:1%;

}

#sideBar li a:hover

{

   background-color:#6E6E6E;

}

显示效果如下：

至此，CSS学习告以段落，其中基本知识已学完，后面的修行还需要不断地研磨别人的网页进行提升。