解决html网页缩放问题
来源:互联网 发布:淘宝上能信用卡套现吗 编辑:程序博客网 时间:2024/05/17 17:39
当我们学习过div布局的时候,你肯定会有这样的疑问:为什么别人的网页无论怎么缩放都不会影响它的想对位置,而我的页面在使用浏览器对页面进行放大缩小的时候,有时候会出现错位,或者边框无法吻合。将页面缩小到最小时,页面内容将会堆砌在一起呢?
首先出现这个问题的主要原因还是因为你对浮动、定位的理解不够透彻!下面我整理了几种解决的方案
方案(一):将width采用百分比设置 虽然“溢出“问题解决了,但当放到一定程度,使字的显示大小超过块的宽度时,字的排版就会乱掉。这个时候可以在 字条外加上<font></font>标签,并且将其转换成块元素,设置宽高度,注意框的大小只要把字体框住就可以了。下面我以登陆CSDN页面讲解吧
<body style="background-color:#99CCFF;">
<!--便于理解,在顶部设置一个宽度为100%的div,可以缩放一下看下效果!-->
<div style="width:100%; height:50px; background-color:#0099FF; line-height:48px; text-align:center;">我的CSDN登陆页面</div>
<!--然后设置一个固定宽高度的div,这样缩放时候宽高比是不变的,如果让宽度设置为33%,宽度的效果是一样的,但是在缩放的时候,里面的文本框由于是固定的宽度所以会溢出!-->
<div style=" width:356px; height:420px; margin-top:60px;margin-right:auto; margin-left:auto; background-color:#FFFFFF;border:1px solid white;">
<!--这里出现一个问题,当把边框去掉之后这个div会往上移动,但是尺寸不变,为了解决这个问题,可以保留边框,让边框显示白色就可以了!-->
<font style="display:block;margin-top:30px;margin-left:30px;color:#999999;">帐号登录</font>
<!--在文本框中出现灰色提示语的用:placeholder。当页面上的东西堆积多了,就会出现滚动条,这个时候根据自己需要设置登陆的那个div高度就可以让他不在出现滚动条。由于<input/>标签是行元素,所以也需要转换成块元素设置宽高度然后做定位!-->
<input name="uname" id="uname" placeholder="请输入账号" style=" display:block;width:283px; height:40px; border:#999999 solid 2px; margin-left:36px; margin-top:30px;"/>
<!--样式是一样的,到时候可以抽成类标签,使代码简洁美观-->
<input type="password" name="psd" id="psd" placeholder="请输入密码" style=" display:block;width:283px; height:40px; border:#999999 solid 2px; margin-left:36px; margin-top:30px;"/>
<!---->
<input type="checkbox" style="margin-left:30px; margin-top:10px;"/><font color="#999999"><b>下次自动登陆</b></font>
<!--注意在这里,如果使用 调整字体的位置,在缩放时候就会乱哦!所以我们还是将其转换成块元素,缩放没有问题,记住能不用div的地方尽量不要用!-->
<font color="#999999" style=" display:block; float:right;margin-right:40px;margin-top:10px;"><a href="https://passport.csdn.net/account/fpwd?action=forgotpassword&service=http%3A%2F%2Fmy.csdn.net%2Fmy%2Fmycsdn" style=" text-decoration:none; color:#999999;">忘记密码</a></font>
<!--设置div的宽度,设置水平方向位置自动,即想对上一div居中-->
<div style="display:block;width:284px; height:40px; margin:0 auto; margin-top:20px;text-align:center; border:#FF0000 1px solid; line-height:40px; background-color:#FF6600;"><font color="#FFFFFF" size="+1"><b>登 陆</b></font></div>
<!--横线是一个div-->
<div style="border:#EEEEEE solid 1px; margin-top:40px;"></div>
<!--把下面再作为一个div-->
<div style="margin-top:40px;"> 还没有CSDN账号?<a href="https://passport.csdn.net/account/mobileregister?action=mobileRegisterView&service=http%3A%2F%2Fmy.csdn.net%2Fmy%2Fmycsdn" style=" display:block; float:right;margin-right:30px;text-decoration:none; color:#0EA3F3;">立即注册</a></div>
</div>
<!--现在无论怎么缩放都不会乱了吧?-->
<!--另外掌握position:absolute与position:relative这两个的区别对布局还是大有帮助的,position:absolute这个是绝对定位;是相对于浏览器的定位。比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。比如:<div class="1"></div><div class="2"></div>当1固定了位置。1的样式float:left;width:100px; height:800px;2的样式为float:left; position:relative;margin-left:20px;width:50px;2的位置在1的右边,距离120px-->
- 解决html网页缩放问题
- iPhone/android的viewport 解决网页自动缩放的问题
- iPhone/android的viewport 解决网页自动缩放的问题
- 解决火狐浏览器无法用触控屏缩放网页的问题
- 禁止浏览器缩放网页的HTML代码
- 解决editplus新建html网页中汉字的乱码问题
- php 、html网页解决乱码问题(设置utf-8)
- html网页编码问题
- html网页乱码问题
- 浏览器缩放造成的网页错位问题
- 解决网页居中问题
- 解决网页乱码问题
- 解决网页打不开问题
- 网页缩放
- 网页缩放
- 网页缩放
- UIImage缩放,解决模糊失真问题
- HTML解决缓存问题
- VC++数据类型转换大全
- Fragment和ViewPager多层嵌套,容易出现内层fragment某些页面数据丢失
- HTML第五章上机练习1
- 矩形覆盖[剑指offer]之python实现
- 【codevs 1009】产生数
- 解决html网页缩放问题
- 无线电波在介质中的传播速度计算公式和印刷电路板(PCB)的特性阻抗与特性阻抗控制
- Sublimte 基本使用方法
- 花刺代理设置 无法验证 解决
- 二叉树计数2(卡特兰数+高精乘低精+高精除低精)
- Android报错:数据库相关 android.database.sqlite.SQLiteException: no such column
- Contentprovider,CursorAdapter更新数据后自动刷新ListView
- java程序员需要注意的Dorker5大误区
- 线性表