[CSS] フラット化は張り子の虎です。フロントエンド フレームワークを放棄して IE6_html/css_WEB-ITnose でフラット化する方法を参照してください。

Bootstrap は確かに優れたフロントエンド フレームワークですが、これは任意であり、IE8 以降のブラウザのみをサポートします

海外には他にも優れたフレームワークがいくつかありますが、それらは WIN7 のデフォルト ブラウザである IE8 にもサポートされていません。では、何が残っているのでしょうか? 優れたフレームワークである Bootstrap も、V4 バージョンでは大げさになりすぎています

IE6 をどこに配置すればよいでしょうか?

Flat は常にフロントエンド フレームワークで実装する必要があるかのように、人々に高尚な印象を与えます。自分で書くことから始める方法はありません

実際にはまったくそんなことはなく、

はすべて CSS です。スタイル、達成不可能なことは何ですか?

さて、ただ話すだけでは意味がありません。実際的なことを一緒に考えてみましょう。

1. ボタン

ボタンは Web ページでは非常に一般的ですが、次の効果を実現するにはどうすればよいでしょうか?

まず第一に、フラット性の核心は何なのかを理解する必要があります。今と同じように、大きな目、長い髪、とがった顔、小さな口、そしてカラーレンズ、薄さは美しさを意味します

フラットもとてもシンプルです、細いグレーの境界線、無地の背景、広い内側のマージンは平らであることを意味し、それは背が高いことを意味します

つまり、HTML コードは元々次のようなものでした:

<button>我是一个按钮</button>

を実現するためにこのスタイルを追加しました:

<button style="height:3em;background:#00aa00;border:1px solid #dddddd;color:#ffffff;">我是一个被美容的按钮</button><button style="height:40px;background:#d04444;border:1px solid #dddddd;color:#ffffff;">我是一个被美容的按钮</button><button style="height:40px;background:#4090c0;border:1px solid #dddddd;color:#ffffff;">我是一个被美容的按钮</button><button style="height:40px;background:#50c0e0;border:1px solid #dddddd;color:#ffffff;">我是一个被美容的按钮</button><button style="height:40px;background:#d0d040;border:1px solid #dddddd;color:#ffffff;">我是一个被美容的按钮</button><button style="height:40px;background:#ffa020;border:1px solid #dddddd;color:#ffffff;">我是一个被美容的按钮</button><button style="height:40px;background:#ffffff;border:1px solid #dddddd;color:#000000;">我是一个被美容的按钮</button>

は最初のメソッドの高さ: 3em は相対単位です。ブラウザのサイズに応じて変更します

ボタンの背景色については、RGB は AA、その他は DD にします。残りをブレンドするには 44 を使用します。

境界線に関しては、これを使用する必要があります。これは平坦化の核心で、完全に白に近い小さな灰色の境界線 #dddddd です

ほら、この原則に基づいて、内側の単語を呼び出すことができます。 a ボタンがたくさんあります

「【Bootstrap】PC、タブレット、携帯電話で同時に使える美しいランディングページ」の記事のように、IE6と互換性のないBootstrapをロードする必要がありますか?時間」（クリックするとリンクが開きます）?もちろん、ここのコードが長いと言うのは怠け者の勝手ですが、実際には P なのでしょうか?後でコピーして貼り付けることができるように、メッセージを書いて保存しませんか?

ここでの理論は タグにも当てはまります。 style 属性を追加して自分で調整してください

2. 入力ボックス

これも非常に一般的であり、使用できません。もっと一般的になり、コードを書く 彼らは皆、イライラしながら次のように書きました。

より平坦で縦長にするには、まず入力ボックスを拡大し、次にその内側の余白を増やし、次にテキストを少し灰色にし、少し大きくし、あまり暗くしないようにする必要があります。そのため、次のコードがあります:

<input type="text" value="我是一个输入框"/>

はもう解析されません。これは、関連する CSS 属性も非常に一般的な属性なので、詳細については説明しません

相対単位の概念もここで使用されます。

同じ理由で、</p> <p></p> <p> </p> <p>3. ここでのドロップダウン メニューは選択を指します。 </p> <p></p> <p> </p>元のコード スニペット: <p> <br></p> <pre name="code" class="sycode"><input type="text" value="我是一个被美化了的输入框" style="height:1em;border:1px solid #dddddd;font-size: 14px; width:40%; color: #555555; padding:0.8em;"/></pre> <p><strong> </strong> 美化の原理は、選択するスタイルを追加することとまったく同じですが、高さとパディングの値が異なります。ここは上の入力ボックスとは異なります </p> <p> 相対単位 em を使用せず、絶対単位 px を使用して推定します </p> <p><br> </p> <p></p>4. div レイヤーとその中のテキスト <p></p> <p> テーブルレイアウト後基本的には放棄されており、div レイヤーも今日の Web ページで使用される大きな要素の 1 つです </p> <p>次のように書くと: </p> <p> </p> <pre name="code" class="sycode"><select><option>我是一个下拉列表</option><option>2</option><option>3</option></select></pre> は下の画像の上にのみスタイルを書くことができます、<p><br> </p>それをスタイルに美化するには以下、<p> <strong></strong> </p> <p>最初にこの div に灰色の細い境界線を追加し、特定の内側の余白を追加する必要もあります。</p> <p>次に、重要なのはフォントを Microsoft YaHei に変更し、英語キーを Arial に調整して拡大することです。フォントが少し少ないので、WIN8には十分です。 </p> <p>別の角丸属性 border-radius:10px; を追加します。この属性が IE6 または IE8 でサポートされていなくても問題ありません </p> <p> 角丸と角丸には大きな違いはありません。 </p> <p>コードは次のようになります: </p> <p><br> </p> <pre name="code" class="sycode"><div><h1>标题</h1><p>内容内容内容内容内容内容内容内容内容内容内容内容内容</p><h1>Title</h1><p>Content Content Content Content Content Content Content Content </p></div></pre> <p> </p>記事「[CSS] div の配置と Web ページのレイアウトについて」で提供した方法 (クリックするとリンクが開きます) と併用して、これらの div を配置します。バージョンでは、あなたがフロントエンド マスターです。 <p> </p> IE6 をサポートしていないフロントエンド フレームワーク Bootstrap と Jqmobile にはひどいことになります。フロントエンドフレームワークとは何ですか?私たち自身が最高のフロントエンドフレームワークです。重要なのは、フレームワークに従うだけではなく、書き方を知ることです。 <p> </p> 上記のスタイルについては、IEtest で IE6 を開いてテストしてください。全く問題ありません。 <p> </p> <p> </p> <p></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="CSS ブラウザの互換性問題のコレクション_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/275338.html">CSS ブラウザの互換性問題のコレクション_html/css_WEB-ITnose</a></span><span>次の記事：<a class="dBlack" title="CSS ブラウザの互換性問題のコレクション_html/css_WEB-ITnose" href="http://m.php.cn/ja/faq/275341.html">CSS ブラウザの互換性問題のコレクション_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>