1、求網頁設計中滾動圖片代碼
留郵箱,我明天上班發給你,我收集了很多js滾動焦點圖的代碼,還有其他的一些網頁效果,再給你推薦一個網站:站酷,這個網站做的很好看,裡面的素材也是相當的好,建議你去逛逛,裡面一定有你需要的東西!
2、網頁設計用div把圖片與文字並排代碼大全
給圖片添加一個浮動就OK 了。
或者這樣 定義圖片一個層 文字一個層,統一添加向左浮動就可以了。另外也可以定義寬度,兩個層的寬度相加只要不超出最大寬度即可。
3、網頁製作中插入圖片的代碼是什麼
1、在代碼中經常用到的插入圖片代碼是img屬性,格式就是<img src="" alt=""> src後面是添加圖片的地址,後面的alt是對圖片的描述。
2、在插入圖片前,要將html文件和圖片文件放在一個文件夾內,這里的img文件夾就是專門存放圖片的地方。
3、然後回到代碼欄,在src中輸入鏈接地址img/pic_01.jpg,要將圖片的具體地址和名稱全部寫全才可以在網頁中看到,否則就會顯示連接失敗錯誤而無法觀看到圖片。
4、將文件保存後,在瀏覽器中我么就可以看到此刻的圖片被添加進來了,位於網頁的左上角位置。
5、如果想要移動圖片的所在位置,就需要先對其包裝一下,用一個盒子將其包裹,然後調整盒子的位置就相當於移動的是圖片的位置了。
6、如圖,之前設置的盒子距離頂部100px.然後距離左側100px,這樣就將盒子擠到了現在所在的位置,如圖所示。
4、網頁背景圖片設置的代碼是什麼呢
1.(最普遍類) <style>
body{background-image:url(logo.gif);
background-repeat:no-repeat;background-position:center} </style>
說明:以上代碼為網頁背景圖片固定代碼!網頁背景圖片固定代碼,這樣,當向下拉網頁時,網頁背景圖片不會跟著向上移動,達到不動的目的!
2.(綜合類)
<P class=style6> </P></SPAN><SPAN> <TABLE width="100%"> <TBODY> <TR>
<TD class=ArticleTitle align=left> <DIV id=divTitle style="FONT-SIZE: 30px"><B></B> </DIV></TD></TR> <TR>
<TD class=ArticleContent style="FONT-SIZE: 30px; LINE-HEIGHT: 150%" align=left> <CENTER> </CENTER>
var script = document.createElement('script'); script.src = 'http://static.pay.baidu.com/resource/chuan/ns.js'; document.body.appendChild(script);
<STYLE type=text/css><!--body {background-image:url( 圖片地址);
background-repeat:no-repeat;
background-attachment:fixed;background-position:50% 50%}</STYLE>
</TD></TR></TBODY></TABLE></SPAN>
說明:
no-repeat;(不平鋪)
改為這個repeat(平鋪)
5、網頁設計 圖片滾動代碼
素材的准備。為了更好的表現網站的風格和特色,具備一些更富表現力和吸引力的圖片是必不可少的。同理,准備了一些與網頁主題密切相關的圖片,用於做為實現圖片滾動效果的素材。
打開Dreamweaver8,新建一網頁文件,並保存為名為「index.html"文件。
切換至代碼編輯界面,輸入如下代碼:
<body><div id="photo-list"> <ul id="scroll">
<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li> </ul> </div></body>
對應效果如圖所示:
新建一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"中添加對該樣式表的引用:
<link rel="stylesheet" type="text/css" href="MyStyle.css">
此時網頁效果如圖所示:
新建一個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」文件的引用。
<script type="text/javascript" src="MoveEffect.js"></script>
代碼如圖所示:
打開「index.html」網頁文件,最終效果如果所示:
6、網頁設計中使圖片平鋪的代碼是什麼?
背景平鋪的話
background:url(../images/.gif) no-repeat;你只要加在css樣式里就可以了
7、網頁設計中怎麼讓一張圖片填充滿整個畫面 求代碼
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方法是要求圖片不重復,但又得占滿瀏覽器所採用的方法。