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

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

    網頁設計中,經常能見到多張圖片排列的情況,在本例中,將介紹對于多圖排列的設置,并進一步了解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.dlbfgs.cn/news/wzzz/3107.html

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

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

    網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
    一级免费毛片,在免费AV网,日韩AV在线直播,午夜无码国产