静态网页布局
㈠ 先做了一个静态页面,布局兼容所有浏览器,将静态页面放入.net母版页中,布局就全乱了。
你的母板页里是抄否引用了CSS样式?袭
注意一下当静态页面引入到母板页中,你引用样式的路径应该改变。
比如main.master是母板,在根目录,引用了CSS样式src路径是css/a.css;你的静态页是在/html/a.html,这个目录下,一旦a.html引入到母板页中,则样式会乱。
最好是将内容页的CSS引用,放到用contentplaceholder实现。
在母板页中Head部分增加一个contentplaceholder,然后内容页中需要引用CSS的地方全都用content指向母板页head部分的这个contentplaceholder,和你普通用内容页的方式一样。
css路径也成a.html的相对路径。
㈡ 制作html静态网页如何使用div+css布局,用的dw
用百分比来设定各元素的宽度。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
</head>
<style>
.header{
:left;
width:100%;
height:auto;
position:relative;
background:#ccc;
}
.header.logo{
float:left;
width:100%;
height:100px;
background:#aaa;
}
.header.logoimg{
margin:20px00100px;
}
.header.menu{
float:left;
width:100%;
position:absolute;
top:100px;
left:0;
background:#bbb;
}
.header.menuul{
width:100%;
}
.header.menuulli{
float:left;
width:10%;
height:25px;
line-height:25px;
text-align:left;
list-style:none;
background:#ababab;
}
.header.menuulli.long{
width:30%;
}
</style>
<body>
<divclass="header">
<divclass="logo"><imgsrc="images/logo.jpg"width="200"height="65"/></div>
<divclass="menu">
<ul>
<liclass="long">234234</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
</ul>
</div>
</div>
</body>
</html>
㈢ 怎样制作简单的静态的网页设计
你好。首先下载Dreamweaver.exe并打开,选择你使用的编辑语言,本案例用html
打开页面后,选着设计窗口,如图所示。设计窗口可以快速布局网页,不需要自己编辑代码。
打开你要设计的网页的设计图,本经验是网络经验首页为例,首先我们制作顶上的搜索条,点击插入—表格(如图所示)。打开表格属性编辑表格属性。插入1行和5列,表格宽度为1130,(即为网页的宽度),边距,间距分别为0,此表格只是为了定位,因此不设边框。
设置好表格后,可在表格里面插入你的内容,首先我们插入logo,点击插入—图像—选择你要插入的图片。点确定即可完成logo插入。表格的小大高度都可根据设计图需要调整,鼠标移到表格边框虚线即可拖拉调整高度或宽度。如图所示
接下来我们来做搜索框,点击插入—表单—插入文本域—确定。插入文本框后可点击文本框调整文本框的属性。根据设计图,文本框上班还要添加内容,因此,可选择单元格右击选择表格—拆分单元格,此处是需要添加一行的内容,因此拆分为两行,如图所示。
用同样的办法拆分上面的行,因为要添加10个选择项,因此拆分为10列(右击选中的行—拆分单元格—10列—确定)。拆分好后在小格里面添加文字内容即可。表格大小可根据步骤四调整。
接下来我们做搜索按钮,同样根据设计图要把表格拆分为两行。点击插入插入按钮的图片。
接下来给按钮添加链接,本次经验分享的是静态网页,因此在此先跟大家分享怎么直接添加按钮链接。同样是点击插入—添加超级链接,填写你事先做好的页面链接,或者其他网站链接。
剩下的内容都可根据方法步奏逐渐添加,调节细节即可完成你想要设计的网页。如图所示是上面步奏所做的静态页面,把所有做好的网页用超级链接链接起来即可做成一个简单的网站
另外我们还可以采用front page。也可以很容易的实现。
望点赞。
㈣ 静态网页div 这种布局如何实现
直接给你贴代码吧
css样式:
.nav{ width:1000px; margin:0 auto;}
回.logo{ float:left; line-height:50px;}
.nav ul{ float:left;}
.nav ul li{ float:left; width:100px; height:50px; line-height:50px; text-align:center;}
HTML:
<div class="nav">
<div class="logo"><img src="logo.jpg" /></div>
<ul>
<li>文字答</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
</div>
㈤ 怎么改静态网页的首页布局
修改静态网页布局方法:
1、要有站点(本地或者空间都可以),而且有操作权限,
2、将首页端文件在本地用dw软件打开,
3、修改布局(自己喜欢的),就可以,保存文件,在站点刷新就可以了。
注意:在空间上,要先在本地修改好后,通过FTP软件上传,在空间网站刷新就可以。
㈥ 静态网页设计制作中的布局模式
一、静态布局(Static Layout)
即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。
1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端。
2、设计方法:
PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.。
在移动端开发中采用静态布局的两种方式:
(1)在viewport meta标签上设置width=320,页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放,从而刚好占满整个屏幕。(见前端开发-web app 变革之rem)
(2)设在viewport meta标签上设置content"width=640,user-scalable=no,页面的各个元素也采用px作为单位。由于640px超出了手机宽度,浏览器会自动缩小页面至刚好全屏。
优点:这种布局方式对设计师和CSS编写者来说都是最简单的,亦没有兼容性问题。
缺点:显而易见,即不能根据用户的屏幕尺寸做出不同的表现。
二、流式布局(Liquid Layout)
流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。代表作栅栏系统(网格系统)。
网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。
1、布局特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】
2、设计方法:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。
三、自适应布局(Adaptive Layout)
自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点:屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
2、设计方法:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
四、响应式布局(Responsive Layout)
随着CSS3出现了媒体查询技术,又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。即:创建多个流体式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式几乎已经成为优秀页面布局的标准。
1、布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
2、设计方法:媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
㈦ 怎么用div+css布局静态页面
10分,,,,
你这是工作的呢,还是作业的呢??
如果是工作的话,,只能说真心别干这行了,自己都把这些东西看这么便宜,,做起来还有什么前途。。。
如果学习的过程,或者做的过程,大家讨论帮忙给出解决方案。。。
直接丢张图出来,,给我代码。。。。
我去,,,这里什么时候开始变成这样了。。。
㈧ 静态,自适应,流式,响应式四种网页布局有什么区别
做好的html页面都是静态的
你所说的静态应该是固定值
静态:比如谷底固定好专div的宽度和高度[偏向理解]
自适应:属也就是按照你的浏览器宽度自动缩小放大
流式:也就是div自行排列 比如[div 宽是100px 那么我浏览器宽是500px 我们可以排列5个div 如果浏览器宽是300px 那么div就会自动排列成2行 第一行是3个div 第二行是2个div]
响应式:借助css3中的Media Queries 响应媒体查询这个标签来达到判断分辨率大小来执行css中的样式代码[早期做响应式的话 使用js来判断]
像这样网站: ipbun.cn 就是响应式的
㈨ 求用表格做html静态网页.一定要静态....8张..只要几个有布局和表格做的链接
毕业作业....
直接无视。帮你做了 你自己做什么呢?大哥自己做吧。如果对内容没要求的话,30分钟就OK了
㈩ 静态、自适应、流式、响应式四种网页布局有什么区别
1、灵活性不同:
静态布局:毫无灵活性可言,目前已逐渐被淘汰。
自适应布局:静态布局的升级版,因其强大的灵活性,已逐渐成为高端网页的代名词。
流式布局:灵活性更高,可适用于其他三种网站布局。
响应式布局:自适应布局的升级版,响应式网站要普遍适应市面上各类屏幕,开发难度和工作量都是非常大的,开发价格自然比普通网站高。
2、设计方法不同:
静态布局:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分。
自适应布局:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
流式布局:使用百分比定义宽度,高度大都是用px来固定,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。
响应式布局:媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局,就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
(10)静态网页布局扩展阅读:
静态、自适应、流式、响应式四种网页布局的特点概括
1、静态布局:即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。
2、流式布局:页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
3、自适应布局:分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。
4、响应式布局:分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。