⑴ web中將圖片設為背景圖片的代碼是什麼
web中將圖片設為背景圖片的代碼如下：
<html>
<body background="a.jpg">
</body>
</html>
這樣就把圖片a.jpg設為背景圖片了。
<body bgcolor="#CCCCCC">
這個是把背景設成灰色
⑵ web中將圖片設為背景圖片的代碼是什麼。謝謝大家了！！
呃，如果是在HTML裡面就用BGGROUD就可以了，如果是用ASP.NET就用BACKGROUD-IMAGE ，例如：
*{margin:0px; padding:0px;}
body{ color:#687f96; font-size:14px;}
body img{ border:0px;}
.clear{ clear:both;}
ul{list-style-type: none;}
a{ color:#687f96; text-decoration:none;}
.zhong { width:1000px; margin:0 auto; padding :100;}
.top{ height:73px;background:url(../images/bg_1.gif) repeat-x;padding:0 24px;}
.top_left{ float:left; margin-top:14px;}
.top_right{ float:right; margin-top:10px; text-align:right;}
.top_right_1{padding-right:30px;}
.top_right_1,.top_right_1 a{ color:#0473a9;}
⑶ flash載入圖片如何實現過渡效果
我來回答：這個很簡單，我告訴你正解
這裡面用到的技術：ajax，div層的概念，javascript的第三方特效庫
div層的概念：類似於一個容器，能夠容納圖片等。用代碼來解釋就是：「<div>這里存放圖片</div>」
略縮圖和大圖：圖像可以用代碼來控制顯示的大小，所以你能夠看到小圖和大圖
當你點擊略縮圖示，你最先看到一塊白色區域，中間的地方有個載入等待圖案，這裡面用到了ajax技術，同時用到了div層的概念（稍候解釋）。當ajax接收到了圖片載入完畢的信息後，會告知瀏覽器，可以顯示圖片了。
第二步，圖片顯示在白色區域中。
為什麼有些時候白色區域會變小？
因為這里又用到了第三方的js函數庫，他的作用的過渡效果，即div層的移動。所以你會看到白色區域慢慢的向圖片邊緣靠攏。
問什麼你點擊不到其他地方？
用技術的角度來解釋，就是在你第一次點擊小圖的時候，他已經自動創建的一個透明的div層在上面，所以你點不到他
這就類似於你在桌子上放一幅畫，而在畫的上面放上玻璃板，當你用筆去往上寫東西的時候，當然不會寫到畫上面。
我說，大哥，你明白了嗎？我解釋的不容易啊，給分吧
********************************************
我是搞web開發的，如果用我們的專業術語來給你解釋，你能明白嗎？你有什麼依據來證實你說的是對的？代碼的編譯原理，程序執行的先後順序，我能夠用我的經驗判斷出來。如果你想真正弄清楚這是怎麼一回事，我希望你看看javascript和html基本語法知識（特別是div的用法，設置他的style的z-index屬性和filter屬性，然後就是js的基本語法和dom規范），然後再來提問。這樣效果會好一些，前提是你願意在這上面花費一些時間
*********************************************
頁面確實有flash控制項，但只有一個地方用到了，而圖片顯示的時候沒有用到。共兩個文件如下(webroot代表應用根目錄)
名稱：flash_ad_relay.swf
目錄：webroot/comic/flasher/ads_data/
名稱：imgad.swf
目錄：webroot/comic/flasher/ads_data/
說明：通過觀察ads.htm（目錄在webroot/comic/flasher/）文件代碼，能夠判斷，flash_ad_relay.swf應該是google提供的一個flash控制項，其作用是控制廣告程序的載入進度。而imgad.swf則是一個廣告（ad）程序，當當網的那個，在頁面最下面。
總體來說flash_ad_relay.swf用來控制imgad.swf文件載入的進度並且顯示。
入口方法：tianchaoyu.html文件中<script type="text/javascript" src="
http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
此行代碼用來載入flash廣告程序，這應該是遵循了google的命名規范和目錄結構。
上面這個是我個人推測的，但只有這一個地方用到flash文件，圖片顯示完全沒有用到。
**********************************************
lightbox.css文件
目錄：
http://www.songzg1.com/comic/flasher/css/lightbox.css
說明：#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
上面為lightbox.css代碼片斷，width: 250px;height: 250px;控制了圖片第一次點擊的時候初始化大小為250像素*250像素 在17寸1024*768解析度上。載入的過程中用到了loading.gif圖片（
http://www.songzg1.com/comic/flasher/images/loading.gif），你可能是因為這個原因把它理解成flash吧。這只是一張gif圖而已。
當點擊圖片，圖片數據傳輸完畢之後，能夠獲得圖片的寬高屬性，根據這些屬性，那個div層（<div><img /></div>）會自動擴大或縮小，以適應新的圖片。這就是你看到的過渡效果。
處理放大縮小過渡效果的文件是lightbox.js，而effects.js也有一些坐標變化的處理。
lightbox.js是一個簡單實用的用來把圖片覆蓋在當前頁面上的腳本. 它能被快速安裝並且運作於所有流行的瀏覽器.。這個網站上用的是2.02版本，它是由Lokesh Dhakar人於20060331日創建的，可以通過
http://www.huddletogether.com察看相關信息。
最後介紹使用方法，非常easy
**********************************************
先說一下其他兩個js框架
prototype.js
它是一個非常優雅的javascript基礎類庫，對javascript做了大量的擴展，而且很好的支持Ajax，國外有多個基於此類庫實現的效果庫，也做得很棒。
像前面提到的lightbox.js和後面要說的effects.js是基於prototype.js實現的，他們通常結合使用。
scriptaculous.js和effects.js
這是個動畫效果庫。
scriptaculous 包含以下幾個部分：
builder.js ：提供了一種方便的建立html元素的方法
controls.js ：包含自動提示和動態編輯兩個控制項
dragdrop.js ： 提供元素拖放的功能
effects.js ： 設計優良的ajax效果庫，這篇文章要講的就是這個
slider.js ： 一個滑動條控制項
effects.js中提供了兩種類型的動畫效果，一種稱為核心效果（core effect），一種稱為組合效果（combination effect）
**********************************************
結合使用
第一步
Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果庫. 你將需要外調這三個 Javascript 文件在你的 header.
代碼：
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
第二步
外調 Lightbox CSS 文件 (或添加 Lightbox 樣式到你現行的樣式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
第三步
檢查 CSS 並確定調用的 prev.gif 和 next.gif 文件在正確的位置. 同樣要確定調用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正確的位置.
方式一：添加 rel="lightbox" 屬性到任何一個鏈接標簽去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
方式二：如果你有一套你想分組的相關圖片, 接著上一部並且又在 rel 屬性中添加一個帶方括弧的組名. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
********************************************
********************************************
基本上就是這么用，我都寫的快吐血了
要是還有不明白的，提出來，需要詳細代碼的話，我可以給你做一個demo
lightbox下載地址：
http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip
prototype.js下載地址（你只需要下在lightbox就可以了，裡麵包含著個文件了）：
http://www.prototypejs.org/ 26906希望對你有用！
⑷ JavaScript代碼實現圖片循環滾動效果
1.概述
循環滾動圖片，不僅可以增添Web頁面的動態效果，而且可以節省頁面空間，有效地保證在有限的頁面中顯示更多的圖片。
2.技術要點
主要應用setTimeout()方法實現圖片的循環滾動效果。setTimeout()方法的語法格式如下：
setTimeout（function,milliseconds,[arguments]）
參數說明：
a.
function：要調用的JavaScript自定義函數名稱。
b.
Milliseconds：設置超時時間（以毫秒為單位）。
功能：經過超時時間後，調用函數。此值可以用clearTimeout()函數清除。
3.具體實現
（1）在頁面的合適位置添加一個id屬性為demo的<div>標記，並在該標記中添加表格及要要滾動顯示的圖片。關鍵代碼如下：
<div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;">
<table
border="0"
cellspacing="0"
cellpadding="0">
<tr>
<td
valign="top"
id="marquePic1">
<!--
要循環滾動的圖片
-->
<table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
>
<tr
align="center">
<%for(int
i=1;i<8;i++){%>
<td>
<img
src="Images/<%=i%>.jpg"
width="118"
height="166"
border="1">
</td>
<%}%>
</tr>
</table>
</td>
<td
id="marquePic2"
width="1"></td>
</tr>
</table>
</div>
（2）編寫自定義的JavaScript函數move()，用於實現無間斷的圖片循環滾動效果。speed數值越大圖片滾動的越快，具體代碼如下：
<script
language="javascript">
var
speed=30
;
//設置間隔時間
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//獲取demo對象
function
Marquee(n){
//實現圖片循環滾動的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滾動
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//繼續滾動
MyMar=setInterval("Marquee(5)",speed);
}
</script>
以上所述是小編給大家介紹的JavaScript代碼實現圖片循環滾動效果的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
⑸ web前端中，怎麼給背景圖片做出輪播效果啊求詳細代碼
直接用輪播插件把http://www.jq22.com/jquery-info1940
⑹ html5怎麼設置網頁過渡效果
步驟1 創建空白的HTML 5模版
首先，我們創建一個空白的模版，代碼很簡單，如下所示：
復制代碼
步驟2 增加HTML 5新標簽 HTML 5中新增加了不少標簽，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在頁面模版中，我們需要確保每個區域都能正確地對齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標簽。代碼如下所示：
復制代碼
讀者可能留意到這里使用的div id=」wrapper」，這個是稍候用來做meida query的時候調整全局CSS樣式調整用的 步驟3 往HTML 5標簽中增加代碼
1）首先往標題中增加如下代碼：
Simple HTML5 Template
復制代碼
2）往導航標簽中添加如下代碼，這樣很方便地構件了一個簡單的頁面分類導航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
復制代碼
3）使用標簽來描述每一個要展示的內容實體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內容就可以使用標簽了。如下代碼所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply mmy text of the printing and typesetting instry.
Lorem Ipsum has been the instry's standard mmy text ever since the
1500s
復制代碼
4）添加標簽 HTML5提供的元素標簽用來表示當前頁面或文章的附屬信息部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分。
根據目前的規范，元素有兩種使用方法：
被包含在中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的引用、詞彙列表等。
在之外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情鏈接、附屬導航或廣告單元等。
代碼如下：
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply mmy
text of the printing and typesetting instry.
復制代碼
5）加上最後的標簽，代碼為：
Copyright@ 2013 HTML5.com Privacy Policy - About Us
復制代碼
步驟4 增加CSS樣式
首先創建一個空白的樣式，如下：
[/code] 然後在http://necolas.github.com/normalize.css/中下載這個css,然後將其內容復制到該空白的文件中代碼如下： [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
}
nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}
nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* css for */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}
/* css for */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;
}
aside.sidebar
ul li { width:100%; margin: 0px 0px 2em; padding:
0px; float: left; list-style: none;
}
aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;
}
aside.sidebar
ul li ul li ul li { margin: 0px; padding: 0px 0px 0px
1em; width: 90%; font-size: 0.9em;
}
aside.sidebar
ul li h3.widget-title { width:100%; margin: 0px;
padding: 0px; float: left; font-size: 1.45em;
}
/* css for */
footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }
復制代碼
步驟5 為移動應用使用@media query查詢 為了進行響應式設計，最佳的方案是使用@media query去進行查詢，在上面的CSS代碼中添加如下代碼：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
復制代碼
步驟6 增加jquery,modernizer和html5shiv到標簽中 這里推薦使用Modernizr 和html5shiv，它們都是一個能在多種瀏覽器中通過運行各種腳本兼容運行支持大部分HTML 5標簽的插件。我們將它們和jQuery庫放在標簽前
⑺ css如何實現顏色的過渡效果
需要准備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html。
⑻ 網頁背景圖片設置的代碼是什麼呢
代碼為：{background-image: url(URL)|none}
1，背景顏色 {background-color:數值}。
2，背景重復 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}。
3，背景固定 {background-attachment:fixed|scroll}。
4，背景定位 {background-position:數值|top|bottom|left|right|center}。
5，背影樣式 {background:背景顏色|背景圖象|背景重復|背景附件|背景位置}。
拓展資料
1、所謂的網頁代碼，就是指在網頁製作過程中需要用到的一些特殊的「語言」，設計人員通過對這些「語言」進行組織編排製作出網頁，然後由瀏覽器對代碼進行「翻譯」後才是我們最終看到的效果。
2、製作網頁時常用的代碼有HTML，JavaScript，ASP，PHP，CGI等，其中超文本標記語言（標准通用標記語言下的一個應用、外語簡稱：HTML）是最基礎的網頁代碼。
⑼ WEB網頁頁面背景顏色漸變設置
頁面上實現漸變背景有兩種方法，一種是用背景圖片，一種是用代碼
如果漸變是自上而下的，並且漸變的頂部還想再加幅圖，如果你需要讓這幅圖和漸變背景色的過渡平滑自然。那麼，用背景圖片比較適合你的要求
把漸變部分，切成寬為1像素，高為漸變全部高度。假定存為"bg.gif"
將這個bg.gif作為網頁BODY區的背景圖，並且設計背景圖橫向重復平鋪。（注意的是，不要有縱向重復）