1、網頁設計div+css中怎麼從圖1來實現圖2的效果的代碼
沒有看到代碼,但是看圖片,應該只將文本對齊方式由右對齊改為左對齊即可.即:
text-align:left;
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、dreamweaver網頁製作中,怎樣實現圖片的走馬燈效果
打開 Dreamweaver
新建 HTML 文檔;
修改標題為"跑馬燈"
保存為 index.html 文件。
首先,編寫跑馬燈部分的靜態 HTML 代碼,把圖片排列起來
在 <body> 和 </body> 標簽中添加以下代碼:
<div>
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
</ul>
</div>
給上一步的 HTML 代碼中的 div 標簽增加 class 屬性,如下:
<div class="con">
編寫跑馬燈部分的 CSS 樣式代碼,代碼放在 <head> 和 </head> 標簽中,如下:
<style type="text/css">
ul{list-style:none; padding:0; margin:0;}
.con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}
.con ul li{ float:left; margin:0 5px 10px 0;}
.con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}
</style>
引入 JQuery 庫
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
引入 Marquee 插件
<script type="text/javascript" src="marquee2.js"></script>
代碼放在 </body> 標簽前,如圖:
給 div 增加 marquee 類
<div class="con marquee">
保存文件,在瀏覽器中打開,就可以看到圖片開始滾動了。
圖片默認的滾動方向是「向上滾動」
如果要修改圖片滾動的方向,可以給 div 指定 direction 屬性,屬性值可以取:
up 上
down 下
left 左
right 右
4、誰知道網頁製作中圖片怎樣實現幻燈效果?
http://www.irishc.com 網站下面的那個幻燈片嗎
這個網站下面的幻燈片的代碼是
<embed ID="focus_flash" src="http://image2.sina.com.cn/bj/zonghe/pixviewer.swf" wmode="opaque" bgcolor="#FDD248"FlashVars="pics=圖片地址1|圖片地址2|圖片地址3|圖片地址4|圖片地址5&links=文章地址1|文章地址2|文章地址3|文章地址4|文章地址5&texts=文章名字1|文章名字2|文章名字3|文章名字4|文章名字5&borderwidth=180&borderheight=180&textheight=20" menu="false" quality="high" width="180" height="200" "sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/ascgetflashplayer" />
代碼說明:
圖片地址,就是你圖片或者文章配圖的圖片地址。
文章地址,如果圖片地址1你用的是這一篇文章的圖片,那就把這篇文章的地址粘貼在這里。
文章名字,就是這篇文章的名字。
width="180" height="200" 是幻燈片的尺寸,可以自行調節。
bgcolor="#FDD248" 是背景顏色,可以參考我的文章里的顏色設置。
textheight=20 是文字區域高度,可以自行調節。
不要陋掉哦
5、如何在網頁製作中將圖片設置為滾動
1、素材的准備。為了更好的表現網站的風格和特色,具備一些更富表現力和吸引力的圖片是必不可少的;
2、在電腦上找到並且打開Dreamweaver8,重新建立一個網頁文件,並且把網頁文件保存,且命名為「index.html"文件;
3、在完成網頁文件保存和命名為「index.html"文件以後,切換至代碼編輯界面,輸入相應的程序代碼;
4、新建一CSS樣式表文件,並將該文件保存到與「index.html」相同的目錄下,文件名稱為「MyStyle.css";
5、在樣式表文件"MyStyle.css」文件的完成以後,打開樣式表文件"MyStyle.css」文件輸入相應的程序代碼;
6、在網頁文件"index.html"中添加對該樣式表的引用:「<link rel="stylesheet" type="text/css" href="MyStyle.css">」,同時新建一個JS文件,並將該文件另存為「MoveEffect.js";
7、在JS文件」MoveEffect.js「文件建立完成以後,同樣打開JS文件」MoveEffect.js「文件輸入程序的代碼;
8、完成上述程序運行以後,在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用,「<script type="text/javascript" src="MoveEffect.js"></script>」,打開「index.html」網頁文件即可。
6、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屬性去掉,要不然會被遮住。
7、網頁效果圖怎麼製作?
平面廣告和網站頁面設計的宗旨就是吸引眼球,符合平面視覺沖擊特點,如何設計一款有特色、另類能吸引眼球的作品是擺在平面設計人員和photoshop愛好者面前的難題
現在以一款網頁平面設計效果圖為實例,講解網頁設計方面的創意知識,從網頁效果圖布局創意、顏色選擇,裁減效果圖和製作網頁特效等方面來學習。下面我們就一起來學習吧。
首先聲明一下,這款網頁效果圖在得到朋友許可後拿來製作教程實例,切勿抄襲和用做其他用途。先看效果圖0。
一、 創意設計思路
一個網站在製作前需要確定網站風格、網站主題、和主色調,在沒有確切的方案之前,最好不要貿然動手製作,不然最後的結果很可能是以失敗而告終。
筆者決定從關鍵字"路行""獨自行走"加上是暗色系的要求上下手,敲定顏色採用沙漠黃,沙漠很容易讓人聯想到孤單;板式確定為戶外廣告的樣式沙漠黃配合生銹的廣告牌。符合"頹廢""艱辛路途"主題。
二、 網站效果圖及LOGO的製作。
1、LOGO的樣式採用的是圖形和字元的組合。漢字LOGO的字體不是下載的字體,是筆者用鋼筆工具畫出來的字體。如圖1和1-1。
鋼筆工具勾勒出圖1的行走的人樣式,填充紅色,然後調整混合模式"斜面和浮雕"選擇浮雕效果、雕刻清晰、深度1、方向上、大小2,其他默認。這LOGO 的創意是,一個人在崎嶇不平的路上堅持自己的方向,配合網站的英文加中文名字,構成一個形象LOGO,剛好"路"字和"行"字採用紅色,突出了路行。
文字LOGO筆者用鋼筆工具勾畫出字的各個部件,然後拼接在一起,這里只給出"路"字的方法,"行"字方法如同。[next]
2、製作布局參考圖。如圖2
3、根據布局效果圖,新建文件大小1000X765,填充黑色。布局中的"顯示區域"為廣告牌是要掛到牆上的,使用"石頭材質"放置在頁面最上方來製作石板牆;使用"銹跡皮革材質"製作"顯示區域""LOGO"區域的邊框(註:一些材質的製作方法省略,平時可自行製作也可去圖片站下載保存,用的時候方便),將LOGO區域的邊框復制一層,調整不透明度為60%放置到LOGO曾下方,這樣大體的框架就完成了。如圖3和3-1。
(圖5)
(圖6)
4、找來一張沙漠公路的圖片,把這張圖片進行聚焦處理。點圖4示例的按扭進入"以快速蒙版編輯模式",選擇漸變,漸變模式為"徑向漸變"在圖中間向兩邊拉,屏幕會出現一團紅色;然後再點"以標准模式編輯"畫面會出現一個圓圈選擇區域,按"DELETE"刪除即可。如圖4和圖4-1。
(圖7)
(圖8)
5、在"路"圖片上方新建一層,按住CTRL+"路"圖層,單擊新建的圖層,填充顏色4E341B,調整為暗系沙漠黃。如圖5。
(圖9)
製作文字LOGO牌。找來圖5-1中的灰色材質,在"LOGO邊框"下面新建一層,然後在其之上新建一層,放置沙漠圖片,將其混合模式修改為"顏色"然後打開一開始制
8、網頁設計中如何實現圖片的自動切換,好想動畫效果似的,但不是插入的視頻,如下圖所示
試試這個圖片輪播
有12345數字一起切換
有小圖大圖一起切換
裡面有教程和源碼
9、網頁設計中怎麼實現圖片旋轉
css3 的transform屬性允許我們旋轉、縮放和移動元素。 可以通過給它傳遞一個 rotate(度數) 值來旋轉一個元素,正值表示順時針方向旋轉,負值表示逆時針方向旋轉,旋轉的中心點為元素的中心。
CSS代碼如下:
.rotate{
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
瀏覽器支持:Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+
10、網頁製作是如何實現圖片切換的?
新建項目文件夾如下圖所示
編寫index.html文件,代碼如下:
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
lunbo
</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/lunbo.js">
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px;">
<img src="images/5.jpg" alt="5.pg"/>
<img src="images/1.jpg" alt="5.pg"/>
<img src="images/2.jpg" alt="5.pg"/>
<img src="images/3.jpg" alt="5.pg"/>
<img src="images/4.jpg" alt="5.pg"/>
<img src="images/5.jpg" alt="5.pg"/>
<img src="images/1.jpg" alt="5.pg"/>
</div>
<div id="buttons">
<span index="1"class="on"> </span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>
</html>
編寫style.css文件,代碼如下:
*{ margin:0px; text-decoration:none;}
body{margin-top:50px;}
#container{width:600px; height:400px; position:relative;border:3px solid #333;overflow: hidden; margin:0 auto;}
#list{width:4200px; height:400px; position:absolute; z-index:1;}
#list img{float:left;}
#buttons{position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:250px;}
#buttons span{cursor:pointer;/*假超鏈接樣式*/ float:left; border:1px solid #fff; width:10px; height:10px; border-radius:10px; background:#333; margin-right:5px;}
#buttons .on{background:orangered;}
.arrow{cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px;
font-weight:bold; width:40px; height:40px; position:absolute; z-index:2; top:180px;
background-color: RGBA(0,0,0,.3); color:#fff;}
.arrow:hover{background-color:RGBA(0,0,0,.7);}
#container:hover .arrow{display:block;}
#prev{left:20px;}
#next{right:20px;}
編寫control.js文件代碼如下
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var pre=document.getElementById('prev');
var next=document.getElementById('next');
var index=1;
var animated=false;
var timer;
function showButton(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className="on";
}
function animate(offset){
animated=true;
var newleft=parseInt(list.style.left)+offset;
var time=300;//位移總時間
var interval=10;//位移間隔時間
var speed=offset/(time/interval);//每一次的位移量
function go(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style. left)<newleft)){
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}
else{
animated=false;
list.style.left=newleft+'px';
if(newleft>-600){
list.style.left=-3000+'px';
}
if(newleft<-3000){
list.style.left=-600+'px';
}
}
}
go();
}
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
next.onclick=function(){
if(index==5){
index=1;
}
else{
index+=1;
}
showButton();
if(animated==false){
animate(-600);
}
}
pre.onclick=function(){
if(index==1){
index=5;
}
else{
index-=1;
}
showButton();
if(animated==false){
animate(600);
}
}
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className=='on'){
return;
}
var myIndex=parseInt(this.getAttribute('index'));
var offset=-600*(myIndex-index);
index=myIndex;
showButton();
if(animated==false){
animate(offset);
}
}
}
container.onmouseover=stop;
container.onmouseout=play;
play();
}
images文件的圖片截圖如下
運行效果截圖如下: