求高手，模仿百度页面，页面缩小之后为什么排版都变了，应该怎样布局才不会乱！_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]);
});
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk menyalin halaman dalam Word
Feb 20, 2024 am 10:09 AM
Ingin menyalin halaman dalam Microsoft Word dan mengekalkan pemformatan? Ini adalah idea yang bijak kerana menduplikasi halaman dalam Word boleh menjadi teknik penjimatan masa yang berguna apabila anda ingin membuat berbilang salinan susun atur atau format dokumen tertentu. Panduan ini akan membimbing anda melalui proses langkah demi langkah menyalin halaman dalam Word, sama ada membuat templat atau menyalin halaman tertentu dalam dokumen. Arahan mudah ini direka untuk membantu anda mencipta semula halaman anda dengan mudah tanpa perlu bermula dari awal. Mengapa menyalin halaman dalam Microsoft Word? Terdapat beberapa sebab mengapa menyalin halaman dalam Word sangat bermanfaat: Apabila anda mempunyai dokumen dengan susun atur atau format tertentu yang anda ingin salin. Tidak seperti mencipta semula keseluruhan halaman dari awal
HTML, CSS dan jQuery: Teknik untuk mencapai kesan khas zum masuk dan keluar imej
Oct 24, 2023 am 10:22 AM
HTML, CSS dan jQuery: Teknik untuk melaksanakan kesan zum masuk dan zum keluar imej, contoh kod khusus diperlukan Dengan pembangunan Internet, reka bentuk halaman web memberi perhatian yang lebih kepada pengalaman pengguna. Antaranya, gambar, sebagai salah satu elemen penting dalam reka bentuk web, selalunya boleh membawa pengguna pengalaman visual yang intuitif dan kaya. Kesan khas mengezum masuk dan keluar imej boleh meningkatkan persepsi dan interaksi pengguna dengan kandungan web, jadi ia digunakan secara meluas dalam reka bentuk web. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencapai kesan khas zum masuk dan keluar imej, dan menyediakan
Panduan untuk mengubah saiz bar carian dalam Windows 10
Jan 04, 2024 pm 05:22 PM
Pengguna merasakan bahawa kotak carian yang disertakan dengan win10 terlalu besar dalam bar tugas dan sangat menjengkelkan. Mereka bertanya bagaimana untuk mengurangkan saiz kotak carian dalam win10 Secara umumnya, hanya mengubahnya menjadi ikon untuk mengurangkan saiz bagaimana untuk mengurangkan saiz kotak carian dalam win10 secara terperinci. Cara mengurangkan saiz kotak carian dalam Windows 10: 1. Klik kanan bar tugas dan berbilang fungsi akan muncul. 2. Cari item fungsi carian di dalamnya. 3. Hidupkan fungsi carian, dan kami memilih untuk memaparkan ikon carian (W) untuk mengezum keluar. 4. Selepas menyediakannya, ia akan menjadi versi ikon yang dikurangkan, seperti yang ditunjukkan di bawah.
Bagaimana untuk menangani masalah yang halaman Laravel tidak dapat memaparkan CSS dengan betul
Mar 10, 2024 am 11:33 AM
"Bagaimana untuk menangani kegagalan halaman Laravel untuk memaparkan CSS dengan betul, contoh kod khusus diperlukan" Apabila menggunakan rangka kerja Laravel untuk membangunkan aplikasi web, kadangkala anda akan menghadapi masalah bahawa halaman tidak dapat memaparkan gaya CSS dengan betul, yang boleh menyebabkan halaman untuk menghasilkan gaya yang tidak normal. Artikel ini akan memperkenalkan beberapa kaedah untuk menangani kegagalan halaman Laravel untuk memaparkan CSS dengan betul, dan menyediakan contoh kod khusus untuk membantu pembangun menyelesaikan masalah biasa ini. 1. Semak laluan fail Mula-mula semak laluan fail CSS.
Bagaimana untuk melaksanakan lompatan halaman dalam 3 saat: Panduan Pengaturcaraan PHP
Mar 25, 2024 am 10:42 AM
Tajuk: Kaedah pelaksanaan lompat halaman dalam 3 saat: Panduan Pengaturcaraan PHP Dalam pembangunan web, lompat halaman adalah operasi biasa Secara umumnya, kami menggunakan tag meta dalam kaedah HTML atau JavaScript untuk melompat ke halaman. Walau bagaimanapun, dalam beberapa kes tertentu, kita perlu melakukan lompatan halaman pada bahagian pelayan. Artikel ini akan memperkenalkan cara menggunakan pengaturcaraan PHP untuk melaksanakan fungsi yang secara automatik melompat ke halaman tertentu dalam masa 3 saat, dan juga akan memberikan contoh kod tertentu. Prinsip asas lompat halaman menggunakan PHP adalah sejenis
Panduan untuk menyelesaikan salah jajaran halaman web WordPress
Mar 05, 2024 pm 01:12 PM
Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan
Cara Susun Semula, Lumpuhkan dan Padam Halaman Skrin Utama iPhone
Nov 29, 2023 am 08:22 AM
Dalam iOS, Apple membenarkan anda melumpuhkan halaman skrin utama individu pada iPhone anda. Anda juga boleh menyusun semula susunan halaman skrin utama dan memadamkan halaman secara langsung dan bukannya melumpuhkannya sahaja. Begini cara ia berfungsi. Cara Menyusun Semula Halaman Skrin Utama Sentuh dan tahan Ruang pada skrin Utama untuk memasuki mod jitter. Ketik baris titik yang mewakili halaman skrin Utama. Dalam grid Skrin Utama yang muncul, sentuh dan seret halaman untuk menyusunnya semula berbanding dengan halaman lain. Orang lain bergerak sebagai tindak balas kepada penyeretan anda. Apabila anda berpuas hati dengan susunan baharu anda, ketik "Selesai" di penjuru kanan sebelah atas skrin, kemudian ketik "Selesai" sekali lagi untuk keluar dari mod dither. Cara Melumpuhkan atau Mengalih Keluar Halaman Skrin Utama Sentuh dan tahan Ruang pada skrin Utama untuk memasuki mod dither. Ketik untuk mewakili skrin utama
Bagaimana untuk memuat semula halaman web dengan cepat?
Feb 18, 2024 pm 01:14 PM
Penyegaran halaman adalah perkara biasa dalam penggunaan rangkaian harian kami Apabila kami melawat halaman web, kadangkala kami menghadapi beberapa masalah, seperti halaman web tidak dimuatkan atau dipaparkan secara tidak normal, dsb. Pada masa ini, kami biasanya memilih untuk memuat semula halaman untuk menyelesaikan masalah, jadi bagaimana untuk memuat semula halaman dengan cepat? Mari kita bincangkan kekunci pintasan untuk muat semula halaman. Kekunci pintasan muat semula halaman ialah kaedah untuk memuat semula halaman web semasa dengan pantas melalui operasi papan kekunci. Dalam sistem pengendalian dan penyemak imbas yang berbeza, kekunci pintasan untuk muat semula halaman mungkin berbeza. Di bawah ini kami menggunakan W biasa
