網頁設計代碼截圖_如何通過網頁源代碼來提取網頁中的圖片

1、網頁設計背景圖片代碼。

比如

比如這樣的

想在1.html中使用1.jpg，<img src="../images/1.jpg" />

main.css中使用的話，可以background:url(../../images/1.jpg);

2、網頁設計中怎麼讓一張圖片填充滿整個畫面求代碼

1、如果樓主只是將其當做一張圖片顯示，可以通過css控制，如img{width:100%;height:100%;}.
否則需要將其作為網頁背景的話可以試試如下方法：
2、如果這張圖片為背景圖片由於背景圖片不具有伸縮性，只能通過別的方法繞著解決，在ie中可以用<body
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">，實現背景拉伸鋪滿整個瀏覽器，但其它的瀏覽器不支持。
這時可以拐個彎，設置兩層div，底層div當做背景使用，放置一張圖片即可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
再將網頁內容放置到第二層上<div id="content">頁面內容</content>
3、網頁背景圖片默認情況下是重復平鋪滿整個頁面。上面2方法是要求圖片不重復，但又得占滿瀏覽器所採用的方法。

3、網頁設計圖片輪顯的代碼

網頁設計圖片輪顯的代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<SCRIPT src="js/article.js"></SCRIPT>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="312" border="0" align="center" cellpadding="0" cellspacing="0" class="solidbox">
<tr>
<td width="312" height="312" align="center"><TABLE border=0 align="center" cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD><DIV id=oTransContainer
style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 220px; HEIGHT: 194px"><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV1
style="DISPLAY: yes;"
height=300 src="images/01.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV2
style="DISPLAY: none;"
height=300 src="images/02.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV3
style="DISPLAY: none;"
height=300 src="images/03.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV4
style="DISPLAY: none;"
height=300 src="images/04.jpg"
width=300 border=0></A></DIV>
</TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td height="22" align="right" valign="top"><script>var MaxImg = 4; fnToggle();</script>
<TABLE cellSpacing=1 cellPadding=0 width=110
border=0>
<TBODY>
<TR>
<TD width=26><A href="javascript:toggleTo(1)"><IMG height=15
src="images/s_1.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(2)"><IMG height=15
src="images/s_2.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(3)"><IMG height=15
src="images/s_3.gif" width=17
border=0></A></TD>
<TD width=27><A href="javascript:toggleTo(4)"><IMG height=15
src="images/s_4.gif" width=17
border=0></A></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
</table>
</body>
</html>
CSS的代碼為：
td {font-size: 12px;}
.solidbox {
BORDER-TOP: #D7D7D7 1px solid;
BORDER-RIGHT: #D7D7D7 1px solid;
BORDER-BOTTOM: #D7D7D7 1px solid;
BORDER-LEFT: #D7D7D7 1px solid;
}

4、求js實現網頁截屏效果代碼或相關資料（無頭緒中）

我之前也有這樣的需求..發百度和csdn都沒解決

後來還是得用java在後台處理

T.T 祝你好運

5、根據截圖寫出完整的HTML代碼。

<html>
<head><title>在線翻譯</title></head>
<body>
<p style="text-align:right; font-size:12px;">
<a href="ask.htm">意見反饋</a>
<a href="navigation.htm">網站導航</a>
</p>
<p style="text-align:center;"><img src="ciba_logo.gif" /></p>
<p>
<h3>詞典句庫翻譯漢語 >></h3>
<form>
<input size=35 type="text" />
<input type="submit" value="查一下"/>
</form>
<h3>文網文[2008]058號.....剩下的自己寫</h3>
</p>
</body>
</html>

6、求這兩個網頁截圖的html代碼

你可以直接把這輛個的代碼復制下來自己修改一下就好了，都有圖了

7、如何通過網頁源代碼來提取網頁中的圖片？

可以現在網頁源碼中找到圖片的鏈接，然後將圖片在新窗口打開並進行保存。

1、右擊想要提取的圖片，在展開的菜單中點擊「檢查」按鈕打開控制台：

2、這時控制台中會跳轉到圖片的源碼位置，將滑鼠放在鏈接上可以查看圖片的縮略圖，這時右擊圖片鏈接，點擊「Open in new tab」按鈕將圖片在新窗口打開：

3、圖片在新窗口打開後，右擊被打開的圖片，在展開的菜單中點擊「圖片另存為...」按鈕即可將圖片進行保存：

8、網頁設計圖片滾動代碼

素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的。同理，准備了一些與網頁主題密切相關的圖片，用於做為實現圖片滾動效果的素材。

打開Dreamweaver8，新建一網頁文件，並保存為名為「index.html"文件。

切換至代碼編輯界面，輸入如下代碼：

對應效果如圖所示：

新建一CSS樣式表文件，並將該文件保存到與「index.html」相同的目錄下，文件名稱為「MyStyle.css"。

在新建的樣式表文件"MyStyle.css」文件中輸入如下代碼：
* { padding:0; margin:0;} /*設置所有對像的內邊距為0*/
body { text-align:center;} /*設置頁面居中對齊*/
#photo-list {
/* 6張圖片的寬度（包含寬度、padding、border、圖片間的留白）
計算：6*(100+2*2+1*2+9) - 9
之所以減去9是第6張圖片的右邊留白 */
width:681px;

/* 圖片的寬度（包含高度、padding、border）
計算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份將被隱藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

對應文件內容如圖所示：

在網頁文件"index.html"中添加對該樣式表的引用：

此時網頁效果如圖所示：

新建一個JS文件，並將該文件另存為「MoveEffect.js"。

在」MoveEffect.js「文件中輸入如下所示代碼：
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //獲得每個img容器的寬度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //當 c.scrollLeft 和 width 相等時，把第一個img追加到最後面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //數值越大越慢
ul.style.width = width*itemCount + 'px'; //載入完後設置容器長度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};

然後在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用。

代碼如圖所示：

打開「index.html」網頁文件，最終效果如果所示：

9、網頁中的截圖快捷鍵是什麼？

有四種截屏方式：

第一種： PrScrn 使用這個鍵截屏，獲得的是整個屏幕的圖片；專

第二種：Ctrl + PrScrn 使用這個組合鍵截屏，獲得屬的是整個屏幕的圖片；

第三種：Alt + PrScrn 這個組合鍵截屏，獲得的結果是當前窗口的圖片；

第四種：Ctrl+Alt+A 這個組合鍵截屏，需要在登陸QQ的基礎上進行；

第五種：使用專業的截屏軟體，例如Snagit，專業軟體的截屏效果更加強大。

(9)網頁設計代碼截圖擴展資料：

截屏的其他操作方法：

1、直接按Print Screen，截取整個屏幕到剪切板；按Alt+Print Screen，可以截取當前活動窗口。

2、登陸QQ聊天軟體，按Ctrl+Alt+A再選擇要截下的區域，可以另存為，也可以選擇直接保存到剪切板。

3、登陸飛信，按Ctrl+Alt+P再選擇要截下的區域，可以另存為，也可以選擇直接保存到剪切板。

4、登陸YY語音，按Alt+A再選擇要截下的區域，雙擊屏幕直接保存到剪切板。

5、登陸阿里旺旺，按Ctrl+Alt+P再選擇要截下的區域，可以另存為，也可以選擇直接保存到剪切板上。

10、利用div設計網頁框架結構代碼截圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>鏃犳爣棰樻枃妗?/title>

</head>

<body>

</div>

<div id="Visiting">First Time Visiting?</div>

<div id="loginbar_conter_left">Sign up for special sales letter and shop with Myeglobal.com

<label>

</label>

</div>

<label>

</label>

</div>

or know more about Myeglobal.com</div>

</div>

</form>

</div>

<div id="banner_right_btn"><a href="#">click here to dress yourself up</a></div>

</div>

<div id="main_title1_conter"><a href="#">BRIDAL FASHION</a><a name="1" id="1"></a></div>

<div id="main_title1_text">From classic A-line to modern mermaid style and ball gowns too, no matter you're glamorous or romantic, we sorted through 1000s of dress designs to pick the wedding dresses you're dreaming for.</div>

</div>

<ul>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1417970">Ball Gown Spaghetti Straps

Bridal Gown</a></p>

<span>Price:US$101.20</span></li>

<p> <a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1432184">Classic Sweatheart Neck Wedding Gown</a></p>

<span>Price: US$88.00</span><br />

</li>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1435490">Sweetheart Pricess Wedding Dresses</a></p>

<span>Price: US$83.60</span><br />

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1435520">Custom Strapless Ruffles Wedding Gown</a></p>

<span>Price: US$88.00</span></li>

</ul>

<ul>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1438611">New Princess Style Strapless Wedding Dress</a></p>

<span>Price:US $95.70</span><br />

</li>

<p> <a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1438627">Strapless Custom Made Wedding Dress</a></p>

<span>Price: US$95.70</span></li>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1438739">Simple V Neck Ruffly Bridal Dresses</a></p>

<span>Price: US$91.85</span> </li>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1440235">Elegant Empire Waistline Bridal Dress</a></p>

<span>Price: US$84.50</span></li>

</ul>

</div>

</div>

<div id="main_title2_conter"><a href="#">FORMAL EVENT</a><a name="2" id="2"></a></div>

<div id="main_title2_text">Got a sociality event invitation? Find your perfect formal gown from DressilyMe formal affair selection. It ranges from black tie affair to cocktail party, and hundreds of designs you're guaranteed to be attractive.</div>

<ul>

<p><a href="http://www.myeglobal.com/proctdetail-1427112-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Elegant Deep-V Raised Waistline Dress</a></p>

<span>Price: US$82.50</span></li>

<p> <a href="http://www.myeglobal.com/proctdetail-1427153-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Custom Stylish V Neck Floor Length Dress</a></p>

<span>Price: US$82.50</span> </li>

<p><a href="http://www.myeglobal.com/proctdetail-1429448-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Glamorous Black Basque Evening Dress</a></p>

<span>Price: US$83.60</span><br />

<p><a href="http://www.myeglobal.com/proctdetail-1431618-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Custom Sweethear Ruffly Cocktail Dress</a></p>

<span>Price: US$83.60</span><br />

</ul>

<ul>

<p><a href="http://www.myeglobal.com/proctdetail-1436892-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Strapless Knee Length A-line Cocktail Dress</a></p>

<span>Price: US$55.00</span><br />

</li>

<p> <a href="http://www.myeglobal.com/proctdetail-1437023-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Elegant Queen Anne Neckline Formal Gown</a></p>

<span>Price: US$71.50</span></li>

<p><a href="http://www.myeglobal.com/proctdetail-1437032-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Satin Halter Neck Mermaid Dresses</a></p>

<span>Price: US$71.50</span><br />

</li>

<p><a href="http://www.myeglobal.com/proctdetail-1437045-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Spaghetti Straps Evening Dress With Sashes</a></p>

<span>Price:US $71.50</span></li>

</ul>

</div>

</div>

<div id="main_title3_conter"><a href="#">GIRLS'PROM DRESSES</a><a name="3" id="3"></a></div>

<div id="main_title3_text">Ask any girl what is the most important aspect in their long plans for prom night and chances are that you will always hear prom dress. Now it is the time to go prom dress shopping simply online from DressilyMe prom collection.</div>

</div>

</body>

</html>

導航:首頁 > 萬維百科 > 網頁設計代碼截圖

網頁設計代碼截圖

與網頁設計代碼截圖相關的知識