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

Windows 11: 导入和导出开始布局的简便方法Aug 22, 2023 am 10:13 AM

在Windows11中，“开始”菜单经过重新设计，并具有一组简化的应用，这些应用排列在页面网格中，这与它的前身不同，后者在“开始”菜单上有文件夹、应用和组。您可以自定义“开始”菜单布局，并将其导入并导出到其他Windows设备，以根据您的喜好对其进行个性化设置。在本指南中，我们将讨论在Windows11上导入开始布局以自定义默认布局的分步说明。什么是Windows11中的Import-StartLayout？导入开始布局是Windows10和更早版本中使用的cmdlet，用于将“开始”菜单的自定

如何在 Windows 11 中保存桌面图标位置布局Aug 23, 2023 pm 09:53 PM

Windows11在用户体验方面带来了很多东西，但迭代并不完全防错。用户不时会遇到问题，图标定位的更改很常见。那么如何在Windows11中保存桌面布局呢？该任务有内置和第三方解决方案，无论是保存当前窗口的屏幕分辨率还是桌面图标的排列。对于桌面上有一堆图标的用户来说，这一点变得更加重要。继续阅读以了解如何在Windows11中保存桌面图标位置。为什么Windows11不保存图标布局位置？以下是Windows11不保存桌面图标布局的主要原因：对显示设置的更改：通常，当您修改显示设置时，配置的自定义

如何使用HTML和CSS创建一个响应式图片画廊展示布局Oct 18, 2023 am 09:40 AM

如何使用HTML和CSS创建一个响应式图片画廊展示布局在当今互联网时代，图片画廊展示是网页设计中常见的布局，可以展示各类图片和图像作品。为了让用户能够在不同设备上获得良好的浏览体验，响应式设计变得越来越重要。本文将介绍如何使用HTML和CSS创建一个响应式图片画廊展示布局，并提供具体的代码示例。步骤1：创建基本的HTML结构首先，我们需要创建一个基本的HTM

float布局会引起哪些问题Oct 10, 2023 pm 03:31 PM

float布局会引起有清除浮动问题、元素重叠问题、文字环绕问题和响应式布局问题等。详细介绍：1、清除浮动问题，当使用float布局时，浮动元素会脱离文档流，这可能导致父容器无法正确地包裹浮动元素，这种情况下，父容器的高度会塌陷，导致布局混乱；2、元素重叠问题，当多个元素使用float布局时，它们可能会发生重叠的情况，这是因为浮动元素不再占据正常的文档流位置等等。

CSS Positions布局实现交互效果的创意方法Sep 28, 2023 pm 11:15 PM

CSSPositions布局实现交互效果的创意方法随着Web技术的不断发展，用户对于网页的交互性要求也越来越高。除了简单的点击和滚动之外，设计师们也开始通过CSSPositions布局来实现更加丰富的交互效果。本文将介绍一些创意的方法，并给出具体的代码示例。StickySidebar（吸顶侧边栏）吸顶侧边栏是指在页面滚动时，侧边栏能够“吸附”在页面顶部

科大讯飞人工智能大模型升级，另有6家上市公司也已布局大模型Jun 10, 2023 am 08:11 AM

近日，科大讯飞公告其构建的“讯飞星火认知大模型”将举行升级发布会，推出该人工智能大模型的V1.5（1.5版本）。此前，朗玛信息也因推出“朗玛•39AI全科医生”大模型产品举行发布会。此外，还有5家上市公司也在与投资者沟通交流中，披露已布局AI（人工智能）大模型的信息。来源：摄图网科大讯飞的“讯飞星火认知大模型”升级至1.5版近日，科大讯飞股份有限公司（证券简称：科大讯飞；证券代码：002230.SZ）披露了《关于讯飞星火认知大模型升级发布会的提示性公告》。公告显示，2023年5月6日，科大讯飞举

古吉拉特语印度语输入 3 在 Windows 11 中不起作用 [修复]Jul 12, 2023 pm 06:45 PM

古吉拉特语印度语输入3是一种键盘布局，允许您输入古吉拉特语，我们的一些读者抱怨它在Windows11中不起作用。当然，在操作系统上，您可以创建自定义键盘，但使用特定于语言的布局通常会使用户体验更加愉快。因此，让我们帮助您解决PC上的此问题。为什么古吉拉特语印度语输入3不起作用？古吉拉特语印度语输入3属于MicrosoftIME（输入法编辑器），可与英语QWERTY键盘配合使用。根据用户体验，我们收集到以下主要原因：未安装键盘布局。您的键盘布局未启用。键盘布局已损坏。计算机的驱动程序有问题。您可以

HTML教程：如何使用Flexbox进行平均分配布局Oct 16, 2023 am 09:31 AM

HTML教程：如何使用Flexbox进行平均分配布局引言：在网页设计中，经常需要对元素进行布局。传统的布局方法存在一些局限性，而Flexbox（弹性盒子布局）是一种能够提供更灵活、更强大的布局方式。本文将介绍如何使用Flexbox来实现平均分配布局，同时给出具体的代码示例。一、Flexbox简介Flexbox是CSS3中引入的一种弹性盒子布局模型，它可以让元

See all articles