CSS网页切图实例教程下

作者:divcss教程吧      点击次数:1262次     发布日期:2015-06-06

CSS网页切图实例教程下

CSS网页切图实例教程上

7、导航的制作,是一个典型的ULLI列表。我们先写出HTML代码,而在我们导航列表之间有一个竖线隔开。

CSS网页切图实例

<ul>

             <li><a href="#">divcss8.com首页</a>|</li>

        <li><a href="#">关于捷福</a>|</li>

        <li><a href="#">产品信息</a>|</li>

        <li><a href="#">新闻动态</a>|</li>

        <li><a href="#">人力资源</a>|</li>

        <li><a href="#">公司首页</a>|</li>

         <li><a href="#">公司首页</a>|</li>

          <li><a href="#">公司首页</a>|</li>

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

</ul>

根据HTML去写CSS样式。

#nav{

          height:25px;

          background:#000;

          }

CSS样式代码的解释:

导航的父元素DIV设定高度。然后设定背景颜色为黑色

#nav ul{

          list-style:none;

          padding-left:10px;

          }

CSS样式代码的解释:

让导航UL去掉默认小圆点。让整体UL居左空一定距离。

#nav ul li{

          color:#fff;

float:left;

line-height:25px;

          }

CSS样式代码的解释:

让导航中具体项目文字颜色改成白色,因为LI元素是块元素的。所以我们为其设置浮动。这样就能让导航同一行显示。line-height:25px;是为了让LI在导航垂直居中。

#nav ul li a{

          color:#FFF;

          font-size:13px;

          padding:0px 15px;

          text-decoration:none;

          }

CSS样式代码的解释:

设置导航的链接状态,为什么设置两次颜色,LI设置白色,最主要是为了竖线用的。而链接只能通过A这个样式进行设置。而且         padding:0px 15px;这个属性是针对竖线使其在两个导航文字正中间。

#nav ul li a:hover{

          color:#FF0;

         }

 CSS样式代码的解释:

设置鼠标悬停时。改变一下链接的颜色

8、设置网页主体内容区域:在之前已经分析过了。这是一个典型的两列居中布局。我们是让<div id="main">4</div>先设置宽度,并让其居中。然后在这个DIV中再嵌套DIV。然后让嵌套的DIV两列布局

CSS网页切图实例教程下

HTML代码:

<div class="sider">

             <h4>公司新闻</h4>

        <ul>

                 <li><a href="#">这是新闻标题1</a><span>2015-5-10</span></li>

            <li><a href="#">这是新闻标题2</a><span>2015-5-10</span></li>

        <li><a href="#">这是新闻标题1</a><span>2015-5-10</span></li>

            <li><a href="#">这是新闻标题2</a><span>2015-5-10</span></li>

 

        </ul>

</div>

<div class="container">

    <h4>公司产品</h4>

     <dl>

            <dt><img src="images/chanpin.jpg"/></dt>

        <dd>HD32B68S</dd>

        <dd>所属类别: CRT外壳</dd>

        <dd>名称: HD32B68S </dd>

        <dd>浏览数: 52 次 </dd>

     </dl>

     <dl>

            <dt><img src="images/chanpin.jpg"/></dt>

        <dd>HD32B68S</dd>

        <dd>所属类别: CRT外壳</dd>

        <dd>名称: HD32B68S </dd>

        <dd>浏览数: 52 次 </dd>

     </dl>

</div>

HTML代码解释:

  1. 栏目名称标题。我们采用H4或者H3标记,一方面有利于样式的编写,二方面来说。在网站优化方面,相对比较重要的文字,在这里采用H4
  2. 新闻典型的ULLI列表
  3. 而右侧产品。使用的是DL DT DD叙述式清单。DT往往用于标题。而DD用于描述。这样的话。我们可以认为产品图片是标题。而产品的各个属性是描述。

最后进行样式的编写

#main{

         clear:both;

         padding:20px 0px;

         }

CSS样式代码的解释:

  1. clear:both;表示清除浮动。为什么要写这个。是因为导航的LI元素写浮动了。 而且如下图所示:会有一部分空白。这样就会影响下方网页内容。所以在主体内容上要先清除浮动。 CSS网页切图实例教程下
  2. padding:20px 0px;让主体内容居顶与居顶留一定间隔

#main .sider{

         width:370px;

         margin:0px 20px;

         float:left;

         }

CSS样式代码的解释:

是个两列布局,先让左侧新闻模块。设置宽度,并且float浮动。然后设置与产品模块的间距。

#main .sider h4,#main .container h4{

         background:url(images/libiao.jpg) no-repeat;

         text-indent:2em;

         font-size:14px;

         padding-bottom:5px;

         }

CSS样式代码的解释:

  1. 新闻的栏目名称与产品栏目是一样的,所以用到一个群组选择符
  2. 我们栏目名称小图标做成背景。让文字缩进,再控制一下文字大小即可。

#main .sider ul{

         list-style:none;

         }

#main .sider ul li {

        

         height:24px;

         line-height:24px;

         border-bottom:1px dotted #ccc;

         }

CSS样式代码的解释:

让新闻列表设置一定高度,并且垂直居中。在底部加一条虚线(border-bottom:1px dotted #ccc;

)    

#main .sider ul li a{

         font-size:13px;

         text-decoration:none;

         color:#666;

         }

CSS样式代码的解释:

控制新闻列表的链接状态:去掉下划线text-decoration:none;设置文字颜色

#main .sider ul li a:hover{

         color:#F00;

         }

#main .sider ul li span{

                   font-size:13px;

                            color:#666;

         padding-left:60px;

         }

#main .container{

         width:570px;

         margin:0px 20px 0px 0px;

         float:left;

         }

CSS样式代码的解释:

  1. 设置产品内容区域宽度与浮动
  2. 最后 570PX+20PX+370PX+40PX 正好1000PX。这个地方是典型的盒模型。要理解。这些值都是怎么得来的。

#main .container dl{

         width:260px;

         float:left;

         }

CSS样式代码的解释:

我们采用DL清单列表,这样的话。我们的产品是并列。只需要让DL浮动一下即可。也有利于后台程序循环输出内容

#main .container dl dt{

         float:left;

         }

CSS样式代码的解释:

让DL中的标题DT浮动

#main .container dl dd{

         font-size:13px;

         color:#333;

         text-indent:1em;

         height:22px;

         }

 CSS样式代码的解释:

最后控制产品描述的文字具体属性就可以。

建议大家采用DL DT DD去写

大家可以尝试写一下底部信息

作者:css教程 www.divcss8.com

 

分享DIVCSS8