1首先，打开html编辑器，新建html文件，例如indexhtml2在indexhtml中的script标签中，填入js代码setInterval#39$quotimgquotattrquotsrcquot， quotsmall3pngquot#39，10003浏览器进入indexhtml页面中，此时显示出一。

viewport标签极其属性代码如下ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=10， minimumscale=10， maximumscale=10， userscalable=noquot每个属性的详细介绍2使用css3单位remrem是CSS。

1首先我们创建一个简单的项目，如图所示包括html，css和img三个2这里是html文件，引入css和html代码文件，如图所示3这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果4这里是事件，这里定义了。

光是html的话很难实现轮播，轮播一般都是html+js才能完成给你一个最简单的html+js轮播例子html代码ltdiv class=quotsidequot id = quotlunboquot ltulquot ltliltimg src=quotimages1jpgquotltli ltlilt。

lt！ ***js代码*** ltscript type=quottextjavascriptquot var scrollDiv = documentgetElementsByClassNamequotscroll_divquot0 定义初始值 var left =0 定义一个定时器 走一步 function move var t。

下面是可配置轮播动画代码 fnslide=functionoptions var defaults= affect1， 1上下滚动 2幕布式 3左右滚动4淡入淡出 time 5000， 间隔时间 speed500， 动画快慢 dot_text。

用ltmarquee标签实现，html代码示例如下 lthtmlltheadlttitle文字滚动示例lttitleltheadltbody ltdiv 水平滚动ltmarquee direction=quotleftquot align=quotbottomquot height=quot25quot width=quot100%quot onmouseout=quot。

不一样，需增加自适应标签来保持一样代码如下ltmeta name=quotviewportquot content=quotwidth=devicewidth，initialscale=10， minimumscale=10， maximumscale=10， userscalable=noquot 解释Viewport指用户网页的。

头部要加的是这个，放在ltheadlthead标签里，这是初始化手机屏幕的ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10， maximumscale=10， userscalable=noquot 你写的这段是要放在所有css。

代码实例ltstyle type=quottextcssquot html fontsize 42px ltstyle4 按照设计图的像素进行开发 按照正常网页开发流程，进行网页开发即可5 使用百分比和rem替换px 代码效果对比*使用固定像素。

1，输入positionfixedtop0left0将整个div固定在屏幕的顶部和左侧2输入width100％height100％min－width1000px这个可以适合div的高度和宽度，而min－width是为了实现让屏幕宽度在1000px以内时。

Adobe Dreamweaver CS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面其Fluid Grid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性开发者可以完全实现Web设计的可视化操作，无需为代码所困用户。

首先你要在html页面头部加上下面的代码，其次你要把页面中的宽度修改为百分比，不能不用固定尺寸，一些小的模块可以用固定尺寸再就是css中要应用到媒体查询，也就是@media，不懂可以百度ltmeta name=quotviewportquot content=。

可以用jQuery获取到当前的窗口的宽度，来计算iframe的宽和高，示例代码如下ltiframe src=quot frameborder=quot0quot id=quotdemoquotltiframeltscript src=quot90jquery。

05 在HTML文件中加上对样式文件的引用，返回文件夹，双击HTML文件，发现浏览器的变化会引着图片一起变化，自适应屏幕的大小。

逗自适应网页设计地到底是怎么做到的看其实并不难首先，在网页代码的头部，加入一行 viewport元标签viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度width=devicewidth，原始缩放比例。

AdobeDreamweaverCS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面其FluidGrid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性开发者可以完全实现Web设计的可视化操作，无需为代码所困用户不但。