コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 学習12日目 @div+css_html/css_WEB-ITnose

学習12日目 @div+css_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:31:57
オリジナル
1129 人が閲覧しました

質問:

データ注釈

ところで、独自の検証プロパティを構築することもできますが (これについては後ほど説明します)、[Required] は System.ComponentModel に存在する多くの標準検証プロパティの 1 つです。 .DataAnnotations アセンブリ 1。図 3 は、注釈付きアセンブリ内の検証プロパティの完全なリストを示しています。

図 3 アノテーション アセンブリの検証属性

Properties

Description

StringLength

指定されたデータ フィールドに入力される文字列の最大長。

Required

指定されたデータフィールドの値は必須です。

RegularExpression

指定されたデータ フィールドの値は、指定された正規表現と一致する必要があります。

Range

データフィールド値の数値範囲制限を指定します。

DataType

データ フィールドに関連付けられた追加の型の名前 (EmailAddress、Url、Password などの DataType 列挙値) を指定します。

这些数据注释属性已迅速在 Microsoft .NET Framework 中普遍存在。您不仅可以在 ASP.NET MVC 应用程序中使用这些属性，而且 ASP.NET 动态数据、Silverlight 和 Silverlight RIA 服务也理解它们。

问题：

Css li是使用css来控制li的样式-css列表，如li列表的以点为开头，或图片开头的列表形式。

Li的基础知识
Li是html的基本元素标签。

  • 标签是用于定义列表项目。
  • 标签可用在有序列表 (
      ) 和无序列表 (
        ) 中。
        在W3C标准下li不能单独使用，需要与
          或
            配合使用，使用范例：

            1. div+css范例

            2. div+css范例之li


            • div+css范例

            • div+css范例之li


            以上代码效果如下图：

            Css li实例,li，ol li，ul li的用法

            经过实例演示知道了li的默认有序和无序的css样式，有序ol的样式是以阿拉伯数字1、2、3为递增列表，而无序的ul的CSS样式是以一个圆黑点的列表形式。

            问题：

            简单讲CSS父级 CSS子级是相对而言，如一个DIV“A”被另外一个DIV “B”包裹着，这样我们就可以让我B是A父级，同样一个道理

            举例说明： -  TOP
            DIV CSS 父级子级说明例子：
            CSS代码
            .yangshi{...}
            .yangshi .yangshi_a{ ...}
            .yangshi .yangshi_b{ ...}

            Div代码


            内容a

            内容b

            以上div+css代码这里我们就可以认为 yangshi_a父级（上一级）是yangshi。
            这样我们就可以利用CSS指针属性在div css中,最终CSS样式可以有相同命名的属性选择器的，但是赋予不同的值。
            这样我们通过.yangshi .yangshi_a一看即可知道yangshi_a的父级是yangshi

            问题：

            什么是CSS指针？这里指针是指属于与被属于的关系 如.yangshi .yangshi_a{...}
            对于yangshi_a是yangshi 指向的样式

            我们可以作1个实验来理解此CSS 指针 是什么
            原CSS div样式
            .yangshi{ width:300px; height:50px; border:1px solid #F00; margin:0 auto; text-align:right;}
            .yangshi .yangshi_a{ float:left; width:30px; border:1px dashed #333;}
            .yangshi .yangshi_b{ float:right; width:50px; border:1px dashed #333;}


            内容a

            内容b

            注: 親は外側で定義し、子の定義は親の内側に記述する必要があります。

            質問:

            私たちは、IE6 や IE7 などのブラウザによる CSS 属性の認識を区別するために、!重要な CSS ハックをよく使用します。そして、CSS の使用が重要であることは、IE7 の優先認識のためのこの単語を使用した CSS のデモンストレーションであることを知っておく必要があります。

            例: color:#F00 ! important; color:#00F これら 2 つは同じフォント カラー コントロールを持ち、一般的に、ブラウザは左から右に読み取り、IE ブラウザはこれら 2 つの色の最後の色を読み取ります。 ;

            一般的に、これは IE7 の CSS ハックを他のブラウザーと区別するために重要です。

            質問:

            Display:block は私たちがよく使うもので、block は Display のデフォルト値でもあります。
            説明: このオブジェクトの後続のコンテンツは自動的にラップされます。
            CSS 表示ブロックの例
            CSS コード:
            .divcss5{display:block}

            Html 対応するアプリケーション コード:
            次のテキストは折り返されます I が先行しました The divcss5 CSS プロパティのラッピングに対応します。
            はdisplay:blockを設定していないためラップされません

            対応する結果のスクリーンショット:

            説明:ここではspanが例として使用されており、1つはCSSスタイルで設定されており、もう1つは設定されていない場合は、自分で比較できます。 DIV 表示:ブロック スタイルに設定されたオブジェクトの後続のコンテンツはラップされます。

            オブジェクトのコンテンツを非表示にするために、この表示の none 値をよく使用します。非表示のオブジェクトは、それ自身の固有の幅と高さのスペースを占有しません。
            詳細については、CSS 非表示の説明を参照してください: http://www.divcss5.com/jiqiao/j55.html

            Display:inline、li でよく使用します。この機能は、li を行に並べることです (行の削除と呼ばれます)。
            次に、未設定の li リストと設定された css 表示インライン スタイルの比較を示します。

            Css コード
            ul.divcss5 li{display:inline}
            説明: ul.divcss5 は、li CSS スタイル属性 display:inline に対応します

            Html の対応するコード:


            • 私の親 ul は、 divcss5 スタイルを持っています

            • 私は一人で歩いています

            • 私は一人で歩いています

            • 私の親 ul は divcss5 スタイルです

            • 私は一列に並んでいます

            • 私は divcss5 の下に一列に並んでいます
              • ul>

              問題:

              枠線のある画像

              上の画像によると、画像にリンクを追加した結果、画像に枠線ができました

              解決策:

              初期化するだけで済みます。 IMGタグのCSSですが

              img{padding:0; border:0;} このCSSを追加して境界線を削除します

              画像がDIVのサイズを超えています

              画像が広すぎる、または大きすぎるということがよくあります。設定した幅を壊します。
              解決策
              CSS コントロールを使用してオブジェクトの IMG タグの幅を変更します。オブジェクトが .yangshi で幅を 500px に設定する場合、IE6 の最大値では .yangshi img{max-width:500px;} を設定するだけで済みます。 -width が無効な場合、最善の解決策は、画像をアップロードするときに幅を設定し、画像自体の幅がその場所で設定されている幅よりも小さくなるようにすることです。これは非常に面倒に感じますが、多くの大規模な Web サイトではこの方法で解決されています。幅を設定することで、画像サイズを小さくし、ブラウザが Web ページをより速く開くことができるようになります。

              概要:

              1. 現時点では、画像が広すぎるのを防ぐために、img タグを初期化する必要があります。 Web ページを壊す場合は、画像を設定幅より小さく切り取る場合、オブジェクトに overflow:hidden 属性を追加することもできます。つまり、画像を含む余分なコンテンツを非表示にします。

              デモ結果の画像:

              説明: display:inline の li オブジェクトに css を設定すると、li オブジェクトは一列に配置され、設定されていない li リスト オブジェクトは独自の行の元の CSS スタイルを継承します。

              質問:

              div 内のスパンの CSS セレクターに擬似クラスの名前を付ける必要はありません。 例は次のとおりです

              div のクラスが yangshi の場合、内部のスパンの css 属性を設定します。コードは次のとおりです

              .yanshi span {属性と属性値}
              凡例のデモンストレーション効果 - TOP

              上の図の分析:span には疑似クラス名を付ける必要はないと結論付けることができます。 CSS 継承属性は、スパンの CSS スタイルを設定するために直接使用されます。ここでは、div 内のスタイルは元々テキストを青に設定していましたが、継承によりスパンのスタイルが赤に設定されました。


              質問:

              CSS プロパティを省略する必要があるのはなぜですか?

              1. コードを簡素化します。一部の CSS プロパティの略語を使用すると CSS コードを削減できるため、CSS ファイルが占めるバイト数が減り、Web ページのダウンロード速度と Web ページの読み込み速度と開く速度が向上します。

              2. CSS の目的を最適化します。 CSS の最適化の 1 つは、コード省略形の CSS プロパティ コードを簡素化することです。

              常见DIV+CSS缩写属性：
              1、CSS 文本：font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:22px;即可简写缩写为font:12px/22px bold Arial, Helvetica, sans-serif;
              2、CSS 背景：background-color:#F00;background-image:url(图片地址);background-position:bottom;background-repeat:no-repeat; 即可将背景CSS属性缩写为：background:#F00 url(图片地址) no-repeat left bottom;www.divcss5.com缩写介绍。
              3、CSS 内补距（CSS padding）:padding-top:5px; padding-bottom:10px; padding-left:15px; padding-right:20px; 即可缩写为padding:5px 20px 10px 15px; 或padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px;缩写为padding:5px 10px;
              4、CSS 外边距（CSS margin）:margin-top:5px; margin-bottom:10px; margin-left:15px; margin-right:20px; 即可缩写为margin:5px 20px 10px 15px; 或margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;缩写为margin:5px 10px;
              5、CSS 边框：border-left:1px solid #000;border-right:1px solid #000;border-top:1px solid #000;border-bottom:1px solid #000;即可缩写为：border:1px solid #000;

              问题：

              布局知识：
              DIV+CSS布局，CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。
              div+css布局好处：便于维护，有利seo（谷歌将网页打开速度作为排名因素及SEO因素），网页打开速度更快，符合web标准等。

              制作div+css网页前思考布局：
              首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。

              首先我们可以分析出我们DIV CSS布局重构此页面结构框架，我们可以看出是 上、中、下结构，其中又包括了左右结构。

              由此我们就要写此页面CSS和html时候就先从上到下 从外到内原则写css与html。

              问题：

              使用不同的方法来引用css样式表，最终到达的效果相同，但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率。

              html引用css方法如下
              1、直接在div中使用css样式制作div+css网页
              2、html中使用style自带式
              3、使用@import引用外部CSS文件
              4、使用link引用外部CSS文件 推荐此方法

              接下来我们将逐个讲解html引用css方法的例子

              1、直接在html标签元素内嵌入css样式，如

              我是div css测试内容-www.divcss5.com支持
              効果は以下の通りです

              2. 以下のように HTML ヘッダーの先頭部分にスタイルステートメントのコードを挿入します。

              3. @importを使用して外部CSSファイルを参照する方法