网页设计图片代码
怎样在WEB程序设计中插入图片呢?具体一点
在<body></body>中间插入图片,代码为<img src="images/logo.gif">一般做刚开始做网页都有一个网页文件和一个相关的文件夹比如你现在的abc.htm和文件夹imagesabc.htm是写代码用的,images就是放图片、或者样式、脚本文件或者其它相关的文件用的而一般调用图片都采用<img src=images/051.gif">这样的相对路径
网页中的图片弹出放大效果怎么做?
1 可以用JS改变那张图片的SRC(路径)。如:document.getelementbyid("id").src="....";当然路径里可以带上图看的高和宽。这样来改变的图片!2 可以Display,来显示和隐藏。3 也可以是一个弹出层。里面引用的一张较大的图片,这个代码有点多。如果需要可以发MAIL网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是万维网中的一“页”,是超文本标记语言格式(标准通用标记语言的一个应用,文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。
网页设计 图片轮显的代码
<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.xxxx.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; }
网页设计 html 怎么在div图片里插入文字
第一种方法:添加一个DIV,采用绝对定位,图片所属DIV为基准<div style="position:relative;width:100px;height:100px;"><img src="" alt="" /><div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">文字</div></div>第二种方法:图片作为背景图片<div style="background:url(abc.jpg) no-repeat left top;">wenzi</div>
如何在网页制作中将图片设置为滚动
图片滚动代码 (从右向左滚动) <marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> <img src="图片 " alt="" /> <img src="图片" alt="" /> </marquee> 图片滚动代码 (从下往上滚动) <marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> <img src="图片 " alt="" /> <img src="图片" alt="" /> </marquee> 参数 用法介绍 behavior=scroll, slide, alternate 方式:循环绕行;只跑一次就停住;来回往复运动 scrollamount=20 速度:数越大越快
网页设计中怎么让一张图片填充满整个画面 求代码
1、如果楼主只是将其当做一张图片显示,可以通过css控制,如img{width:100%;height:100%;}.否则需要将其作为网页背景的话可以试试如下方法:2、如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用<bodystyle="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方法是要求图片不重复,但又得占满浏览器所采用的方法。
网页设计 图片滚动代码
素材的准备。为了更好的表现网站的风格和特色,具备一些更富表现力和吸引力的图片是必不可少的。同理,准备了一些与网页主题密切相关的图片,用于做为实现图片滚动效果的素材。打开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”网页文件,最终效果如果所示:
网页制作 让网页上的图片自动变换的代码
HTML中图片轮播代码如下:<!DOCTYPE html><html><head><title>图片轮播代码</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"></head><style type="text/css"> body{max-width: 640px;margin: 0 auto;} #lunbo ul li{width:100%;list-style: none;width:640px; height:250px;background-color: #f00;text-align: center;} #lunbo ul li:not(:first-child){display: none;}</style><body><div id="lunbo"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul></div><script type="text/javascript"> //因为使用了document,所以js需要放在需要执行的代码下面生效才能生效 var li=document.getElementById('lunbo').getElementsByTagName("li"); var num=0; var len=li.length; setInterval(function(){ li[num].style.display="none"; num=++num==len?0:num; li[num].style.display="inline-block"; },3000);//切换时间</script></body></html>
在网页中插入图片大小怎么控制
一下这串代码可以控制网页中插入的图片大小。(调节350和360控制)<p style="text-align: center; "> <img alt="" src="图片地址" style="width: 350px; height: 360px; " /></p>
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属性去掉,要不然会被遮住。