2 weixin 35706605 weixin_35706605 于 2017.08.28 15:42 提问

CSS+div网页设计,放大缩小后网页控件乱序的问题

最近在学习用VS2010设计网站,网站设计好之后看着没有什么问题,但是在浏览器上放大或者缩小页面之后里面的div位置就乱了,有没有大神知道怎么固定他们的位置啊,我想实现的是放大页面,本来在一行的两个div也不会变成两行,而是出现上下和左右的滑动条,缩小页面,整个页面就缩小且靠右上,右边和下边留白。
大概就像这样:
图片说明

图片说明

请问会的人这怎么修改呀,十分感谢,

另外我的网页比较简单,只有div和ul,li的嵌套等等。附上代码吧。
图片说明

图片说明

中也只定义了background,color,margin,padding,width,heigth等基本属性,没有其他特别的。不过有的width是**px,有的是**%。不知道影响没。

还请大家不吝赐教,实在感谢!

4个回答

zy841958835
zy841958835   Ds   Rxr 2017.08.28 15:49
已采纳

**px是固定多少个像素 不会随着你的浏览器大小改动而改动 **%是当前div在上层div中的百分比会随着上层的大小而改动
位置要用相对位置 h2{position: absolute; top: 60%; margin-top: -0.6em; left: -10px; padding-left: 0.9em; font-size: 2.0em; line-height: 1em;color:#FF0000;}
http://www.w3school.com.cn/ 里面很多基础操作你会用得到

weixin_35706605
weixin_35706605 回复十里35706605: http://ask.csdn.net/questions/653122
11 个月之前 回复
weixin_35706605
weixin_35706605 好的,已解决,导航栏那里出了点小错误,不知道您会不会~
11 个月之前 回复
itheima_Wujie
itheima_Wujie   2017.08.28 16:03

应该是你设置的定位有问题。不要把具体的位置设置成具体的px,要以相对的大小来设置

weixin_35706605
weixin_35706605 好的,已经改好了,多谢~(*^__^*)
11 个月之前 回复
huang931027
huang931027   Rxr 2017.08.28 17:06

当然是有影响的,还是要最好设置成百分比,这样的响应式布局

weixin_35706605
weixin_35706605 恩恩,已经改好了,多谢~(*^__^*)
11 个月之前 回复
playboyanta123
playboyanta123   2017.08.28 16:23

知道媒体查询吗?也就是通常说的响应式,你说的大概就是要把你的网站做成响应式的,根据不同的大小有不同的显示风格,那你去看看
基于媒体查询的响应式吧,也不难,就是样式要多写几套而已,不同的页面宽度,写不一样的样式

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
网页设计(div css)之浏览器不兼容性问题及解决方法
下面将浏览器不兼容原因及解决方法整理一下,不足之处以后遇到再继续补充: **1. 文字大小不兼容** 同样14px的宋体字,ie下实际占高16px,下留白3px,firefox下实际占高17px,上留白1px,下留白3px。 文字大小不兼容解决方案: 给所有文字设定通用line-height值 **2.div高度不兼容:** firefox下div容器定义height后,
用DIV+CSS技术设计的个人网页(网页制作课作业)
关于网页制作课程的作业,使用DIV+CSS技术设计的个人主页,有需要的朋友可以下载,挺简洁的
DIV+CSS学生网页课程设计大作业网页制作作业成品模板下载
大学生网页设计至做作业成品,dreamweaver/frontpage网页大作业,大学生课程设计,中学生网页制作作业作品模板免费下载。http://wy.yilushang.net
css div 网页设计css div 网页设计css div 网页设计
css div 网页设计css div 网页设计css div 网页设计css div 网页设计
网页设计作业学生网页课程设计作业成品DIV+CSS
本作品使用DIV布局粉红色边框,但是一点也不娘哦!免费dreamweaver/frontpage网页制作作业成品模板下载。学生原创课程设计网页设计制作大作业成品免费下载。本网页作业为一个展示产品类型的网页设计作业作品成品。使用dreamweaver制作采用DIV+CSS进行布局,总页面数量9页。适合修改成为各种类型的产品展示网页,比如摄影、设计作品、电影、音乐等。
网页制作标尺工具(div+css)
用于制作网页,追求细节。使用div+css制作页面的新手可以下下来体验下, 培养页面制作精细的习惯
Div+CSS网页设计(HTML5)
1、将图片添加到div中间位置           #top{background: cadetblue;height: 170px;} 2、控制DIV里的文字的位置 .f2{   font-family: "微软雅黑" ;   color:#FFFFFF;   margin-top:-100px; //离顶部位置   margin-left: 1
html静态网页制作中div+css的浅运用
在基地实训的这些日子,对于javaweb网页制作也有了些理解,博主在此与大家分享一下这几天总结的经验。 当然博主算是相对的初学者(毕竟大学前三年混过来的),写代码也要用dreamweaver辅助,求不喷,对于我的理解指点就好。 使用html制作网页首先要对一个网页的布局有大体的了解。 一个网页就好比一个人,主要的无非就是头、身体。头就是个标题,给人以明示的作用,一眼望去就能认出你是谁,没有头
《基础网页制作》一个超简单的div布局,制作静态网页很简单
效果图附上 以下代码超简单的,就不解释啦 Div布局 主要应用于网站首页公告和标签 附加推荐菜单 首页 衣服 裤子 鞋子 头饰 第一页面显示板块 第二页面显示板块 底部网站信息布局
前端页面div设计的css模板
之前一直很烦CSS,现在做一个模板保存,以后要是用到,修改下就行【注意,根据需求自己修改;我没有做兼容性处理】【我CSS不太好,有错误的地方,我马上修改,欢迎指出】 ---------------------------------------------common.jsp------------------------------------------ http://java.sun