ホームページ >ウェブフロントエンド >htmlチュートリアル >専門家に百度のページを真似してもらいたいのですが、ページを縮小するとレイアウトが変わるのはなぜですか? _html/css_WEB-ITnose
専門家に百度のページを真似してもらいたいのですが、ページを縮小するとレイアウトが変わるのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:02:313639ブラウズ
初心者です。以前百度のページを真似して相対配置と絶対配置を使って書いたのですが、これも縮小すると汚くなってしまいました。これは、植字に 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;}
ディスカッション（解決策）への返信
マスターはどこですか？ 。 。 。
レスポンシブ Web デザインを見つけてください
http://www.baidu.com/link?url=2Z-Ju6mQh7cZIvvEJo7dCz5LyjeF44H1h1Uby0RF51gIx0mLc1uxTn60iOlfdIZqXzlcp_j3IoxCoezq4a97DK
上記の人はあまりにも奥深くて専門的です。それを直接行う他の方法はありますか？場合によっては、Baidu と同じ効果を達成できることもあります
レスポンシブなソリューションであるべきではありません。スタイルは非常に幅広く、拡大すると間違いなくページ レイアウトが崩れます。Chrome で自分でテストしましたが、コードはまだ受け入れられます。ページ側のズームを無効にしたい場合は、onresize イベントをキャッチしてみてください。
var size = [window.width,window.height];
$(window).resize(function(){
window.resizeTo(size[0],size[1]);
});
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。