第 13 章、Float ベースのレイアウトの構築
float (float) 属性の使用
注: float:none 値はすべての float をキャンセルし、通常は要素に適用された float をキャンセルするためにのみ使用されます。
覚えておいてください: 固定幅としてデザインされている場合でも、テキストの div の幅をデザインする必要はありません
レイアウトにはフローティングを使用してください
LayoutGala Web サイト (http://blog.html.it/) layoutgala/) は 40 種類の CSS デザインを提供しますが、そのほとんどは
タグとその位置設定のための CSS コードのみを含む基本的なフレームワークです
レイアウト ジェネレーター、Cridinator (http://gridinator.com)複雑な複数列グリッド システムを作成するためのシンプルなツールを提供します
フローティング要素内のフローティング要素は、列内に列を追加します。
フローティングの問題を解決する
フロートをクリアしてフロートを保持する
footer{ clear:both;} 要素の両側のフロートをクリアする
属性値をクリアする: 左、右、両方
タグ要素を使用すると、浮動要素が div 内の他のコンテンツよりも高い場合、周囲の要素の下部からはみ出す可能性があります。
解決策:
1. 周囲の
2. Floating Peripheral elements
3. Peripheral elements で overflow:hidden を使用する
4. Micro Clear Fix を使用する
複数列レイアウト
CSS3 では、マルチカラム レイアウト (複数列レイアウト) モジュールが導入されました。 IE9 以前のバージョンはサポートされていません。multicolumns 属性は、W3C 公式 Web サイト: www.w3.org/TR/css3-multicol/、および複数の列を作成およびプレビューするためのオンライン ツール: www.aaronlumsden.com/ にあります。 multicol/
第 14 章、レスポンシブ Web デザイン
レスポンシブ Web デザインの基本
レスポンシブ Web デザインは RWD と呼ばれます。
Ethan Marcotte は、著書「Responsive Web Design」で RWD の手順を詳しく説明しています。原稿: http://www.alistapart.com/articles/owned-web-design
RWD は、次の 3 つの主要な概念を組み合わせています: レイアウト用の柔軟な Web 、画像やビデオ用の柔軟なメディア、さまざまな画面幅に合わせてさまざまなスタイルを作成するための CSS メディア クエリ
Web ページの
に次のコードを追加します (最適な場所は
タグの上です)。モバイル ブラウザによる Web ページの自動スケーリングは無視できます。 <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width"></pre> </p> <p class="sycode"> CSS の @viewport も同じ機能を実現できます。このコードはすべてのスタイル シートの前に配置する必要がありますが、現在は多くのブラウザが存在します。サポートしていない場合は、サプライヤープレフィックスを追加する必要があります</p> <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'>@viewport{ width:device-width; }</pre> </p> <h2 id="メディアクエリ">メディアクエリ</h2> <p class="sycode"> </p>
<p class="sycode"> ターゲットブラウザの幅と高さに応じてWebページにスタイルを割り当てることができます</p> <h3 id="メディアを使用する戦略クエリ">メディアを使用する戦略クエリ</h3> <p class="sycode"> 1. 列の調整</p> <p class="sycode"> 2. 幅の柔軟性</p> <p class="sycode"> 3. 空白のインデント</p> <p class="sycode"> 4. フォントサイズの調整</p> <p class="sycode"> 5. ナビゲーションメニューの変更</p> <p class="sycode"> 6. ハンドヘルドデバイス上のコンテンツの非表示</p> <p class="sycode"> 7. 背景画像の使用</p> <h3 id="ブレークポイントを作成する"> ブレークポイントを作成する </h3> <p class="sycode"> メディアクエリを与えることができます 特定の条件下で特定のスタイルを使用するようにブラウザに指示します </p> <p class="sycode"> ブレークポイントを設定するには?簡単な方法は、Web ページ内で Web ページを開き、ブラウザのウィンドウ ハンドルを使用してウィンドウを狭くすることです。このとき、ブレークポイントを設定できます。の上。一般的に、スマートフォン用、タブレット用、デスクトップ ブラウザー用の 3 つのブレークポイントが設計されています </p> <h3 id="デスクトップ-バージョンが先ですか">デスクトップ バージョンが先ですか? </h3> <p class="sycode"> </p>
<h3 id="メディア-クエリを作成します">メディア クエリを作成します</h3> <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'><link href="css/small.css" rel="stylesheet" media="(width:480px)"></pre> </p> <p class="sycode"> メディア属性を追加して条件を設定するだけです</p> <p class="sycode"> IE8 以前のバージョンはサポートしていません。ドキュメント </p> に js を追加することで、古いバージョンの IE もメディア クエリをサポートできます。 http://tinyurl.com/7w49a6z から、respond.js をダウンロードして導入してください。 : <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'><!--[if lte IE 8> <script src="respond.min.js"></script><![endif]--></pre> </p> <p class="sycode"> 这种只针对精确的查询，最好使用范围值，即借助max-width（小于等于）和min-width（大于等于） </p> <p class="sycode"> 关于浏览器查询信息： www.w3.org/TR/css3-mediaqueries </p> <h2 id="弹性网格">弹性网格</h2> <p class="sycode"> HTML源码的顺序的重要性 </p> <p class="sycode"> 重置盒模型 </p> <p class="sycode"> 将固定宽度转换成弹性网格 </p> <h2 id="流式图片">流式图片</h2> <p class="sycode"> 虽然弹性设计中列会随着浏览器窗口变小而收缩，但图片不会，这就可能导致图片溢出边界 </p> <p class="sycode"> 可以使用如下方式使图片变成具有弹性： </p> <p class="sycode"> 1、首先，添加样式： </p> <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'>img { max-width:100; }</pre> </p> <p class="sycode"> 2、将HTML中所有img标签的height和width属性删除 </p> <h3 id="流式图片不足">流式图片不足</h3> <p class="sycode"> 图片会伸展到列的100%宽度，这就可能发生拉伸超出它的自然宽度，发生形变和失真。 </p> <p class="sycode"> 第15章，定位网页上的元素 </p>
<h2 id="定位属性的功能">定位属性的功能</h2> <p class="sycode"> CSS的position属性可以控制Web浏览器如何以及在和何处显示特定的元素 </p> <p class="sycode"> CSS提供了4种类型的定位： </p> <p class="sycode"> 绝对定位：通过以pixel、em或percentage为单位设定元素的左右上下方的位置对它进行定位。 </p> <p class="sycode"> 注：不要在一个样式中同时设定float属性和任何一种定位，除了静态定位和相对定位，absolute和fixed也不能和float属性同时应用于同一个元素 </p> <p class="sycode"> 相对定位：相对于它在HTML流中的当前位置进行定位，与绝对定位不同，其他元素并不会占据相对定位元素原来在HTML中所处的位置，相对定位最大的好处不是移动元素，而是给它内部绝对定位元素设定一个新的参照点 </p> <p class="sycode"> 固定定位：固定定位元素会被锁定在屏幕某个位置上。 </p> <p class="sycode"> 静态定位：只是表示网页内容将遵循正常从上到下的HTML流 </p> <p class="sycode"> position属性可以改变任何一个元素的定位，使用以下4个关键字：static、absolute、relative、fixed </p> <p class="sycode"> 注：静态定位元素将不支持以下要讨论的任何一种定位值 </p> <p class="sycode"> </p>
<h2 id="设置定位值">设置定位值</h2> <p class="sycode"> Web浏览器窗口显示区也被称为检视区（viewport），有上、下、左、右4条边，对应CSS属性top、bottom、left、right </p> <p class="sycode"> position属性后面还有更多种属性（top、bottom、left、right） </p> <p class="sycode"> 利用绝对定位在网页上定位元素时，它的具体位置均取决于相关元素在其它标签中所嵌套的位置： </p> <p class="sycode"> 1、如果一个标签的位置是绝对定位的，且它又不在其他任何设定了absolute、relative、fixed定位的标签里面，那它就是相对于浏览器窗口进行定位 </p> <p class="sycode"> 2、如果一个标签处在另一个设定了absolute、relative、fixed定位的标签里，那它就是相对于另一个元素的边框进行定位 </p> <p class="sycode"> 注：在CSS中，术语relative不完全等同于它的本义，可以解读为“相对于我”的意思。即当对一个标签设置relative定位时，意思是“我内部所有定位元素应该相对于我的位置进行定位” </p> <h2 id="堆叠元素">堆叠元素</h2> <p class="sycode"> 一般来讲，定位元素重叠时的堆叠顺序是按照它们在网页HTML代码中的顺序来决定，但可以通过CSS属性z-index来控制定位元素的堆叠顺序： </p> <p class="sycode"> z-index:3; 这个值为数字，数字越大，越接近堆叠顶部，即出现在HTML页面的前面，还可以使用负值，将一个元素定位在其父元素或者其任意一个祖先元素之下。 </p> <p class="sycode"> 注：IE7及更早版本不支持，z-index最大值是2147483647 </p> <p class="sycode"> </p>
<h2 id="隐藏部分网页">隐藏部分网页</h2> <p class="sycode"> 绝对定位元素时常用CSS属性visibility（可见性），隐藏部分网页或显示隐藏部分visibility:hidden（隐藏），visibility:visible（可见） </p> <p class="sycode"> visibility:hidden与display:none类似，不过visibility会在HTML网页留下空白，display不会 </p> <p class="sycode"> opacity属性也可以隐藏元素：opacity:0，完全不可见，opacity:1，完全可见 </p> <h2 id="强大的定位策略">强大的定位策略</h2> <p class="sycode"> 综合使用position的定位 </p> <p class="sycode"> 第四部分----CSS高级技术 第16章，设计打印页面的CSS技术 </p> <p class="sycode"> </p>
<h2 id="Media样式表的作用">Media样式表的作用</h2> <p class="sycode"> CSS支持10种不同的媒体类型：all、braille、embossed、handheld、print、projection、screen、speech、tty、tv </p> <p class="sycode"> 应特别注意的3种媒体类型： </p> <p class="sycode"> all：适用于每一种设备，当把样式嵌入或通过外部样式表进行链接时，用的就是这种方式 </p> <p class="sycode"> screen：只适用于显示器 </p> <p class="sycode"> print：只适用于打印网页 </p> <h2 id="给外部样式表指定媒体类型">给外部样式表指定媒体类型</h2> <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'><link rel="stylesheet" media="print" href="print.css"></pre> </p> <p class="sycode"> 技术上来说：@import url(print.css) print;也是可以的，只是IE不支持 </p> <h3 id="在样式表中指定媒体类型">在样式表中指定媒体类型</h3> <p class="sycode"> 在样式表中使用以下语句： </p> <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'>@media print{ /*put your styles for printer in here*/}</pre> </p> <h2 id="重写文本样式">重写文本样式</h2> <p class="sycode"> 使用pixel或em单位对于浏览器而言可能很好，但对打印机并不起作用。浏览器会根据自己的解释将其转换成打印的单位：点（pt），不同浏览器解释不一样，所以最好能够设置成针对打印机的样式使用pt作为单位 </p> <h2 id="定义打印背景">定义打印背景</h2> <p class="sycode"> 1、取消背景元素 </p> <p class="sycode"> 使用background:white;可直接将背景设置成白色，并取消图片 </p> <p class="sycode"> 2、保留背景元素 </p> <p class="sycode"> 3、给打印添加分页符 </p> <p class="sycode"> 使用page-break-before和page-break-after属性 </p> <p class="sycode"> page-break-before:always让Web浏览器在一个指定样式之前插入分页符，是某个元素显示在打印页的顶部 </p> <p class="sycode"> page-break-after:always是某一个元素显示在打印页面最后 </p> <p class="sycode"> 第17章，改正CSS设计习惯 </p>
<p class="sycode"> 1、添加注释 </p> <p class="sycode"> 2、组织样式和样式表 </p> <p class="sycode"> 3、样式命名要清晰 </p> <p class="sycode"> 4、根据用途而不是外观命名样式 </p> <p class="sycode"> 5、不根据位置命名 </p> <p class="sycode"> 6、不使用含义模糊的名称 </p> <p class="sycode"> 7、使用多个类可以节省时间 </p> <p class="sycode"> 8、将样式分组：把网页上相关部位所采用的样式集中在一起，把用途相关的样式集中在一起 </p> <p class="sycode"> 9、用注释分隔样式组 </p> <p class="sycode"> 10、使用多个样式表：可以使用@import合并多个样式表，再引入’ </p> <p class="sycode"> 11、消除浏览器的样式冲突：即各个浏览器的默认样式不一致，要对样式重置 </p> <p class="sycode"> 12、使用派生选择器：尽量减少ID选择器的使用，以及减少类的使用 </p> <p class="sycode"> 高级：面向对象的CSS，可登录网站： http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/，还可以在以下网站查看OOCSS项目： https://github.com/stubbornella/oocss，另一种方法称作Scalable and Modular Architecture for CSS（简称SMACSS），这是一种创建可重用CSS组件的简单样式向导。可通过以下网站了解： http://smacss.com </p> <p class="sycode"> 13、给IE尝试不同的CSS </p> <p class="sycode"> IE条件注释基本结构： </p> <p class="sycode"> </p>
<p class="sycode"> <pre class='brush:php;toolbar:false;'><!--[if IE]> /*针对IE的样式*/<![endif]--></pre> </p> <p class="sycode"> 非IE浏览器会当成HTML注释并忽略 </p> <p class="sycode"> 关于IE条件注释更多信息，请登录了解： http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p>
<p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p>
ウェブフロントエンド
HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM
テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM
