久久精品国产亚洲AV成人婷婷_性色av不卡无码一区二区_人妻无码久久影视_久久精品国产免费一卡二卡

網(wǎng)頁設(shè)計中的設(shè)計多圖水平排列

  • 2019-10-09 10:21:45
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://mnamateurbaseball.com

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

【操作步驟】

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

第2步,構(gòu)建網(wǎng)頁的基本結(jié)構(gòu)。本例中首先用<div>標簽設(shè)置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步,在網(wǎng)站建設(shè)中定義網(wǎng)頁基本屬性及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中定義了四周補白以及內(nèi)邊距為0。在container中定義了container下所有元素的水平對齊方式為居中對齊,定義了container的寬度、高度以及邊框樣式。background-im-age:url(bg.jpg)語句的作用是為container標簽添加名為bg.jpg的背景圖片。

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

.container div {    

float: left;    

margin-top: 30px;    

margin-left: 35px;}

.container p {    

font-size: 20px;    

font-family: 黑體;}

第5步,設(shè)置<a>標簽樣式。

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

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

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

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

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

<a>

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

當前文章標題:網(wǎng)頁設(shè)計中的設(shè)計多圖水平排列

當前URL:http://mnamateurbaseball.com/news/wzzz/3107.html

上一篇:網(wǎng)頁設(shè)計中的圖片布局

下一篇:網(wǎng)頁設(shè)計中的陰影圖片

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)