• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 網(wǎng)頁(yè)設(shè)計(jì)中的圖片布局

        本例模仿淘寶網(wǎng)上的圖片布局,進(jìn)一步展示了在網(wǎng)頁(yè)設(shè)計(jì)中圖片與文字之間混排和用圖片布局的方法。

        【操作步驟】

        第1步,啟動(dòng)Dreamweaver,新建文檔,保存為index.html.。

        第2步,構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)。在本例中,首先用<div>標(biāo)簽設(shè)置container容器,在此頁(yè)面中,所有內(nèi)容分為4個(gè)部分,每個(gè)部分用one和two分為兩塊,one中又分為left和right兩部分,分別定義圖片和下邊框,在two中也分為left和right兩部分,分別定義了圖片和文字列表。

        以下為部分代碼,其余代碼請(qǐng)瀏覽本節(jié)案例示例源代碼。

        <div class="container">

        <div class="one">        

        <div class="left"> 

        <img src="images/001.jpg"/> 

        </div>        

        <div class="right"> 

        </div>    

        </div>    

        <div class="two">        

        <div class="left"> <img src="images/002.jpg"/> </div>        

        <div class="right">            

        <h3>性感透視衫席卷8月街頭</h3>            

        <ul>                

        <li>明星來(lái)示范 早秋穿搭有新招</li>                

        <li>時(shí)尚女生2011早秋的色調(diào)搭</li>                

        <li>秋風(fēng)起 最潮手袋購(gòu)入必讀美容</li>            

        </ul>        

        </div>   

        </div></div>

        此時(shí)可以看到,網(wǎng)頁(yè)的基本結(jié)構(gòu)已經(jīng)搭建好了,但是由于沒(méi)有進(jìn)行CSS樣式設(shè)置,界面并不美觀。

        第3步,定義網(wǎng)頁(yè)基本屬性以及container容器的寬度和左側(cè)內(nèi)邊距。

        * {    

        margin: 0px;    

        padding: 0px;}

        .container {

        width: 430px;    

        padding-left: 30px;}

        以上代碼中,*{margin:0px;padding:0px}表示將網(wǎng)頁(yè)中所有標(biāo)簽的padding和margin都設(shè)定為0px,*可以理解為一個(gè)通配符,指的是所有標(biāo)簽。

        第4步,定義第一部分內(nèi)容中的one部分,這一部分為one.left和one.right。

        .one .left {    float: left;                           /*左浮動(dòng)*/    

        width: 85px;                           /*寬度*/    

        height: 30px;                          /*高度*/    

        margin-top: 10px;                      /*頂部補(bǔ)白*/}

        .one .right {

        float: right;    

        width: 345px;    

        border-bottom: #CCCCCC 1px dashed;      /*底部邊框*/    

        height: 35px;    

        margin-bottom: 15px;}

        .left中的內(nèi)容包含了一個(gè)<img>標(biāo)簽,left類(lèi)樣式定義了其浮動(dòng)為左浮動(dòng)。.right中沒(méi)有實(shí)際的內(nèi)容,只是在right類(lèi)樣式中定義了底部邊框。

        第5步,第4步實(shí)現(xiàn)了one部分的設(shè)置,接下來(lái)進(jìn)行two.left和two.right部分的設(shè)置。

        .two .left {    

        float: left;    

        width: 120px;    

        height: 85px;}

        .two .right {    

        float: right;    

        width: 280px;

        height: 85px;    padding-left: 30px;}

        .two .left img {    border: #FF3300 1px solid;    /*圖片邊框*/    margin-left: 5px;}

        two.left與one.left一樣,在設(shè)計(jì)網(wǎng)頁(yè)時(shí)都包含了一個(gè)<img>標(biāo)簽,同樣將圖片設(shè)置為左浮動(dòng)。two.right標(biāo)簽中包含了一個(gè)<h3>標(biāo)簽和一個(gè)<ul>標(biāo)簽,分別定義了標(biāo)題和文字列表。另外,在left.img中定義了圖片樣式。

        第6步,定義<h3>標(biāo)簽的標(biāo)題樣式和<ul>標(biāo)簽的列表樣式。

        h3 {    color: #FF0000;    

        padding-bottom: 10px;    

        font-size: 16px;}

        ul {    padding-left: 10px;    

        font-size: 14px;}li { padding-bottom: 5px; }

        在<h3>標(biāo)簽中定義了網(wǎng)頁(yè)設(shè)計(jì)時(shí)標(biāo)題的字體大小和顏色,并設(shè)置了底部補(bǔ)白。<ul>標(biāo)簽定義了文字列表,關(guān)于對(duì)<ul>標(biāo)簽的樣式定義會(huì)在后面的章節(jié)中詳細(xì)介紹。


        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>