専門家に百度のページを真似してもらいたいのですが、ページを縮小するとレイアウトが変わるのはなぜですか? _html/css

専門家に百度のページを真似してもらいたいのですが、ページを縮小するとレイアウトが変わるのはなぜですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:02:31

オリジナル

3640 人が閲覧しました

初心者です。以前百度のページを真似して相対配置と絶対配置を使って書いたのですが、これも縮小すると汚くなってしまいました。これは、植字に div 間のマージン距離を使用しますが、縮小してもまだ機能しません。レイアウトをより適切に設計して、ズームアウトした後に Baidu ホームページのようなズーム効果を実現できるようにする方法。。 (要素をレビューしたり、Baidu のソースコードを調べたりするのはやめてください。実際には何も見えません)。！解決...

<!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">        </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;}

ログイン後にコピー