Heim > Web-Frontend > HTML-Tutorial > 求高手,模仿百度页面,页面缩小之后为什么排版都变了,应该怎样布局才不会乱!_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 12:02:31
Original
3641 Leute haben es durchsucht

新手一枚。模仿百度页面,之前用了 相对定位和绝对定位写了一个,也缩小就乱了。这个用的是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  id="logo" src="image/logo.gif" 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>
Nach dem Login kopieren

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;}
Nach dem Login kopieren


回复讨论(解决方案)

高手在哪里。。。。

去找找响应式网页设计

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]);
});

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage