目次
4.3 ドラッグ アンド ドロップによるテキスト フィールドのサイズ変更を防止する
5.1 画像とフォームはすべてインライン ブロック要素であり、デフォルトの vertical-align はベースライン配置です。
5.2 写真の下部にあるデフォルトのブランクギャップの問題を解決する
1. 1 行のテキストがオーバーフローし、省略記号が表示される -- 3 つの条件を満たす必要がある
2. 複数行のテキストがオーバーフローし、省略記号が表示される
3.CSSトライアングル
いくつかの三角形は Web ページで一般的であり、画像やフォント アイコンを作成しなくても、css を使用して直接描画できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角制作</title>
<style>
.box1 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
.box2 {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>互換性の問題を考慮するために: line-height: 0; font-size: 0; を追加できます。
事例：景東三角の制作
4. CSS ユーザー インターフェイス スタイル
4.1 インターフェイススタイルとは
いわゆるインターフェイス スタイルとは、ユーザー エクスペリエンスを向上させるために、一部のユーザー操作スタイルを変更することです。(つまり、マウスオーバーでスタイルが変わります)
- ユーザーのマウス スタイルを変更する
- フォーム概要
- フォーム フィールドのドラッグを禁止する
4.1 マウススタイルカーソル
li {カーソル: ポインタ; }
オブジェクト上を移動するときにマウス ポインターが採用するシステム定義のカーソル形状を設定または取得します。
| 属性値 | 説明 |
| デフォルト | 白、デフォルト |
| ポインタ | 小さな手 |
| 動く | 動く |
| 文章 | 文章 |
| 禁じられている | 禁止 |
コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标样式</title>
</head>
<body>
<ul>
<li style="cursor:default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor:move">我是鼠标移动样式</li>
<li style="cursor:text">我是鼠标文本样式</li>
<li style="cursor:not-allowed;">我是鼠标禁止样式</li>
</ul>
</body>
</html>4.2 概要 概要
Outline: 0; または Outline: None; スタイルをフォームに追加した後、デフォルトの青い境界線を削除できます。
入力 { アウトライン: なし: }
4.3 ドラッグ アンド ドロップによるテキスト フィールドのサイズ変更を防止する
実際の開発では、テキスト フィールドの右下隅をドラッグすることはできません。
テキストエリア {サイズ変更: なし; }
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户界面样式-表单轮廓和防止拖拽文本域</title>
<style>
input,
textarea {
outline: auto;
}
textarea {
resize: none;
/* outline: none; */
}
</style>
</head>
<body>
<!--1.取消表单轮廓-->
<input type="text">
<!--2. 防止拖拽文本域-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 一般在写文本域的时候一般写在一行上面，如果不放在一行上面在输入的时候光标不会从最前面开始A -->
</body>
</html>5.vertical-align 属性
CSS の vertical-align プロパティはシナリオで使用されます。多くの場合、画像またはフォーム (インライン ブロック) とテキストの垂直方向の配置を設定するために使用されます。
公式説明: 要素の垂直方向の配置を設定するために使用されますが、インライン要素またはインライン ブロック要素に対してのみ有効です。
文法：
vertical-align : ベースライン | トップ | 真ん中 | 下
| 価値 | 説明 |
| ベースライン | デフォルト。要素は親要素のベースラインに配置されます |
| 上 | 要素の上部を行の要素の上部に揃えます |
| 真ん中 | この要素を親要素の中央に配置します |
| 下 | 要素の上部を行の一番下の要素の上部に揃えます |
通常は、display: inline-block; と vertical-align: middle; を併用します。
5.1 画像とフォームはすべてインライン ブロック要素であり、デフォルトの vertical-align はベースライン配置です。
このとき、画像やフォームのインラインブロック要素のvertical-align属性をmiddleに設定することで、テキストや画像を上下中央揃えにすることができます。
5.2 写真の下部にあるデフォルトのブランクギャップの問題を解決する
バグ: インライン ブロック要素がテキストのベースラインに揃えられるため、画像の下部に空白のギャップが生じます。
主な解決策は 2 つあります。
- vertical-align: middle | top | bottom などを画像に追加します。（促進利用）
- 画像はインラインブロック要素に変換できます。表示ブロック;
6.オーバーフローテキスト省略表示
1. 1 行のテキストがはみ出して省略記号が表示される
2. 複数行のテキストがオーバーフローし、省略記号が表示される
1. 1 行のテキストがオーバーフローし、省略記号が表示される -- 3 つの条件を満たす必要がある
- 最初に、テキストを 1 行の空白で表示するように強制します: nowrap; (デフォルトでは通常は自動的に折り返されます)
- 余分な部分は隠されています。
- テキストは省略記号に置き換えられます。 text-overflow: ellipsis;
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单行溢出文字显示省略</title>
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 如果文字显示不开不自动换行 */
/* white-space: normal; */
white-space: nowrap;
/* 溢出的部分隐藏 */
overflow: hidden;
/* ellipsis 是省略的意思 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
来解决了急急急急急急急急急急急急啊啊啊艰苦艰苦就了解了
</div>
</body>
</html>2. 複数行のテキストがオーバーフローし、省略記号が表示される
複数行のテキストがオーバーフローし、省略記号が表示されるため、互換性に大きな問題があります。これは、webKit ブラウザーまたはモバイル端末で使用されます (ほとんどのモバイル端末は webKit カーネルです)。
- オーバーフロー部分は非表示です。overflow: hidden;
- テキストがオーバーフローする場合は省略記号を使用する text-overflow: ellipsis;
- フレキシブル ボックス モデルの表示 display: -webkit-box;
- ブロック要素に表示されるテキストの行数を制限します -webkit-line-clamp: 2;
- フレックス ボックス オブジェクトの子要素の配置を設定または取得します。
コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行文字溢出省略号显示</title>
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>啦啦啦啦啦了了了了了了啦啦啦啦啦啦啦了了了了了了啦啦啦啦啦</div>
</body>
</html>Xiaobaiの書籍配信活動:
「入門から習熟までのGit」
【参考コピー】
- Git の正しい概念を確立すると、作業で正しい Git コマンドを選択できるようになります。
2. 学習効率を 2 倍にするために、端末の指示とグラフィック インターフェイス ツールを組み合わせます。
3. 使い方を教えるだけでなく、何を何のために使っているかも教えてくれます。
【簡単な紹介】
Git は、最初は習得しやすいツールですが、マスターするのは難しいツールです。Git の関連知識を紹介するだけでなく、この本ではさまざまな一般的な状況をシミュレートして、いつどのコマンドを使用すればよいかを読者に知らせています。
「Git 入門から使いこなすまで」は 11 章に分かれており、1 章から 3 章では導入ツールやインストール環境を紹介し、すでに Git をインストールしたことがある読者は 4 章から直接読み始めることができます。第 5 章では、Git の基本的な使い方を紹介します.難しいことではありませんが、Git システム全体の基礎となります. 第 6 章では、Git で一般的に使用される分岐機能と使用シナリオを紹介し、第 7 章から第 9 章では、既存の履歴レコードを変更する方法、ラベルを使用する方法、およびその他の一般的な状況に対処する方法を紹介します。
これまでの内容は自分のパソコンで完結でき、10章からは自分のパソコンにあるレコードのコピーをオンライン（GitHub）にプッシュする方法を紹介しています。*最後の章 (第 11 章) では、チームが開発時に使用できる開発プロセスである Git Flow を紹介します。
市場に出回っているほとんどの参考書やオンライン チュートリアルでは、ターミナル コマンドを使用して Git を学習する方法が説明されています。ターミナル ウィンドウで Git コマンドを入力する方法を説明するだけでなく、この本にはグラフィカル インターフェイス ツールも搭載されているため、読者の学習曲線が緩和され、読者が簡単に使い始めることができます。
【著者について】
Gao Jianlong はプログラマーであり、大規模なテクニカル セミナー (PHPConf、WebConf、RubyConf Taiwan など) やコミュニティ活動 (Rails Girls Taipei、Taipei.rb など) の発起人兼主催者です。彼は現在、Five Times Ruby の共同設立者兼責任者であり、プログラム開発で 20 年の経験があり、約 10 年の教育経験があります. 長年にわたって台湾で Ruby と Git を推進してきました.さまざまな大学があり、学生の間で非常に人気があります。
Jingdong 自営購入リンク: