J2EE社區

          茍有恒,何必三更起五更眠;
          最無益,只怕一日曝十日寒.
          posts - 241, comments - 318, trackbacks - 0, articles - 16

          css 實例

          Posted on 2011-03-09 18:58 xcp 閱讀(394) 評論(0)  編輯  收藏 所屬分類: JQuery

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
              
          <head>
                  
          <title>歡迎進入新《網頁設計師》:web標準教程及推廣</title>
                  
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
                  
          <meta http-equiv="Content-Language" content="gb2312" />
                  
          <meta content="all" name="robots" />
                  
          <meta name="author" content="ajie(at)netease.com,阿捷" />
                  
          <meta name="Copyright" content="www.w3cn.org,自由版權,任意轉載" /> 
                  
          <meta name="description" content="新網頁設計師,web標準的教程站點,推動web標準在中國的應用." />
                  
          <meta content="web標準,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
                  
          <link rel="icon" href="/favicon.ico" type="image/x-icon" />
                  
          <link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
                  
          <link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
                  
          <style type="text/css">
                      *
          {
                          padding
          :0px;
                          margin
          :0px;
                      
          }
                      body
          {
                          font-size
          :12px;
                          line-height
          :22px;
                      
          }
                      img 
          {
                          border
          :0px;
                      
          }
                      td
          {
                          border-collapse;
          /*相鄰邊被合并*/
                      
          }
                      
          /**列表控制*/
                      ul,li
          {
                          
          /*去掉ul,li默認的小圓點*/    
                          list-style
          : none;
                          list-style-position
          :inside;
                          
          /*list-style-type:square;*/
                          list-style-image
          :none;
                      
          }
                      ul
          {
                          margin
          : 0px;
                          padding
          : 0px;
                      
          }
                      li
          {
                          
          /*這個背景顏色非常重要,既使是#ffffff也要設計一個,因為他來消除黑邊*/
                          
          /*background-color: #EEEEEE;*/
                          padding-left
          :20px;
                          background
          : url("more.gif") no-repeat scroll 0 0 transparent; 
                          
          /*scroll 隨對象內容滾動,transparent背景透明哈*、
                          /*0 0是代表一個坐標,還就這強調一下就是后面那個0是代碼高,如果是一個大圖片,因為圖片是從上外下,所以 一般都是負數.
          */
                          
          /*怎么設計一個將多個小圖片合為一個大圖片呢,然后怎么定位呢,這個參見(ifeng里面的登錄,搜索,更多)等按鈕button.gif,其實還有一點就是一定要設置width,hight 因為他會自動從x,y軸以width,height之大的不重復背景*/


                          
          /*
                          *background-attachment : scroll(背景圖像是隨對象內容滾動) | fixed(背景圖像固定) 
                          *background-color : transparent(背景色透明) | color 
                          *background-image : none | url ( url ) 指明路徑
                          *
                          *在這強調一下哈,因為現在網絡上有很多就一系列的小圖片做成一個大圖來作背景,再來用background-position取出
                          *background-position:   length || length (必須是兩個值,除了取具體的值外,還可以取top | center | bottom | left | center | right) 
                          *如 background-position: 35% 80%;  background-position: top right; 
                          *分開設置也可以:
                          *background-position-x:num|left,center,right
                          *background-position-y : length | top | center | bottom 
                          *
                          *background-repeat:repeat | no-repeat | repeat-x | repeat-y 
                          
          */
                      
          }
                      #header
          {
                          MARGIN
          : 0px;
                          BORDER
          : 0px;
                          WIDTH
          : 580px;
                          HEIGHT
          : 60px;
                          
                          
          /*BACKGROUND: #ccd2de; */
                          background
          :url(1.gif) #ccd2de no-repeat right bottom;
                      
          }
                      #mainbox
          { /*它的高度由下一級(包含了#menu,#sidebar和#content)來決定*/
                          MARGIN
          : 0px;
                          WIDTH
          : 580px;
                          BACKGROUND
          : #FFF;
                      
          }
                  
                      
          /*根據內容自動適應高度,當然也可以對里面的這三個div指定高度,來決定整個mainbax的高度*/ 
                      #sidebar
          { 
                          FLOAT
          : left; 
                          MARGIN
          : 2px 2px 0px 0px; 
                          PADDING
          : 0px; 
                          WIDTH
          : 170px;
                          BACKGROUND
          : #F2F3F7;
                      
          }
                      #menu
          {
                          FLOAT
          : right;
                          MARGIN
          : 2px 0px;
                          PADDING
          :0px; 
                          WIDTH
          : 400px;
                          BACKGROUND
          : #ccd2de;
                          height
          :100px;
                      
          }
                      
          /*測試水平居中,垂直居中(要求設計高度),完全居中(要求設計高度)*/
                      #menuCenter
          {
                          BACKGROUND-color
          :red;
                          height
          :30px;
                          width
          :40px;
                          overflow
          :hidden;/*內容超出以后隱藏*/

                          
          /*這里需要強調一下就是:position:relative,再用top,left就是內部偏移(也就是固定在這人div里面了),若position:absolute 就是外部偏移*/
                          position
          :relative;/*內部偏轉,相對定位*/
                          top
          :50%; 
                          
          /*還要減去div的一半的高度哈*/
                          margin
          :-15px auto 0px auto;    
                  
                          outline
          : #E9E9E9 double thin;/*輪廓線(重要)*/
                      
          }

                      #content
          {
                          
          /*定位,定位*/
                          z-index
          :1;
                          
          /*position:absolute 
                          left:0px;
                          top:0px;
                          right:0px;
                          buttom:0px;
          */
                          float
          : right;
                          
          /*clear:both*/
                          
          /**重要 顯示塊的滾動條[上,下]**/

                          
          /**overflow:scroll;*/
                          overflow-x
          :hidden;
                          overflow-y
          :scroll; /*這個屬性跟*/
                          
                          display
          :block;
                          visibility
          :visible;
                          
                          

                          
          /*外補丁*/
                          MARGIN
          : 1px 0px 2px 0px;
                          
          /*內補丁*/
                          PADDING
          :2px; 
                          
          /*邊框*/
                          border
          :none;
              


                          
          /*尺寸*/
                           
          /*padding,margin,border 影響計算高度*/
                          WIDTH
          : 396px;
                          
          /*
                          min-width:**px;
                          max-width:**px
                          
          */
                          height
          :200px;
                          
          /*
                          min-height:**px;
                          max-height:**px
                          
          */

                      


                          
          /*背景*/
                          BACKGROUND
          : #E0EFDE;
                          

                          
                          
          /*字體,大小,顏色,風格,線條*/
                          font-family
          :"Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;
                          font-size
          :14px;
                          color
          :blue;
                          font-style
          :oblique;
                          font-weight
          :bold;
                          text-decoration
          :underline;



                          
          /*文本相關處理:首行縮近,對象內文本溢出時顯示省略標記,對齊方式*/
                          text-indent
          :1cm;
                          text-overflow
          :ellipsis; /*(重要)這個現實生活中很有用,如果文本超出了寬度自動顯示,與overflow配合使用*/
                          vertical-align
          :middle;
                          
          /*還有一個問題,如果div的一塊顯示在底部,如vertical-align對div也不起作用,如:
                              <div>
                                  <div>底部顯示<div>
                              </div>
                              
                              這怎么來控制呢,有三種方法,第一種:padding,margion,第二種:絕對定位,第三種:在拿一個div來填充上面那一塊
                              <div style="height:250px;">
                                  <div style="height:225px;">填充空白</div>
                                  <div>真正顯示的內容</div>
                              </div>        
                          
          */
                          text-align
          :left;
                          
          /*要實現水平居中
                          * margin:0px auto;
                          *
                          * 要實現垂直居中(固定高度)
                          * position:relative;
                          * top:50%;內部偏轉,決定定位
                          * margin:-15px 0px 0px 0px;
                          *
                          * 要實現完全居中(固定高度)
                          * position:relative;內部偏轉
                          * top:50%; 
                          * margin:-15px auto 0px auto; 還要減去div的高度哈
                          
          */
                          layout-flow
          :horizontal;/*控制是橫向顯示還是豎向顯示,古代的詩歌*/



                          
          /*字間隔,行高*/
                          letter-spacing
          :2px;/*每個字或一個字母 之間的間隔*/
                          word-spacing
          :5px; /*每個字或一個[完整]單詞 之間的間隔*/
                          line-height
          :30px;


                          
          /*滾動條控制*/
                          scrollbar-3dlight-color
          :red;/*設置 滾動條亮 [邊框 左,上] 顏色*/
                          scrollbar-shadow-color
          :red;/*右下邊框*/
                          scrollbar-highlight-color
          :#000;/**設置索滾動條3D界面的 [底層邊的顏色,一般都會被覆蓋](ThreedHighlight)顏色*/
                          scrollbar-face-color
          :yellow;/*設置滾動條最上面一層的顏色*/
                          scrollbar-arrow-color
          :blue;/*設置或檢索滾動條方向[箭頭]的顏色*/
                          scrollbar-darkshadow-color
          :#ADFF2F;
                      
          } 


                      #footer
          { 
                          CLEAR
          : both; 
                          MARGIN
          : 0px 0px 0px 0px; 
                          PADDING
          : 5px 0px 5px 0px;
                          WIDTH
          : 580px;
                          HEIGHT
          : 40px;
                          BACKGROUND
          : #ccd2de;
                      
          }
                  
          </style>
              
          </head>
              
          <body>
                  
          <div id="header">header</div>
                  
          <div id="mainbox">
                      
          <div id="sidebar">
                          
          <ul>
                              
          <li>1</li>
                              
          <li>2</li>
                              
          <li>3</li>
                              
          <li>4</li>
                              
          <li>5</li>
                          
          <ul>
                      
          </div>
                      
          <div id="menu">
                          
          <div id="menuCenter">menu</div>
                      
          </div>
                      
          <div id="content">
                          Every man dies , Not every man really lives
                          contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                          contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                          contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                          contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                          contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                          contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                          contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                          contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                      
          </div> 
                  
          </div>
                  
          <div id="footer">footer</div>
              
          </body>
          </html>



          名稱: ?4C.ESL | .↗Evon
          口號: 遇到新問題?先要尋找一個方案乄而不是創造一個方案こ
          mail: 聯系我


          主站蜘蛛池模板: 增城市| 平和县| 西乌珠穆沁旗| 庆云县| 凤翔县| 东方市| 秀山| 昆山市| 那曲县| 磴口县| 本溪市| 龙里县| 云林县| 社会| 浦江县| 渭源县| 二手房| 海晏县| 乐亭县| 左云县| 金山区| 贡山| 崇阳县| 芜湖市| 皋兰县| 寻乌县| 普洱| 沾化县| 麻阳| 泰和县| 石嘴山市| 荣成市| 乌鲁木齐县| 石城县| 酒泉市| 太仆寺旗| 罗定市| 昂仁县| 大化| 洛川县| 板桥市|