導航:首頁 > 萬維百科 > 網頁設計圖片居下

網頁設計圖片居下

 發布時間：2020-10-13 22:02:58

1、網頁設計中背景圖片怎樣才可以居中？？？

<style>
body { background-image:url(/logo/60th.jpg); background-repeat:no-repeat; background-position: top center; padding-top:48px;}
.main01{clear:both;width:900px;margin:10px auto 0px auto;overflow:hidden;}
.main01 .left {float: left;width: 300px;}
</style>
這段代碼可以設置左寬多少 右寬多少，上寬多少，你可以試一試

2、網頁設計時如何將圖片和文字位於同一水平？

網頁設計時將圖片和文字位於同一水平方法：

一、不要給文字標簽加屬性。給img{vertical-align: middle;}一個屬性即可。

二、img標簽向左浮動，給文字加一個標簽（例如span），然後設置文字標簽為塊狀，並設置上(內/外)邊距。span{ display:inline-block; margin-top:4px; margin-top：4px;} 內邊距，外邊據均可，最好是內邊距。

三、給文字加個標簽（例如span），同時控制這兩個標簽浮動。並給文字加行高，其值為圖片高度值。

3、網頁設計中如何把比界面大的圖片居中?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<style type="text/css">
<!--
.aaa { background-image: url(cp.gif); background-repeat: no-repeat; background-position: center center;}
.bbb { width: 0px; height: auto; overflow: hidden;}
-->
</style>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="aaa">
<tr>
<td><div class="bbb"><img src="cp.gif"></div></td>
</tr>
</table>
</body></html>

原理：
1.利用css設置aaa圖片為背景，上下，左右全為居中顯示
2.利用表格100%寬來自適應頁面寬度
3.利用css div設置一個寬0高適應的層bbb，插入表格aaa內，來自動判定圖片的高度

注意：aaa的背景與bbb中的圖片為同一張圖片，只有這樣才能自動調節高度
效果：圖片高度為圖片真實高度，圖片寬度自動適應頁面縮放，如圖片寬超過瀏覽器寬限制圖片中間部分

哦耶！~~~~~~

hspace="-477"不成立，
hspace只能為>=0的數字
hspace如果<0，那麼會顯示效果為0

4、html網頁設計裡面怎麼平鋪背景圖片

html網頁設計裡面平鋪背景圖片的代碼如下：
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
網頁背景默認是平鋪整個屏幕的，可能有以下原因導致不能平鋪：

1、圖片不夠大，又background屬性不能拉伸圖片；
2、只能用個div，把其z-index值設為負，並使這個div大小為整個body大小，在div里用<img> ；
3、body的background屬性去掉，要不然會被遮住。

5、html網頁中如何把背景圖設置為居下？

你是想把原來的居上平鋪改成居下平鋪？還是想原來的居上保留再來一個居下平鋪？

如果回是居上改成居下很答簡單 找到原來的樣式把background-position:top改成background-position:bottom 就ok了。

如果你想在原來基礎上再定義一個居下平鋪，那比較麻煩，要看你那頁面結構來說，如果只是一個html標簽那告訴你不好實現。如果有結構有兩層，並且這個背景定義在外面的容器里，那麼裡面的容器你再寫一個居下的樣式就可以了。如果定義在裡面容器里那麼外面的你再定義一個居下的樣式就可以了。前提是裡面的樣式的圖片只能顯示再上面部分，並且沒有定義背景色。也就是不能遮擋後面層的背景顯示就可以。

6、網頁製作圖片怎麼居中

圖片的寬度和高度是未知的，沒有一個固定的尺寸，在這個前提下要使圖片在一個固定了寬度和高度的容器中垂直居中，想想感覺還是挺麻煩的，由於最近的項目可能會用到這個方案，所以把一些常用的方法都收集整理了一下。

下圖是理想中的效果圖，外部容器的寬度和高度是固定的，中間的圖片寬度和高度未知，但是圖片要始終要相對於外部的容器垂直居中。

但是實際中實現的效果並不是很完美，由於各瀏覽器的解析都各不相同，所以各瀏覽器都會有1px-3px的偏差。

方法一 (XHTML 1.0 transitional)：

該方法是將外部容器的顯示模式設置成display:table，img標簽外部再嵌套一個span標簽，並設置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當然這只是在標准瀏覽器下，IE6/IE7還得使用定位。

HTML結構部分：

<div id="box">
  <span><img src="images/demo.jpg" alt=""></span>
</div>

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二 (XHTML 1.0 transitional)：

方法二和方法一的實現的原理大同小異，結構也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*針對IE6/7的Hack*/
top:50%; /*針對IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*針對IE6/7的Hack*/
top:-50%;left:-50%; /*針對IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

該方法有個弊端，在標准瀏覽器下由於外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，並且在IE8下設置邊框也無效。

方法三 (XHTML 1.0 strict)：

標准瀏覽器還是將外部容器#box的顯示模式設置為display:table-cell，IE6/IE7是利用在img標簽的前面插入一對空標簽的辦法。

HTML結構部分：

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
  display:inline-block;
  height:100%;
  vertical-align:middle
  }
#box img {
  vertical-align:middle
  }
</style>
<![endif]-->

方法三也同樣適用XHTML 1.0 transitional。以上方法都是收集於網頁教學網，暫時只對這3個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

7、網頁設計 背景圖片怎麼居中

垂直、水平

與網頁設計圖片居下相關的知識