国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Home Web Front-end HTML Tutorial DIV CSS: Menu without tables_html/css_WEB-ITnose

DIV CSS: Menu without tables_html/css_WEB-ITnose

Jun 24, 2016 pm 12:29 PM

布局初步搭建起來(lái),我開(kāi)始填充里面的內(nèi)容。首先是定義logo圖片:

樣式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
頁(yè)面代碼:


以上代碼現(xiàn)在應(yīng)該容易理解。先在CSS定義了一個(gè)logo的層,然后在頁(yè)面中調(diào)用它。需要說(shuō)明的是,為了使網(wǎng)頁(yè)有更好的易用性,web標(biāo)準(zhǔn)要求大家給所有的、屬于正式內(nèi)容的圖片,加一個(gè)alt屬性。這個(gè)alt屬性是用來(lái)說(shuō)明圖片的作用(當(dāng)圖片不能顯示的時(shí)候就顯示替換文字),所以不要只寫(xiě)成無(wú)意義的圖片名稱(chēng)。

接下來(lái)是定義菜單。

1.不用表格的菜單(縱向)
我們先來(lái)看菜單的最終效果:

什么是網(wǎng)站標(biāo)準(zhǔn)
使用標(biāo)準(zhǔn)的好處
怎樣過(guò)渡
相關(guān)教程
工具
資源及鏈接

通常方法我們至少嵌套2層表格來(lái)實(shí)現(xiàn)這樣的菜單,間隔線(xiàn)采用在td中設(shè)置背景色并插入1px高的透明GIF圖片實(shí)現(xiàn);背景色的交替效果采用td的onmouseover事件實(shí)現(xiàn)。但查看本菜單的頁(yè)面代碼,你會(huì)看到只有如下幾句:


沒(méi)有用任何table,而用的是無(wú)序列
  • ,整個(gè)菜單的效果實(shí)現(xiàn)的秘密完全在于id="menu",我們?cè)賮?lái)看CSS中關(guān)于menu的定義:

    (1)首先定義了menu層的主要樣式:

    #menu {
    MARGIN: 15px 20px 0px 15px; /*定義層的外邊框距離*/
    PADDING:15px; /*定義層的內(nèi)邊框?yàn)?5px*/
    BACKGROUND: #dfdfdf; /*定義背景顏色*/
    COLOR: #666; /*定義字體顏色*/
    BORDER:#fff 2px solid; /*定義邊框?yàn)?px白色線(xiàn)條*/
    WIDTH:160px; /*定義內(nèi)容的寬度為160px*/
    }
    (2)其次定義無(wú)序列表的樣式:

    #menu ul {
    MARGIN: 0px;
    PADDING: 0px;
    BORDER: medium none; /*不顯示邊框*/
    LINE-HEIGHT: normal;
    LIST-STYLE-TYPE: none;

    }
    #menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}
    說(shuō)明:這里用的是id選擇器的派生方法定義(參考第7天:CSS入門(mén)的介紹)了在menu層中的子元素
    • 的樣式。LIST-STYLE-TYPE: none一句表示不采用無(wú)序列表的默認(rèn)樣式,即:不顯示小圓點(diǎn)(我們后面用自己的圖標(biāo)來(lái)代替小圓點(diǎn))。BORDER-TOP: #FFF 1px solid;則定義了菜單之間的1px間隔線(xiàn)。

      (3)定義onmouseover效果

      #menu li a {
      PADDING:5px 0px 5px 15px;
      DISPLAY: block;
      FONT-WEIGHT: bold;
      BACKGROUND: url(/bok/images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
      WIDTH: 100%;
      COLOR: #444;
      TEXT-DECORATION: none;
      }
      #menu li a:hover { BACKGROUND: url(/bok/images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
      COLOR: #fff; }
      解釋如下:

      "display:block;"表示將標(biāo)簽a當(dāng)作塊級(jí)元素來(lái)顯示,使得鏈接變成一個(gè)按鈕;
      "BACKGROUND: url(/bok/images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"這一句定義了替代li的小圓點(diǎn)的圖標(biāo)。"transparent"指背景為透明,"2px 8px"指定圖標(biāo)的位置是距左邊2px,距上邊8px。這一句也可以拆分寫(xiě)成四句:"BACKGROUND-IMAGE: url(/bok/images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"
      "#menu li a:hover"定義了當(dāng)鼠標(biāo)移動(dòng)到鏈接上以后的顏色變化和小圖標(biāo)變化。
      ok,不用表格的菜單就這樣實(shí)現(xiàn)了。大家可以明顯感覺(jué)到,原來(lái)寫(xiě)在HTML里的表現(xiàn)樣式全部剝離放到CSS文件里去了。頁(yè)面代碼節(jié)約了大半。通過(guò)CSS要修改菜單樣式就很簡(jiǎn)單了。

      2.不用表格的菜單(橫向)
      上面是縱向的菜單,如果要顯示橫向菜單,用li也可以嗎?當(dāng)然是可以的,下面給出代碼,效果就在本頁(yè)頂部:

      頁(yè)面代碼


      樣式表代碼

      #submenu {
      MARGIN: 0px 8px 0px 8px;
      PADDING: 4px 0px 0px 0px;
      BORDER: #fff 1px solid;
      BACKGROUND: #dfdfdf;
      COLOR: #666;
      HEIGHT:25px; }

      #submenu ul {
      CLEAR: left;
      MARGIN: 0px;
      PADDING:0px;
      BORDER: 0px;
      LIST-STYLE-TYPE: none;
      TEXT-ALIGN: center;
      DISPLAY:inline;
      }

      #submenu li {
      FLOAT: left;
      DISPLAY: block;
      MARGIN: 0px;
      PADDING: 0px;
      TEXT-ALIGN: center}

      #submenu li a {
      DISPLAY: block;
      PADDING:2px 3px 2px 3px;
      BACKGROUND: url(/bok/images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
      FONT-WEIGHT: bold;
      WIDTH: 100%;
      COLOR: #444;
      TEXT-DECORATION: none;
      }

      #submenu li a:hover {
      BACKGROUND: url(/bok/images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
      COLOR: #fff; }

      #submenu ul li#one A { WIDTH: 60px}
      #submenu ul li#two A { WIDTH: 80px}
      #submenu ul li#three A { WIDTH: 80px}
      #submenu ul li#four A { WIDTH: 90px}
      #submenu ul li#five A { WIDTH: 80px}
      #submenu ul li#six A { WIDTH: 80px}
      #submenu ul li#seven A { WIDTH: 60px}
      #submenu ul li#eight A { WIDTH: 90px}
      #submenu ul li#nine A { WIDTH: 80px}

      以上代碼不逐一分析了。橫向菜單的關(guān)鍵在于:定義
    • 樣式時(shí)的"FLOAT: left;"語(yǔ)句。另外注意UL定義中的DISPLAY:inline;一句表示將li強(qiáng)制作為內(nèi)聯(lián)對(duì)象呈遞,從對(duì)象中刪除行,通俗講就是li不換行。實(shí)現(xiàn)橫向排列。你也可以象例子中定義每個(gè)子菜單的寬度,控制菜單的間隔。好了,你也可以動(dòng)手試試,用li實(shí)現(xiàn)各種各樣的菜單樣式。

      Tips:如果你子菜單的寬度總和大于層的寬度,菜單會(huì)自動(dòng)折行,利用這個(gè)原理可以實(shí)現(xiàn)單個(gè)無(wú)序列表的2列或者3列排版,這是原來(lái)HTML很難實(shí)現(xiàn)的。

  • Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    How do I stay up-to-date with the latest HTML standards and best practices? How do I stay up-to-date with the latest HTML standards and best practices? Jun 20, 2025 am 08:33 AM

    The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.

    How do I use the  element to represent the main content of a document? How do I use the element to represent the main content of a document? Jun 19, 2025 pm 11:09 PM

    The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.

    How do I create a basic HTML document? How do I create a basic HTML document? Jun 19, 2025 pm 11:01 PM

    To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.

    How do I create checkboxes in HTML using the  element? How do I create checkboxes in HTML using the element? Jun 19, 2025 pm 11:41 PM

    To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.

    How do I minimize the size of HTML files? How do I minimize the size of HTML files? Jun 24, 2025 am 12:53 AM

    To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.

    How has HTML evolved over time, and what are the key milestones in its history? How has HTML evolved over time, and what are the key milestones in its history? Jun 24, 2025 am 12:54 AM

    HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout

    How do I use the  element to represent the footer of a document or section? How do I use the element to represent the footer of a document or section? Jun 25, 2025 am 12:57 AM

    It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.

    How do I embed video in HTML using the  element? How do I embed video in HTML using the element? Jun 20, 2025 am 10:09 AM

    To embed videos in HTML, use tags and specify the video source and attributes. 1. Use src attributes or elements to define the video path and format; 2. Add basic attributes such as controls, width, height; 3. To be compatible with different browsers, you can list MP4, WebM, Ogg and other formats; 4. Use controls, autoplay, muted, loop, preload and other attributes to control the playback behavior; 5. Use CSS to realize responsive layout to ensure that it is adapted to different screens. Correct combination of structure and attributes can ensure good display and functional support of the video.

    See all articles