求高手，模仿百度页面，页面缩小之后为什么排版都变了，应该怎样布局才不会乱！_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/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]);
});

本網站聲明

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

Related knowledge

如何在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實現圖片的放大縮小特效，並提

如何快速刷新網頁？ Feb 18, 2024 pm 01:14 PM

頁面刷新在我們日常的網路使用中非常常見，當我們訪問一個網頁後，有時會遇到一些問題，例如網頁加載不出來或顯示不正常等。這時候我們通常會選擇刷新頁面來解決問題，那麼要如何快速刷新頁面呢？下面我們就來探討頁面刷新的快捷鍵。頁面刷新快捷鍵是一種透過鍵盤操作來快速刷新目前網頁的方法。在不同的作業系統和瀏覽器中，頁面刷新的快捷鍵可能有所不同。下面我們以常見的W

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檔案的路徑是

WordPress網頁錯位現象解決攻略 Mar 05, 2024 pm 01:12 PM

WordPress網頁錯位現象解決攻略在WordPress網站開發中，有時候我們會遇到網頁元素錯位的情況，這可能是由於不同裝置上的螢幕尺寸、瀏覽器相容性或CSS樣式設定不當所致。要解決這種錯位現象，我們需要仔細分析問題、找出可能的原因，並逐步進行除錯和修復。本文將分享一些常見的WordPress網頁錯位問題以及對應的解決攻略，同時提供具體的程式碼範例，幫助開

3秒跳轉頁面實作方法：PHP程式指南 Mar 25, 2024 am 10:42 AM

標題：3秒跳轉頁面實作方法：PHP程式設計指南在網頁開發中，頁面跳轉是常見的操作，一般情況下我們使用HTML中的meta標籤或JavaScript的方法進行頁面跳轉。不過，在某些特定的情況下，我們需要在伺服器端進行頁面跳轉。本文將介紹如何使用PHP程式實作一個在3秒內自動跳到指定頁面的功能，同時會給出具體的程式碼範例。 PHP實現頁面跳躍的基本原理PHP是一種在

重新排列、停用和刪除 iPhone 主畫面頁面的方法 Nov 29, 2023 am 08:22 AM

在iOS中，Apple允許您停用iPhone上的單一主畫面頁面。還可以重新排列主螢幕頁面的順序，並直接刪除頁面，而不僅僅是停用它們。這是它的工作原理。如何重新排列主畫面頁面觸碰並按住主畫面上的空格以進入抖動模式。輕點代表主螢幕頁面的圓點行。在顯示的主螢幕網格中，輕觸並拖曳頁面以將其相對於其他頁面重新排列。其他人會移動以響應您的拖曳動作。當您對新排列感到滿意時，點擊螢幕右上角的“完成”，然後再次點擊“完成”以退出抖動模式。如何停用或刪除主畫面頁面觸碰並按住主畫面上的空格可進入抖動模式。輕點代表主螢幕

See all articles

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

回复讨论(解决方案)

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題