求高手，模仿百度页面，页面缩小之后为什么排版都变了，应该怎样布局才不会乱！_html/css_WEB-ITnose
新手一枚。模仿百度页面，之前用了 相对定位和绝对定位写了一个，也缩小就乱了。这个用的是div之间margin距离排版，缩小了还是不行。怎样设计才能比较好排版，缩小之后能达到百度首页那样的缩放效果。。（不要让我审查元素看百度的源代码，实在看不出什么）！！求解...
<!DOCTYPE html><html><head> <title>百度一下，你就知道！</title> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css"></head><body> <div id="head"> <a href="#">注册</a> <a id="login" href="#">登陆</a> <a href="#">搜索设置|</a> </div> <div id="mid"> <div id="image"> <img src="/static/imghw/default1.png" data-src="image/logo.gif" class="lazy" id="logo" alt="求高手，模仿百度页面，页面缩小之后为什么排版都变了，应该怎样布局才不会乱！_html/css_WEB-ITnose" > </div> <div id="firstRow"> <a href="#">新 闻</a> <a id="web" href="#">网 页</a> <a href="#">贴 吧</a> <a href="#">知 道</a> <a href="#">音 乐</a> <a href="#">图 片</a> <a href="#">视 频</a> <a href="#">地 图</a> </div> <div id="secondRow"> <form> <input id="txt" type="text" name="txtValue"/> <input id="btn" type="button" value="百度一下"/> </form> </div> <div id="thirdRow"> <a href="#">百科</a> <a href="#">文库</a> <a href="#">hao123|</a> <a href="#">更多>>></a> </div> </div> <div id="foot"> <div id="fourthRow"> <a href="#">把百度设为首页</a> </div> <div id="fifthRow"> <a href="#">加入百度推广</a>| <a href="#">搜索风云榜</a>| <a href="#">关于百度</a>| <a href="#">About Baidu</a> </div> <div id="sixthRow"> @2014 Baidu<a href="#">使用前必读</a>京ICP认证030173号 </div> </div></body></html>
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]);
});
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何在Word中复制页面
Feb 20, 2024 am 10:09 AM
是否要复制MicrosoftWord中的页面，并保持格式不变？这是一个聪明的想法，因为当您想要创建特定文档布局或格式的多个副本时，在Word中复制页面可能是一种有用的节省时间的技术。本指南将逐步引导您在Word中复制页面的过程，无论是创建模板还是复制文档中的特定页面。这些简单的说明旨在帮助您轻松地重新制作页面，省去从头开始的麻烦。为什么要在MicrosoftWord中复制页面？在Word中复制页面非常有益的原因有以下几点：当您有一个具有特定布局或格式的文档要复制时。与从头开始重新创建整个页面不同
HTML、CSS和jQuery：实现图片放大缩小特效的技巧
Oct 24, 2023 am 10:22 AM
HTML、CSS和jQuery：实现图片放大缩小特效的技巧，需要具体代码示例随着互联网的发展，网页的设计越来越注重用户体验。其中，图片作为网页设计的重要元素之一，往往能够给用户带来直观、丰富的视觉体验。图片的放大缩小特效能够增强用户对网页内容的感知和交互，因此在网页设计中被广泛使用。本文将介绍如何利用HTML、CSS和jQuery实现图片的放大缩小特效，并提
win10搜索栏大小调整指南
Jan 04, 2024 pm 05:22 PM
win10自带的搜索框，用户觉得在任务栏中有些太大了，很是碍事，问win10搜索框怎么缩小，一般只要将它变成图标状就是缩小，下面一起看看详细的win10搜索框缩小教程吧。win10搜索框怎么缩小：1、右击任务栏，弹出多项功能。2、在其中找到搜索功能项。3、打开搜索功能，我们选择显示搜索图标（W）即可缩小。4、设置完之后就会变成缩小版的图标了，就是下图这样了。
处理Laravel页面无法正确显示CSS的方法
Mar 10, 2024 am 11:33 AM
《处理Laravel页面无法正确显示CSS的方法，需要具体代码示例》在使用Laravel框架开发Web应用时，有时候会遇到页面无法正确显示CSS样式的问题，这可能会导致页面呈现不正常的样式，影响用户体验。本文将介绍一些处理Laravel页面无法正确显示CSS的方法，并提供具体的代码示例，帮助开发者解决这一常见问题。一、检查文件路径首先要检查CSS文件的路径是
3秒跳转页面实现方法：PHP编程指南
Mar 25, 2024 am 10:42 AM
标题：3秒跳转页面实现方法：PHP编程指南在网页开发中，页面跳转是常见的操作，一般情况下我们使用HTML中的meta标签或者JavaScript的方法进行页面跳转。不过，在某些特定的情况下，我们需要在服务器端进行页面跳转。本文将介绍如何使用PHP编程实现一个在3秒内自动跳转到指定页面的功能，同时会给出具体的代码示例。PHP实现页面跳转的基本原理PHP是一种在
WordPress网页错位现象解决攻略
Mar 05, 2024 pm 01:12 PM
WordPress网页错位现象解决攻略在WordPress网站开发中，有时候我们会遇到网页元素错位的情况，这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象，我们需要仔细分析问题、查找可能的原因，并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略，同时提供具体的代码示例，帮助开
重新排列、禁用和删除 iPhone 主屏幕页面的方法
Nov 29, 2023 am 08:22 AM
在iOS中，Apple允许您禁用iPhone上的单个主屏幕页面。还可以重新排列主屏幕页面的顺序，并直接删除页面，而不仅仅是禁用它们。这是它的工作原理。如何重新排列主屏幕页面触摸并按住主屏幕上的空格可进入抖动模式。轻点代表主屏幕页面的圆点行。在显示的主屏幕网格中，轻触并拖动页面以将其相对于其他页面重新排列。其他人会移动以响应您的拖拽动作。当您对新排列感到满意时，点击屏幕右上角的“完成”，然后再次点击“完成”以退出抖动模式。如何禁用或删除主屏幕页面触摸并按住主屏幕上的空格可进入抖动模式。轻点代表主屏
如何快速刷新网页？
Feb 18, 2024 pm 01:14 PM
页面刷新在我们日常的网络使用中非常常见，当我们访问一个网页后，有时候会遇到一些问题，比如网页加载不出来或者显示不正常等。这时候我们通常会选择刷新页面来解决问题，那么如何快速地刷新页面呢？下面我们就来探讨一下页面刷新的快捷键。页面刷新快捷键是一种通过键盘操作来快速刷新当前网页的方法。在不同的操作系统和浏览器中，页面刷新的快捷键可能有所不同。下面我们以常见的W
