【读书笔记】—无懈可击的web设计

心血来潮，准备开始看web方面的各种书籍，首本看完的就是无懈可击了，可能因为他名字和我大爱的游戏符合吧！看的是电子版，需要的朋友可以点击这里下载：pdf书+源代码

• 文字大小（待考虑）
  • 设置font-size：11px，则不能通过ie等浏览器的菜单栏中的文字大小来改变大小，百度可以，很多网站都忽略了这点
    • ie/win的用户不能改变以像素为单位设定的字体大小
  • 无懈可击方法一：使用关键字设定
    • font-size：small/medium/large…
      • 他们是相对浏览器的默认字体大小而改变的
        • 
        • 由上可见，默认字体为medium大小，small和large都随他变化而变化
        • 缺陷：各浏览器字体默认值不同

  • 无懈可击方法二：使用关键字+百分比设定
    • body{font-size:small}    h1{font-size:150%}
      • 则h1的字体大小相较于body大了50%
      • 这样设定，只需改一处（body）的css，则整个页面的大小都会相对变大
  • 无懈可击方法三：使用关键字+百分比嵌套设定
    • body{font-size:small}   div.content{font-size:95%}  h1{font-size:150%}  <div id=content><h1>…</h1></div>
      • 此处h1的大小为small*95%*150%
      • 注意嵌套设定的计算，最好不要超过两层嵌套
• Hack
  • IE：*html  来提供专门用于IE的声明
  • IE5：(BOX MODEL HACK 框模型hack)  and（SBMH） f\ont_size：large—ie5会忽略\，这句不会执行，而其他浏览器仍执行
• 可变的导航
  • 选用整张图片作为导航的背景虽然美观，但有缺陷
    • 造成图片加载速度慢
    • 不利于后期文字的变化，需要重新ps，且文字不能放大
  • 无懈可击的方法一：图片使用平铺
  • 无懈可击的方法二：导航栏样式设置
    • 源代码
      

      <div class="nav">
           <ul>
               <li><a href="#">home</a></li>
              <li><a href="#">content</a></li>
              <li><a href="#">about</a></li>
              <li><a href="#">contact</a></li>
          </ul>
      </div>

    • 导航栏浮动
      

      .nav > ul{
           float:left;  
           /*内部对象li现在浮动了，无法撑开外围的ul，因为ul无法确定浮动的li的高度，修正这个问题，只要将ul也设为浮动*/
           width:100%;
           list-style:none;
           background:#ffcb2d;
           margin:0px;
           padding:5px 0 0 46px;
      }
      .nav li{
           float:left;
           margin:0px;
           padding:0px;
      }

    • 如果设置了浮动（float等属性）需确保后面没有元素，否则需要清楚浮动，clear:left规则
      
  • 选项卡定型+选项可背景颜色+添加底边：
    

    .nav a{
         display:block;
         /*因为a是内联元素，无法设置长宽，他的高度只会与字体本身有关而无法适应block的高度*/
         color:#f00;
         text-decoration:none;
         padding:4px 6px;
         /*使整个选项卡都能被点击，而不只有a的文字才能被点击*/
         margin:0px 5px;
         background:#f9e9a9 url(off_bg.gif) repeat-x top left;
         border:1px #9b8748 solid;
         border-bottom:none;
         }
    .nav > ul{    /*modify*/
         background:#ffcb2d url(nav_bg.gif) repeat-x bottom;  
         /*显示ffcb2d的背景色 然后是nav_bg的图片 最后是a中的off_bg图片，层层覆盖*/}

  •  悬停变换
    

    .nav a:hover{
         background:#fff url(on_bg.gif) repeat-x top left;  /*背景色设为白色，使tab栏的灰色融为一体，换个其他颜色就完全不好看了*/
         border-color:#727377;  /*变换边框的颜色*/
         padding-bottom:5px;    
         /*这个很强悍！！最底下后是nav_bg的横图片 往上是白色底色 往上再是半透明的灰色on_bg图片 向下padding5px，则文字距离底部有5px，这5px的空白被原来是什么填充了*/
    }

    • 
      

• 可扩展的行
  • 缺陷：
    • 圆角图片的臃肿文件
    • 圆角图片只能适应固定的行高，不能变换
    • 字体如果放大，就会出现排版错误
  • 无懈可击方法
    • html代码：需要两个容器，上下各一个
      

      <div id="container">
       
       
      <ul id="register">
       
      	<li id="reg">Not registered? 
      		<a href="#">Register</a> now!
      	</li>
       
      	<li id="find">
      		<a href="#">Find a store</a>
      	</li>
       
      </ul>
       
       
      <div id="message">
       
      	<p><strong>Special this week:</strong> $2 shipping on all orders! 
      	<a href="#">LEARN MORE</a>
      	</p>
       
      </div>
       
       
      </div>

    • css基础定位：
      

      *{
           margin:0px;
           padding:0px;}
      #register{
           float:left;
           width:100%;
           background:#bddb62;
           list-style:none;}
      #register li#reg{
           float:left;
           padding:8px 14px;}
      #register li#find{
           float:right;
           padding:8px 14px;
           background:url(mag-glass.gif) no-repeat 0 50%;
           /*0表示水平方向靠左侧，垂直方向居中 相对定位的好处就是不管多高，都能保证垂直居中*/}
      #message{
           clear:both;
           text-align:center;
           background:#92b91c;}
      #message p{
           padding:8px 14px;}
      #message a{
           margin:0 0 0 6px;
           padding:2px 15px;
           text-decoration:none;}

    • 问题：发现第一行的颜色定义不见了
      • 
      • 答案：因为li浮动了（上一节提到过），register容器无法撑开浮动的li，解决办法是容器也浮动
        

        #register{  /*modify*/
             float:left;}

      • 此时又发现问题
        • 答案：css2.0规范提出：一个被浮动的框式组件必须具有明确的宽度值，若没有定义，那宽度仅仅与内容宽度一致
          

          #register{       /*modify*/
              width:100%;}		

  • • • 当浮动一个具有背景色对象内部的对象时，同样也浮动这个对象，即可恢复显示其背景
    • 圆角边框：不介绍了，本书的此方法只适合固定宽度的，另寻新方法
      
  • 巧妙的浮动：
    • 使用定义列表：w3c规定一个定义列表<dt>(define list title)可以包含多个条目<dd>(define list define)
    • html代码

      <div id="sweden">
           <dl>
           <dt>Stockholm</dt>
                <dd class="img"><img src="gamlastan.jpg" width="80" height="80" alt="Gamla Stan" /></dd>
                <dd>This was taken in Gamla Stan (Old Town) in a large square of amazing buildings.</dd>
           </dl>
           <dl class="alt">
                <dt>Gamla Uppsala</dt>
                <dd class="img"><img src="uppsala.jpg" width="80" height="80" alt="Gamla Uppsala" /></dd>
                <dd>The first three Swedish kings are buried here, under ancient burial mounds.</dd>
           </dl>
           <dl>
                <dt>Perpetual Sun</dt>
                <dd class="img"><img src="watch.jpg" width="80" height="80" alt="Wristwatch" /></dd>
                <dd>During the summer months, the sun takes forever to go down. This is a good thing.</dd>
           </dl>
      </div>

    • css样式：

      *{ margin:0px; padding:0px;}
      #sweden{width:300px;background: url(bg.gif) no-repeat top left;padding:10px 0;} 
      #sweden dl{ padding:0px; margin:10px 20px}
      #sweden dt{ font-size: 130%;letter-spacing: 1px;color: #627081;}
      #sweden dd{font-size: 85%;      
      line-height: 1.5em;     
      color: #666;}
      #sweden dd.img{
      margin: 0 8px 0 0;      
      padding: 4px;      
      border: 1px solid #D9E0E6; float:left;}

    • • 为了使图片dd与头部dt处于同一水平线，使用反向浮动，使他们位于同一行
        • #sweden dt{ float:right;     /*modify*/
          
          /*title右浮动*/}

          #sweden dd.img{ float:left;

          /*图片左浮动*/}

      • 又发现问题，此时<dd>文字跑到了<dt>和图片当中
        • 
        • 处理方法：为dt增加宽度，使下面的dd归于原位，此宽度计算：300（sweden）-20*2（padding）-80（img.width）-4*2（img.padding）-8 (img.margin) -1*2(img.border)=162

          #sweden dt{ width:162px;}    /*modify*/

        • 为任意长度dd开路：若dd太长或太短都有问题                                                                                    （下个<dl>位于前个<dl>图片旁边）
          • 解决方法：清除浮动
            • 不要用clear属性，这在xhtml中不符合规范
            • 设置一个浮动属性来解决一个浮动问题，原理就是如果外框本身就浮动，他会适应内框的浮动宽度

              #sweden{ float:left;}    /*modify*/
              #sweden dl{ float:left;}    /*modify*/

          • IE下双倍margin
            • 当为浮动对象设置margin时，会有双倍margin
            • 解决方法：display：inline

              #sweden dl{ display:inline}  /*modify*/

• 制作牢不可破的圆角
  • 准备两张图片，宽度和高度都要比设定的大
    •         （图一）                            （图二）
  • html中需要有四个设定，分别设定左右上下的圆角

    <div class="container">   <!--右上角-->
    <p class="desc">This box is:</p>     <!--左上角-->
    <p class="asc"><em>Indestructible!</em></p>    <!--右下角--><!--左下角-->
    </div>

  • css设置

    <style type="text/css">
    .container{
         float:left; /*不固定宽度，让容器浮动，使圆角图片总是紧挨着文字*/
         margin:0px; padding:0px; background:url(rounded-right.gif) no-repeat top right;}
    .container p.desc{
         background:url(rounded-left.gif) no-repeat top left; margin:0px; padding:9px 9px 0px 9px;
         /*图片为9px宽，为了文字不覆盖于图片上，内容框需要有9px的padding*/}
    .container p.asc{
         background:url(rounded-left.gif) no-repeat bottom left; margin:0px; padding:0px 0px 0px 9px;}
    .container p em{
         display:block;
         /*em是个内联对象，不会自动扩展直至与父容器宽度相同，所以需要设置成块元素*/
         background:url(rounded-right.gif) no-repeat bottom right; margin:0px; padding:0px 9px 9px 0px;}
    </style>

• • 当屏蔽图片时也容易阅读
    • 在设置背景时，不仅设置图片背景的url，也同时设置如果不载入图片显示的#颜色
•      表格
  • 要点：处理阴影，去空隙
  • html代码

    <div class="forum">   <!--加表格阴影-->
    <table cellspacing="0">  <!--去掉表格单元间的空格，可以不用写到css里，如果要写在css里，属性为border-collapse：collapese-->
           <caption>The Films</caption>
         <tr>
              <th scope="col" class="name">Forum Name</th>
              <th scope="col">Topics/Messages</th>
              <th scope="col">Last Post</th>
         </tr>
         <tr class="alt">
              <td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td>
              <td>9313/163773</td>
              <td>Feb 28, 2005 04:21 PM</td>
         </tr>
         <tr>
              <td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td>
              <td>9313/163773</td>
              <td>Feb 28, 2005 04:21 PM</td>
         </tr>
         <tr class="alt">
              <td class="name"><a href="/forum/">Name of Forum</a> This is the description of the forum.  This is another line of descriptive text.</td>
              <td>9313/163773</td>
              <td>Feb 28, 2005 04:21 PM</td>
         </tr>
    </table>
    </div>

  • css代码

    <style type="text/css">
    div.forum{
         background:#919191;
    }
    table{
         position:relative;  /*使用相对定位，使表格相对原来所在的位置偏移，如果使用absolute，则要计算相对父元素的*/
         top:-4px; /*向上平移4px*//*使用负值是把表格推到容器以外的区域，若使用正值就是像容器里面推*/
         left:-4px;  /*向左平移4px*/
         width:100%;  /*尽可能充满外部容器*/
         border:solid 1px #000;
         background:#fff;
    }
     
    table td, table th{
         margin:0px;
         padding:8px 20px;
         border-bottom:1px solid #b5b5b5;  <!--此时得到的是连续的直线，如果cellspacing！=0，那在每列中都会有断线-->
         }
     
    table caption{
         background:#fff;
         width:100%;  /*chrome下有1px的缩进*/
         border:1px solid #000;
    }
    </style>

  • • 流动的布局
      • 使用百分比定义宽度
      • max-width和min-width 设定流动布局是的最大/小长度，避免容器被无限拉长