フロントエンド開発でよく使われるテクニックの整理
6767 ワード
1.超過部分表示省略を制御する(単行):
以下、css 3部分を使用して、複数行の超過部分の表示省略を制御します(Googleカーネルブラウザに適しています):
2.ラベルの背景が透明で、内容が不透明であることを実現する:
3.サーバー側フォントを呼び出します.
4.css 3を使用してグラデーションを実現します(ここではGoogleカーネルブラウザに適しています):
5.css 3は画像の垂直水平中央を実現する(ここではグーグル、火狐カーネルブラウザに適している):
6.段落のテキストレイアウトの一般的なスタイル:
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;以下、css 3部分を使用して、複数行の超過部分の表示省略を制御します(Googleカーネルブラウザに適しています):
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* ， */
max-height: 30px;2.ラベルの背景が透明で、内容が不透明であることを実現する:
background: rgba(255,255,255,0.6)!important;3.サーバー側フォントを呼び出します.
@font-face{
font-family: " ";
src:url(' .ttf')format('opentype');
/* */
}
span{
font-family: " ";
font-size: 36px;
}4.css 3を使用してグラデーションを実現します(ここではGoogleカーネルブラウザに適しています):
.shade{
width: 300px;
height: 100px;
/* */
background:
-webkit-gradient(linear,0 0 ,0 100%,from(rgba(255, 255, 255, 0.1)),to(rgba(255, 163, 204, 0.5)));
}5.css 3は画像の垂直水平中央を実現する(ここではグーグル、火狐カーネルブラウザに適している):
<style type="text/css">
.content{
display: box;
display: -webkit-box;
display: -moz-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
border: 1px solid red;
width: 600px;
height: 500px;
}
</style>
<body>
<div class="content">
<img src="1.jpg" alt="">
</div>
</body>6.段落のテキストレイアウトの一般的なスタイル:
text-align:justify