(二)HTML 局部布局

1、本章教大家2种布局方式:

    1)使用div + ul - li           实现导航菜单
    2)使用div + dl - dt - dd  实现购物版块


    1)导航菜单,效果图:   


    2)购物版块,效果图:


    


2、局部布局一般使用如下的技术:
    1)div + ul(ol)-li:        用于分类导航或菜单等场合
    2)div + dl-dt-dd:      用于图文混编场合
    3)table-tr-td:           用于图文布局或显示数据的场合
    4)form + table-tr-td:用于布局表单的场合


3、实现导航菜单:


    3.1)布局结构分析,如图:
    
   

    结构代码(完整版):

Html代码   
  1.      "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5.     <title>首页title> 
  6.      
  7.     <link href="css/main.css"rel="stylesheet"type="text/css"/> 
  8. head> 
  9. <body> 
  10. <div id="panel">        
  11.     <div id="header"> 
  12.         <divid="logo">div> 
  13.         <divid="menu"> 
  14.             <ul> 
  15.                 <li><ahref="#">首页a>li> 
  16.                 <li><ahref="#">家用电器a>li> 
  17.                 <li><ahref="#">手机数码a>li> 
  18.                 <li><ahref="#">日用百货a>li> 
  19.                 <li><ahref="#">书籍a>li> 
  20.                 <li><ahref="#">帮助中心a>li> 
  21.                 <li><ahref="#">免费开店a>li> 
  22.                 <li><ahref="#">全球咨询a>li> 
  23.             ul> 
  24.         div> 
  25.     div>        
  26. div> 
  27. body> 
  28. html> 
[html]  view plain  copy
 
  1.      "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  2.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title>首页title>  
  6.       
  7.     <link href="css/main.css" rel="stylesheet" type="text/css" />  
  8. head>  
  9. <body>  
  10. <div id="panel">         
  11.     <div id="header">  
  12.         <div id="logo">div>  
  13.         <div id="menu">  
  14.             <ul>  
  15.                 <li><a href="#">首页a>li>  
  16.                 <li><a href="#">家用电器a>li>  
  17.                 <li><a href="#">手机数码a>li>  
  18.                 <li><a href="#">日用百货a>li>  
  19.                 <li><a href="#">书籍a>li>  
  20.                 <li><a href="#">帮助中心a>li>  
  21.                 <li><a href="#">免费开店a>li>  
  22.                 <li><a href="#">全球咨询a>li>  
  23.             ul>  
  24.         div>  
  25.     div>         
  26. div>  
  27. body>  
  28. html>  

    3.2)CSS样式分析(main.css文件代码):  

    /*注意:案例中使用的图片在页面下方提供有下载*/
    /*在开发阶段,为div加入边框,便于调整和判断div的位置*/

    div{
        border: 1px solid blue;
    }
    body{
        margin: 0px;
        padding: 0px;
    }
    /*主面板div样式*/
    #panel{   
        width: 980px;
        margin: 0px auto;/*div居中显示*/
    }
    /*顶部div样式*/
    #header{
        /*设置div的背景图片*/
        background-image: url(images/h_bg.jpg);
        height: 132px;
    }
    /*网站logo DIV样式*/
    #logo{
        width: 290px;
        height: 98px;
    }
    /*导航主菜单DIV样式*/
    #menu{
        height: 32px;
    }
    /*无序列表与列表项消除间距*/
    ul, li{
        margin: 0px;
        padding: 0px;
    }
    /*列表项样式*/
    #menu li{
        float: left; /*所有列表项水平排列*/
        width: 84px;
        height: 32px;
        text-align: center;
        list-style:none; /*去掉列表项的样式(小圆点)*/
        line-height: 32px;/*行高*/
        font-weight: bold;/*字体加粗*/
        font-size: 13px;
    }
   /*超链接样式*/
    #menu a, #menu a:hover{
        color: #333333; /*深灰色*/
        text-decoration: none;/*去下划线*/
        height: 32px;
        width: 84px;
        /*
        将a标签设置为"块级呈现",当鼠标移动到
        a标签上时便于呈现出全尺寸的高亮背景图片
        */

        display: block;
    }
    /*当鼠标移动到a标签上时的样式*/
    #menu a:hover{
        background-image: url(images/nav_bg.png);
        background-repeat: no-repeat;/*背景图片不平铺*/
        background-position: center center;/*背景图片水平、垂直居中*/
    }


    
4、实现购物版块:
    4.1)布局结构分析,如图:
    
    
    结构代码(完整版): 

Html代码   
  1.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <title>购物版块演示title> 
  5.      
  6.     <link href="style.css"rel="stylesheet"type="text/css"/> 
  7. head> 
  8. <body> 
  9. <div id="shopping"> 
  10.     <dl> 
  11.         <dt><imgsrc="images/1.jpg"/>dt> 
  12.         <dd>时尚产品1dd> 
  13.     dl> 
  14.     <dl> 
  15.         <dt><imgsrc="images/2.jpg"/>dt> 
  16.         <dd>时尚产品2dd> 
  17.     dl> 
  18.     <dl> 
  19.         <dt><imgsrc="images/3.jpg"/>dt> 
  20.         <dd>时尚产品3dd> 
  21.     dl> 
  22.     <dl> 
  23.         <dt><imgsrc="images/4.jpg"/>dt> 
  24.         <dd>时尚产品4dd> 
  25.     dl> 
  26.     <dl> 
  27.         <dt><imgsrc="images/5.jpg"/>dt> 
  28.         <dd>时尚产品5dd> 
  29.     dl> 
  30.     <dl> 
  31.         <dt><imgsrc="images/6.jpg"/>dt> 
  32.         <dd>时尚产品6dd> 
  33.     dl> 
  34.     <dl> 
  35.         <dt><imgsrc="images/7.jpg"/>dt> 
  36.         <dd>时尚产品7dd> 
  37.     dl> 
  38.     <dl> 
  39.         <dt><imgsrc="images/8.jpg"/>dt> 
  40.         <dd>时尚产品8dd> 
  41.     dl> 
  42.     <dl> 
  43.         <dt><imgsrc="images/9.jpg"/>dt> 
  44.         <dd>时尚产品9dd> 
  45.     dl> 
  46. div> 
  47. body> 
  48. html> 
[html]  view plain  copy
 
  1.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>购物版块演示title>  
  5.       
  6.     <link href="style.css" rel="stylesheet" type="text/css" />  
  7. head>  
  8. <body>  
  9. <div id="shopping">  
  10.     <dl>  
  11.         <dt><img src="images/1.jpg" />dt>  
  12.         <dd>时尚产品1dd>  
  13.     dl>  
  14.     <dl>  
  15.         <dt><img src="images/2.jpg" />dt>  
  16.         <dd>时尚产品2dd>  
  17.     dl>  
  18.     <dl>  
  19.         <dt><img src="images/3.jpg" />dt>  
  20.         <dd>时尚产品3dd>  
  21.     dl>  
  22.     <dl>  
  23.         <dt><img src="images/4.jpg" />dt>  
  24.         <dd>时尚产品4dd>  
  25.     dl>  
  26.     <dl>  
  27.         <dt><img src="images/5.jpg" />dt>  
  28.         <dd>时尚产品5dd>  
  29.     dl>  
  30.     <dl>  
  31.         <dt><img src="images/6.jpg" />dt>  
  32.         <dd>时尚产品6dd>  
  33.     dl>  
  34.     <dl>  
  35.         <dt><img src="images/7.jpg" />dt>  
  36.         <dd>时尚产品7dd>  
  37.     dl>  
  38.     <dl>  
  39.         <dt><img src="images/8.jpg" />dt>  
  40.         <dd>时尚产品8dd>  
  41.     dl>  
  42.     <dl>  
  43.         <dt><img src="images/9.jpg" />dt>  
  44.         <dd>时尚产品9dd>  
  45.     dl>  
  46. div>  
  47. body>  
  48. html>  

  

   4.2)CSS样式分析(style.css文件代码):

   /*注意:案例中使用的图片在页面下方提供有下载*/
    /*购物版块div样式*/

    #shopping{
        width: 504px;
        height: 390px;
        margin: 0px auto;
        background-image: url(images/bg.gif);
        background-repeat: no-repeat;
        padding: 40px 10px 10px 15px;
        overflow: hidden;/*div内容超出部分隐藏*/
    }
    /*消除dl dt dd之间的间距*/
    dl, dt, dd{
        margin: 0px;
        padding: 0px;
    }
    /*dl样式*/
    dl{
        float: left;/*将所有dl并排显示*/
        width: 160px;
    }
    /*dt样式(商品的图片放在dt内)*/
    dt{
        height: 95px;
        text-align: center;
        /*内容垂直居中,只对具有valign属性的标签有效*/
        vertical-align: middle;
    }
    /*dd样式(商品的文字放在dd内)*/
    dd{
        height:40px;
        text-align:center;
    }




参考1)----选择器


    符号              示例代码                                  说明
=======================================================
    空格    div ul { list-style:none; }           div标签内的ul标签
    ,          div, ul { text-align:center; }      div标签和ul标签
    #         #tagId { color:red; }                 id属性值为tagId的标签
    .          .tagbd{border:1px;}                 class属性值为menuBg的标签
    :          a:hover { #ff0; }                       a标签悬停状态
    

参考2)----选择器的组合

组合 示例代码 说明 
li.

li .tagClass {   

     width:28px; } 

选择li标签内class属性值为tagClass的标签
div#

div #tagId{

text-align:center;}

选择div标签内id属性值为tagId的标签
# .

#tagId .tagbd{

    border:1px;}

选择id属性值为tagId的标签内,

class属性为tagbd的标签

# . ,

#tid1 .tc1, #tid2 .tc2{

      height:26px;


选择id属性值为tid1的标签内,

class属性值为tc1的标签,以及id属性

值为tid2的标签内,class属性值为tc2的标签

    


你可能感兴趣的:(JavaEE基础)