求高手，模仿百度页面，页面缩小之后为什么排版都变了，应该怎样布局才不会乱！_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/imghwm/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]);
});
Was ist das Root -Tag in einem HTML -Dokument?Apr 29, 2025 am 12:10 AMTheroottaginanhtmldocumentis.itServesasthetop-LevelelementthateCapsulatesAllotherContent, um ProperDocumentStructureandBrowserParsing zu gewährleisten.
Sind die HTML -Tags und Elemente dasselbe?Apr 28, 2025 pm 05:44 PMDer Artikel erklärt, dass HTML -Tags Syntaxmarker sind, die zum Definieren von Elementen verwendet werden, während Elemente vollständige Einheiten einschließlich Tags und Inhalt sind. Sie arbeiten zusammen, um Webseiten zu strukturieren.Character Count: 159
Welche Bedeutung hat der Kopf & gt; und & lt; Körper & gt; Tag in HTML?Apr 28, 2025 pm 05:43 PMDer Artikel erörtert die Rollen von & lt; Head & gt; und & lt; Körper & gt; Tags in HTML, ihre Auswirkungen auf die Benutzererfahrung und die SEO -Auswirkungen. Die ordnungsgemäße Strukturierung verbessert die Funktionen der Website und die Suchmaschinenoptimierung.
Was ist der Unterschied zwischen & lt; stark & gt;, & lt; b & gt; Tags und & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PMDer Artikel erörtert die Unterschiede zwischen HTML -Tags, und sich auf ihre semantischen und präsentierenden Verwendungen und ihre Auswirkungen auf SEO und Barrierefreiheit konzentrieren.
Bitte erklären Sie, wie Sie den Zeichensatz angeben, der von einem Dokument in HTML verwendet wird.Apr 28, 2025 pm 05:41 PMIn Artikel wird die Angabe der Charaktercodierung in HTML erläutert, die sich auf UTF-8 konzentriert. Hauptproblem: Sicherstellen, dass die korrekte Anzeige des Textes verstümmelt und die SEO und die Zugänglichkeit verbessert werden.
Was sind die verschiedenen Formatierungs -Tags in HTML?Apr 28, 2025 pm 05:39 PMIn dem Artikel werden verschiedene HTML -Formatierungs -Tags erörtert, die zur Strukturierung und Styling -Webinhalte verwendet werden, wodurch ihre Auswirkungen auf das Erscheinungsbild von Text und die Bedeutung semantischer Tags für Barrierefreiheit und SEO betont werden.
Was ist der Unterschied zwischen dem Attribut 'ID' und dem Attribut 'Klasse' von HTML -Elementen?Apr 28, 2025 pm 05:39 PMDer Artikel erörtert die Unterschiede zwischen den Attributen von HTMLs "ID" und "Klasse" und konzentriert sich auf ihre Einzigartigkeit, ihren Zweck, ihre CSS -Syntax und ihre Spezifität. Es erklärt, wie sich ihre Verwendung auf das Webseite und die Funktionalität des Webseite auswirkt, und bietet Best Practices für
Was ist das Attribut 'Klassen' in HTML?Apr 28, 2025 pm 05:37 PMDer Artikel erläutert die Rolle des HTML -Class -Attributs bei der Gruppierung von Elementen für Styling und JavaScript -Manipulation und kontrastiert sie mit dem eindeutigen 'ID' -attribut.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
