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

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:02 PM

佈局縮小頁面高手

新手一枚。模仿百度页面，之前用了相对定位和绝对定位写了一个，也缩小就乱了。这个用的是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]);
});

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML標籤和HTML屬性有什麼區別？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

See all articles