個人 css 常用樣式

2021-09-11 06:02:31 字數 1322 閱讀 2555

頁面總體3個部分,topbar:70px;sidebar:選單欄,高度始終撐滿頁面;右側主題內容區域:高度不定

一般我們會通過js去計算出頁面的高度然後減去topbar的高度70px, 然後再給sidebar加個計算後的高度。

這裡可以直接利用css3 函式calc()計算高度:

.sidebar

button 

button:hover

height: calc(100% - 138px);

background: deepskyblue;

-webkit-overflow-scrolling: touch; /* 蘋果手機端滑動不流暢 */

color: #034681;/* 顏色 */

font-size: 12px;/* 文字大小 */

font-weight: 300;/* 文字粗細 */

line-height: 24px;/* 文字行高 */

letter-spacing: 1px;/* 文字間距 */

column-count: 3; /* 將 div 元素中的文字分為三列 */

font-variant: small-caps;/* 把段落設定為小型大寫字母字型 */

white-space: nowrap;/* 文字不換行 */

word-wrap: break-word;/* 文字換行 */

direction: rtl;/* 把文字方向設定為「從右向左」 */

text-align: center;/* 文字居中 */

text-decoration: underline;/* 定義文字下的一條線。 */

text-indent: 10px;/* 將段落的第一行縮排 10 畫素 */

text-transform: capitalize; /* 文字中的每個單詞以大寫字母開頭。 */

word-spacing: 25px;/* 單詞間距 */

text-shadow: 0 0 10px #000;/* 文字陰影 */

background: linear-gradient(to bottom, #444444, #333333); /* 標準的語法(必須放在最後) */。

box-sizing: border-box;

box-shadow: 0 0 10px #f90;

.flex{

display:flex;

justfiy-content:center;

algin-items:center;

flex-wrap:wrap;

flex-direction:column;

css之個人表單常用樣式收藏

引入css link rel stylesheet type text css href styles oms yjdlbb widthsplit.css link rel stylesheet type text css href styles oms yjdlbb shade.css link ...

css 常用樣式

css 說的通俗一點就是 給標籤加樣式的。什麼玩意是樣式呢。你們可以理解為人穿的衣服,化妝之類的修飾,讓自己的寫的標籤變的好看一點 那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 內頁樣式 行內樣式。那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式 ...

css常用樣式

格式調整 標籤的位置調整 text align center 絕對元素生成 position absolute margin right 微調上下左右 浮動 float 上下左右 width 寬 height 高 樣式調整 字型粗細 font weight size 字型格式 text decora...