<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          網頁設計中的設計多圖水平排列

          • 2019-10-09 10:21:45
          • 閱讀次數:
          • 作者:盈嵐科技小編
          • 來源:http://www.1c4w.com

          網頁設計中,經常能見到多張圖片排列的情況,在本例中,將介紹對于多圖排列的設置,并進一步了解CSS設置圖片的方法。

          【操作步驟】

          第1步,啟動Dreamweaver,新建文檔,保存為index.html.。

          第2步,構建網頁的基本結構。本例中首先用<div>標簽設置container容器,然后分別用<div>標簽將頁面分為4塊,每一塊中包含一個<img>標簽、一個<a>標簽和一個<p>標簽。

          <div class="container">    

          <div class="one"><a href="#">

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

          <p>老虎</p>        

          </a></div>    

          <div class="one"><a href="#">

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

          <p>大熊貓</p>        

          </a></div>    

          <div class="one"><a href="#"><img src="images/3.jpg">        

          <p>大象</p>        

          </a></div>    

          <div class="one"><a href="#"><img src="images/4.jpg">        

          <p>野馬</p>

          </a>

          </div>

          </div>

          此時的顯示效果極其簡單,僅僅是簡單的圖片和標題。

          第3步,在網站建設中定義網頁基本屬性及container容器的樣式。

          body {    margin: 20px;

          padding: 0;}

          .container {    text-align: center;    

          width: 800px;    

          height: 240px;    

          background-image: url(images/bg.jpg);    

          border: 1px #000 solid;}

          首先在body中定義了四周補白以及內邊距為0。在container中定義了container下所有元素的水平對齊方式為居中對齊,定義了container的寬度、高度以及邊框樣式。background-im-age:url(bg.jpg)語句的作用是為container標簽添加名為bg.jpg的背景圖片。

          第4步,設置container容器下的<div>標簽,以及在<div>下的<p>標簽的樣式。

          .container div {    

          float: left;    

          margin-top: 30px;    

          margin-left: 35px;}

          .container p {    

          font-size: 20px;    

          font-family: 黑體;}

          第5步,設置<a>標簽樣式。

          a {    text-decoration: none;                      /*不顯示超鏈接的下劃線*/   

          color: #204402;                             /*字體顏色*/}a:hover {

          text-decoration: underline;                 /*鼠標懸停時顯示下劃線*/    

          color: red;                                 /*鼠標懸停時字體顏色*/}

          a:hover img { border: 4px #0b35ce solid;        /*鼠標懸停時圖片的邊框樣式*/}

          <a>

          標簽的樣式設置了下劃線,a:hover定義了當鼠標懸停時鏈接的樣式。a:hover img定義了圖片在鼠標懸停時的樣式。關于網頁制作中<a>標簽的CSS樣式將在后面章節詳細介紹。

          當前文章標題:網頁設計中的設計多圖水平排列

          當前URL:http://www.1c4w.com/news/wzzz/3107.html

          上一篇:網頁設計中的圖片布局

          下一篇:網頁設計中的陰影圖片

          網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图