Web前端設計秘籍-30個工作中常用的CSS樣式

SS樣式被稱為“層疊樣式表”，是一種網(wǎng)頁制作不可或缺的技術，是用于修飾網(wǎng)頁樣式，達到設計效果的一種樣式語言。

而由于樣式效果非常多，在工作中并非所有的樣式都會用到，因此經(jīng)?？赡苡龅侥承┨囟邮綍蝗幌氩黄饋淼那闆r，更何況對于初學者來說遇到這種情況。

接下來就跟著小凡一起整理一下這些常用而易忘的css樣式。

css樣式的效果

01、文字超出部分顯示省略號

單行文本的超出部分顯示省略號。（一定要給元素本身設置寬度）

.title {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

CSS樣式效果圖

多行文本的超出部分顯示省略號

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

CSS樣式效果圖

PS：建議加上word-break:break-all 否則遇到長單詞會出現(xiàn)很神奇的布局情況。

圖一

圖二

圖一未添加，圖二添加后的不同效果

02、中英文(長單詞)自動換行

word-break:break-all; 只對英文起作用，以字母作為換行依據(jù)

word-wrap:break-word; 只對英文起作用，以單詞作為換行依據(jù)

white-space:pre-wrap; 只對中文起作用，強制換行

white-space:nowrap;都起作用，強制不換行

PS:網(wǎng)頁中英文單詞通過“_”(下劃線)和 “-”（中劃線）連接的英文單詞在編譯處理是方式是截然不同的。

下劃線是程序命名方法下劃線命名法的規(guī)范,其他命名規(guī)范還有駝峰式命名。屬于程序專用的命名規(guī)范。可以連接想連的部分為一個變量名，不是單詞。

下劃線連接單詞效果

中劃線是英語復合詞有連接2個單詞的意思，但前后是2個獨立單詞。

中劃線連接單詞效果

03、設置表單輸入框placeholder的樣式

input::-webkit-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-ms-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-moz-placeholder {
  color:skyblue;
  text-align: center;
}

CSS樣式效果圖

04、不固定高度的元素文字垂直居中

兼容IE8：偽元素和inline-block/vertical-align

.box::before {
  content:"";
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
  text-align: center;
}

CSS樣式效果圖

不兼容IE8以下: flex布局

.box {
  background: skyblue;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS樣式效果圖

05、文字兩端對齊

.wrap {
  margin: 0 auto;
  width: 800px;
  text-align: justify;
  text-justify: distribute-all-lines;
  /* 兼容IE6-8 */
  text-align-last: justify;
  -moz-text-align-last: justify;
}

CSS樣式效果圖

06、iOS頁面中滑動卡頓

body,html {
  -webkit-overflow-scrolling:touch
}

07、設置滾動條樣式

 .wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
}


.wrap::-webkit-scrollbar {
  /* 整體大小樣式 */
  width: 10px;
  height: 10px;
  }


.wrap::-webkit-scrollbar-thumb {
  /* 滾動條里的滑塊 */
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255,255,255,0.2) 55%,
  rgba(255,255,255,0.2) 75%,
  transparent 75%,
  transparent);
}


.test::-webkit-scrollbar-track {
/* 滾動條的軌道 */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ededed;
  border-radius: 10px;
}

CSS樣式效果圖

08、隱藏滾動條但又可以滾動

.wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.wrap::-webkit-scrollbar {
/* 整體大小樣式 */
  display: none;
}

CSS樣式效果圖

09、css繪制三角

無邊框三角

div {
  width:0;
  height:0;
  border-width: 0 40px 40px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.3);
}

CSS樣式效果圖

帶邊框三角

div {
  position: relative;
  width:0;
  height:0;
  border-width: 40px 0 40px  40px ;
  border-style: solid;
  border-color:  transparent  black ;
}


div::after {
  content: "";
  position: absolute;
  top:-36px;
  left:-38px;
  border-width: 36px 0 36px  36px ;
  border-style: solid;
  border-color:  transparent red ;
}

CSS樣式效果圖

10、文字間的間距

text-indent 文章段落首行縮進

letter-spacing 字與字之間的間距

.wrap {
  margin: 0 auto;
  width: 600px;
  text-indent: 2em;
  letter-spacing: 10px;
}

CSS樣式效果圖

11、禁止用戶選中元素

有些時候不想讓用戶選中內容，復制網(wǎng)站上文字內容。

.wrap { 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

12、元素占滿整個屏幕

以往需要在做全屏遮罩功能的時候會設置height:100%。但是這種做法需要該遮罩層的所有父級元素都逐級設置高度才能使遮罩繼承高度屬性。所以可以使用100vh單位來實現(xiàn)。

.mask {
  width:100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
}

CSS樣式效果圖

以上就是為學員們整理的針對工作中對商品/新聞等標題的樣式處理，彈窗做法的一些經(jīng)常遇到的css樣式實現(xiàn)方法。

如果覺得有用可以收藏關注，同時還可以留言說出你想知道或者是遇到的不會的樣式處理，我們還將繼續(xù)推出后續(xù)內容，繼續(xù)為大家解讀別的常用css實用技巧以及其他的前端開發(fā)新技能，讓我們期待下一期吧。

文末領資料

Web前端設計秘籍——30個工作中常用的CSS樣式

現(xiàn)代網(wǎng)頁設計中，表格依然扮演著不可或缺的角色。無論是數(shù)據(jù)展示、報表制作還是復雜布局，合理運用HTML中的<table>標簽可以極大地提升網(wǎng)頁的信息結構和用戶體驗。本文將詳細解析HTML表格的高級技巧和創(chuàng)新應用，幫助開發(fā)者和設計師精確掌握使用HTML表格的最佳實踐。

1. HTML表格基礎

1.1 表格結構簡介

HTML表格由<table>標簽創(chuàng)建，基本結構包括<thead>、<tbody>、<tfoot>和<tr>（表格行），以及<th>（表頭單元格）和<td>（表格單元格）。

1.2 創(chuàng)建一個簡單的表格

<table>
    <thead>
        <tr>
            <th>編號</th>
            <th>姓名</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>張三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

這個例子展示了一個包含標題和兩行數(shù)據(jù)的基本表格。

2. 樣式化表格

2.1 使用CSS增強表格視覺

為表格添加CSS樣式可以提升其視覺效果。例如，可以通過以下CSS代碼增加邊框、調整文字對齊方式，以及改善表格的顏色和間隔。

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
thead {
    background-color: #f2f2f2;
}

2.2 響應式表格

在移動設備上查看時，表格應能自動調整以適應不同的屏幕尺寸。可以使用CSS的媒體查詢來實現(xiàn)響應式表格，或者利用JavaScript進行更復雜的操作。

3. 高級技巧和應用

3.1 合并單元格

使用rowspan和colspan屬性可以合并行或列，創(chuàng)建跨多個行或列的單元格，這對于匯總信息特別有用。

<tr>
    <td rowspan="2">合并行</td>
    <td>數(shù)據(jù)1</td>
    <td>數(shù)據(jù)2</td>
</tr>
<tr>
    <td>數(shù)據(jù)3</td>
    <td>數(shù)據(jù)4</td>
</tr>

3.2 交互式表格

通過JavaScript和AJAX，可以實現(xiàn)表格的動態(tài)數(shù)據(jù)加載和更新，這對于需要實時數(shù)據(jù)顯示的應用尤為重要。

4. 結語

掌握HTML表格的使用和優(yōu)化不僅能提升網(wǎng)頁的功能性和美觀，還能改善用戶的瀏覽體驗。隨著技術的不斷進步，我們預見表格在網(wǎng)頁設計中的應用將更加靈活和強大。

結尾部分：
希望本文能為你在使用HTML表格時提供新的視角和方法。記得實踐是檢驗真理的唯一標準，不斷嘗試和優(yōu)化，是每個網(wǎng)頁設計師和開發(fā)者成長的必經(jīng)之路。

多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計算結果。

HTML表單的一些基本原則

選擇適合于收集的數(shù)據(jù)類型和提供交互方式的控件。
清楚標記每一個控件，這樣用戶就可以理解其功能。
盡可能將標簽對齊。將控件的左邊緣對齊。
將相關的標簽分組，并且通過設計中使用空白將每一個分組分開。
表單上的控件順序應該類似于用戶操作他們的順序。

創(chuàng)建基本HTML表單

首先創(chuàng)造一個基本的HTML大綱，包含表單控件；然后將控件進行合并（HTML表單必須包括一個提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務器。）一個單獨的HTML頁面可以包含多個表單。

創(chuàng)建HTML結構

包含表單的HTML結構和和普通的HTML結構一樣。

<HTML>
  <HEAD>
  <TITLE>標題放在這</TITLE>
  </HEAD>
<BODY>
  表單頁面放在這
  </BODY>
  </HTML>

在包含表單的HTML頁面中可以使用任何HTML標簽。基本的表單使用FROM標簽來說明。該標簽中METHOD屬性接收GET或POST兩個值中的一個。ACTION屬性子明PHP腳本的url，該腳本可以收集通過表單收集的數(shù)據(jù)，可以是絕對路徑或者相對路徑。

<FORM METHOD="method" ACTION="url"> 
  中間可以放置表單控件
  </FORM>

合并控件

兩個常用的基本控件：文本框和提交按鈕。

文本框：允許用戶鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過名稱準確訪問其內容，因此它應該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號），單標簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標題。創(chuàng)建方式如下：

<INPUT TYPE = "TEXT" NAME="text">

提交按鈕：允許用戶將一個表單的內容發(fā)送到服務器，一個HTML表單對應應該有一個提交按鈕。

示例：一個完整的HTML表單。

<HTML>
  <HEAD>
  <TITLE>標題</TITLE>
  </HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
  </BODY>
  </HTML>

使用多個表單

可以在一個HTML頁面中包含多個表單，注意下一個表單的FORM開始之前需要結束前一個FORM表單。

<HTML>
  <HEAD>
  <TITLE>標題</TITLE>
  </HEAD>
<BODY>
  
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>

<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>

  </BODY>
  </HTML>

創(chuàng)建表單控件

創(chuàng)建自定義的文本框

文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設置文本框的可視大?。籑AXLENGTH指明用戶鍵入字符的最大長度；VALUE給出了一個最初顯示在文本框中的值。

<input type="text" name="" size="" maxlength="" value="">

創(chuàng)建文本區(qū)域

文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內可以看到的文本行數(shù)，充滿時會滾動。COLS屬性指明可見文本列數(shù)與行數(shù)類似。WRAP屬性指明文本區(qū)域內單詞換行的方式，可以指定如下值。該標簽為雙標簽。

值	說明
off	禁止單詞換行但用戶可以輸入換行符強制換行
virtual/soft	各行顯示為換行，但是換行并沒有被發(fā)送到服務器
physica/hard	啟用了單詞換行

<inputarea name="" rows="" cols="" wrap="">

創(chuàng)建密碼框

創(chuàng)建密碼框的語法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。

<input type="password" name="" size="" maxlength="" value="">

創(chuàng)建復選框

取兩個值中的一個，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復選框默認情況會被選定。value屬性指定復選框被選定情況下被發(fā)送到服務器的值，默認發(fā)送on值。法如下：

<input type="checkbox" name="" checked value="">

創(chuàng)建單選按鈕

語法與復選框屬性含義相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。

<input type="radio" name="" checked value="">

創(chuàng)建列表框

用戶可以選擇一個或者多個選項，它是一個滾動菜單。

<select name="" multipile size="">options go here</select>

name屬性是必須的，multipile屬性指明用戶可以通過按下crtl鍵并單擊多個選項來選擇它們

列表框的單選行為可作為單選按鈕。

<option selected value="text"></options>

創(chuàng)建隱藏域

<input type="hidden" name="text"value="">

實現(xiàn)上傳文件的HTML表單

<input type="FILE" name="name" accept="time" value="text">

其中type屬性是必須的。格式通過使用MIME碼指定。常用的格式如下：

超文本標記語言文本 .html,.html text/html

　　普通文本：txt text/plain

　　word文檔：application/msword

　　RTF文本：rtf application/rtf

　　GIF圖形：gif image/gif

　　JPEG圖形：jpeg,

　　jpg： image/jpeg

　　au聲音文件：au audio/basic

　　MIDI音樂文件：mid,.midi audio/midi,audio/x-midi

　　RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　壓縮文件.rar application/octet-stream

　　壓縮文件.zip application/x-zip-compressed

　　TAR文件 .tar application/x-tar

整合營銷服務商

Web前端設計秘籍-30個工作中常用的CSS樣式

1. HTML表格基礎

1.1 表格結構簡介

1.2 創(chuàng)建一個簡單的表格

2. 樣式化表格

2.1 使用CSS增強表格視覺

2.2 響應式表格

3. 高級技巧和應用

3.1 合并單元格

3.2 交互式表格

4. 結語

HTML表單的一些基本原則

創(chuàng)建基本HTML表單

創(chuàng)建表單控件

更多提交表單的信息

您的項目需求