当前位置:Gxlcms > html代码 > 求高手,模仿百度页面,页面缩小之后为什么排版都变了,应该怎样布局才不会乱!_html/css_WEB-ITnose

求高手,模仿百度页面,页面缩小之后为什么排版都变了,应该怎样布局才不会乱!_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:6人阅读

新手一枚。模仿百度页面,之前用了 相对定位和绝对定位写了一个,也缩小就乱了。这个用的是div之间margin距离排版,缩小了还是不行。怎样设计才能比较好排版,缩小之后能达到百度首页那样的缩放效果。。(不要让我审查元素看百度的源代码,实在看不出什么)!!求解...
    百度一下,你就知道!                
新 闻 网 页 贴 吧 知 道 音 乐 图 片 视 频 地 图
百科 文库 hao123| 更多>>>

body{    margin: 0px;    padding: 0px;}/*以下是第一个div块,以及其中字体样式*/#head{     height: 20px;}#head a{    float:right;    padding: 7px;    font-size: 12px;}/*以下是第二div块样式*/#mid{    text-align: center;}/*目的是设置图片距离下面导航栏的距离*/#image{    margin: 8px;}/*“网页”样式*/#web{    text-decoration: none;    font-weight:bold;    color:black;}/*输入框上面导航栏的style*/#firstRow{    padding: 10px;    margin-left:-90px;}/*导航栏链接文字之间的距离*/#firstRow a{    padding: 5px;}/*输入框栏的style*/#secondRow{}#txt{    width: 490px;    height:22px;}#btn{    height:28px;    font-size: 14px;    border-radius: 2px;}#thirdRow{    margin: 30px;}#fifthRow{    margin-top: 16px;}#foot{    text-align:center;    margin-top:520px;}#fourthRow,#fifthRow{    font-size: 12px;}#sixthRow{    font-size: 12px;    color:dimgray;    margin-top:6px;}#sixthRow a{    color:dimgray;}


回复讨论(解决方案)

高手在哪里。。。。

去找找响应式网页设计

http://www.baidu.com/link?url=2Z-Ju6mQh7cZIvvEJo7dCz5LyjeF44H1h1Uby0RF51gIx0mLc1uxTn60iOlfdIZqXzlcp_j3IoxCoezq4a97DK

楼上的说的太高深和专业了,有没有其他方法,直接在排版的时候能达到百度那样的效果

应该不是响应式解决方法。样式用的绝对宽带,放大时肯定会撑破页面布局。

在chrome下亲测,你的代码还是可以接受的。如果要禁用页面端的缩放,试试捕捉onresize事件。

var size = [window.width,window.height];
$(window).resize(function(){
window.resizeTo(size[0],size[1]);
});

人气教程排行