<optgroup id="1tq5s"></optgroup>
    1. <ol id="1tq5s"><blockquote id="1tq5s"></blockquote></ol>
    2. <track id="1tq5s"></track>
      <legend id="1tq5s"><li id="1tq5s"></li></legend>

        <ruby id="1tq5s"><li id="1tq5s"></li></ruby>
          發布時間:2019-12-30    所屬分類:網站建設   瀏覽:1050

          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二


          縱向導航菜單及二級彈出菜單


          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二  第1張


          ■縱向列表

          ■標簽的默認樣式

          ■css派生選擇器

          ■css選擇器的分組

          ■縱向二級列表

          ■相對定位和絕對定位



          一、縱向列表

          <div id="menu">

           <ul>

           <li>首頁</li>

           <li>網頁版式布局</li>

           <li>div+css教程</li>

           <li>div+css實例</li>

           <li>常用代碼</li>

           <li>站長雜談</li>

           <li>技術文檔</li>

           <li>資源下載</li>

           <li>圖片素材</li>

           </ul>

           </div>


          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二  第2張


          <!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">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

          <style type="text/css">

          body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

          a { color: #000; text-decoration: none; }

          a:hover { color: #F00; }

          #menu { width: 100px; border: 1px solid #CCC; }

          #menu ul { list-style: none; margin: 0px; padding: 0px; }

          #menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

          </style>

          </head>

          <body>

          <div id="menu">

          <ul>

          <li><a href="@#">首頁</a></li>

          <li><a href="">網頁版式布局</a></li>

          <li><a href="">div+css教程</a></li>

          <li><a href="">div+css實例</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>

          </div>

          </body>

          </html>


          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二  第3張


          二、標簽的默認樣式


          body默認外邊距,另外本例中ul前的圓點及左側的內邊距,另h1-h6字體大小各不相同,em默認為斜體,strong表示粗體。正因為有這些默認樣式,一個設計合理的頁面,即使沒有加載樣式,也能讓用戶很容易閱讀


          body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }

           ul { list-style: none; }

           img { border-style: none; }


          三、css派生選擇器


          #menu ul { list-style: none; margin: 0px; padding: 0px; }

           #menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

          #menu ul和#menu ul li即為派生選擇器


          四、css選擇器的分組


          可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是綠色的,p段落、div分區、span都是20像素字體。

          h1,h2,h3,h4,h5,h6 { color: green; } 

          p,div,span{ font-size:20px; }


          五、縱向二級列表


          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二  第4張

          六、相對定位和絕對定位


          ■定位標簽:position

          ■包含屬性:relative(相對) absolute(絕對)

           

          1.position:relative; 如果對一個元素進行相對定位,首先它將出現在它所在的位置上。然后通過設置垂直或水平位置,讓這個元素"相對于"它的原始起點進行移動。(再一點,相對定位時,無論是否進行移動,元素仍然占據原來的空間。因此,移動元素會導致它覆蓋其他框)

           

          2.position:absolute; 表示絕對定位,位置將依據瀏覽器左上角開始計算。 絕對定位使元素脫離文檔流,因此不占據空間。普通文檔流中元素的布局就像絕對定位的元素不存在時一樣。(因為絕對定位的框與文檔流無關,所以它們可以覆蓋頁面上的其他元素并可以通過z-index來控制它層級次序。z-index的值越高,它顯示的越在上層。)

           

          3.父容器使用相對定位,子元素使用絕對定位后,這樣子元素的位置不再相對于瀏覽器左上角,而是相對于父容器左上角

           

          4.相對定位和絕對定位需要配合top、right、bottom、left使用來定位具體位置,這四個屬性只有在該元素使用定位后才生效,其它情況下無效。另外這四個屬性同時只能使用相鄰的兩個,不能即使用上又使用下,或即使用左,又使用右


          超鏈接偽類


          ■鏈接的四種樣式

          ■將鏈接轉換為塊狀

          ■用css制作按鈕

          ■首字下沉


          一、超鏈接的四種樣式


          a:link {color: #FF0000} /* 未訪問的鏈接 */

           a:visited {color: #00FF00} /* 已訪問的鏈接 */

           a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */

           a:active {color: #0000FF} /* 選定的鏈接 */


          二、將鏈接轉換為塊級元素

          a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }


          三、用css制作按鈕

          <!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">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

          <style type="text/css">

          a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }

          a:hover { background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}

          </style>

          </head>

          <body>

          <p><a href="">免費注冊</a></p>

          </body>

          </html>


          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二  第5張

          四、首字下沉


          <!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">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

          <style type="text/css">

          p { width: 400px; line-height: 1.5; font-size: 14px; }

          p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; }

          </style>

          </head>

          <body>

          <p>教程適合初學者循序漸進學習!</p>

          </body>

          </html>


          html列表


          ■ul無序和ol有序列表

          ■改變項目符號樣式或用圖片定義項目符號

          ■橫向圖文列表

          ■浮動后父容器高度自適應

          ■IE6的雙倍邊距bug


          一、ul無序和ol有序列表

          <div id="layout">

           <ul>

          <li><a title="1" href="" target="_blank">1</a></li>

          <li><a title="2" href="" target="_blank">2</a></li>

          <li><a title="3" href="" target="_blank">3</a></li>

          <li><a title="4" href="" target="_blank">4</a></li>

          <li><a title="5" href="" target="_blank">5</a></li>


           </ul>

           </div>


          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二  第6張


          <!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">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

          <style type="text/css">

          #layout ul { list-style: none; }

          #layout ul li { background: url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; }

          </style>

          </head>

          <body>

          <div id="layout">

          <ul>

          <li><a title="1" href="" target="_blank">1</a></li>

          <li><a title="2" href="" target="_blank">2</a></li>

          <li><a title="3" href="" target="_blank">3</a></li>

          <li><a title="4" href="" target="_blank">4</a></li>

          <li><a title="5" href="" target="_blank">5</a></li>

          </ul>

          </div>

          </body>

          </html>

          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二  第7張

          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二  第8張


          四、 浮動后父容器高度自適應

          #layout { width:400px; border:2px solid #ccc; padding:2px;}

          沒有被內容元素給撐高,要解決這個問題,需要使用以下樣式

          overflow:auto;是讓高度自適應, zoom:1;是為了兼容IE6而寫


          五、IE6的雙倍邊距bug

          當浮動后設置左側外邊距時后,最左側將顯示為雙倍邊距,比如設置為20,而在IE6下卻顯示40px,解決這個問題只需應用一個樣式 

          display:inline;


          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二  第9張


          相關內容:


          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一

          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二

          網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)三



          打賞 支付寶打賞 微信打賞

          上一篇:網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一

          下一篇:網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)三



          除非注明,本站所有文章皆為本人原創,可隨意轉載但請保留鏈接或名字,謝謝!



          相關標簽: html教程divcss石家莊做網站石嘴山做網站雙鴨山做網站四川做網站肅北蒙古做網站肅南裕固做網站綏芬河做網站隨州做網站臺山做網站太倉做網站太原做網站泰興做網站泰州做網站唐山做網站天津做網站調兵山做網站鐵嶺做網站通化做網站

          發表評論:

          • 最新文章

          • 熱門文章

          • 隨機文章

          SEO姜東
            SEO姜東微信二維碼

            常州SEO姜東


            從事互聯網行業多年,希望分享各類互聯網、SEO理念、跨境電商,掃碼與我交流SEO


          與我詳談SEO

          常州SEO木木qq


          常州SEO木木qq

          特別推薦
          加我的微信:SEO-jiangd詳談網絡營銷
          老师好深好爽我要视频

            <optgroup id="1tq5s"></optgroup>
          1. <ol id="1tq5s"><blockquote id="1tq5s"></blockquote></ol>
          2. <track id="1tq5s"></track>
            <legend id="1tq5s"><li id="1tq5s"></li></legend>

              <ruby id="1tq5s"><li id="1tq5s"></li></ruby>