HTML & CSS 視覺設計

来源:https://www.cnblogs.com/risejl/archive/2022/09/22/16717869.html
-Advertisement-
Play Games

##vue+element-ui後臺管理系統模板 前端:基於vue2.0+或3.0+加上element-ui組件框架 後端:springboot+mybatis-plus寫介面 通過Axios調用介面完成數據傳遞 通過router路由完成各頁面的跳轉 ###全局配置 App.vue <templat ...


文本 Text

文本對齊 Text Align

web 內容大部分都是文本。 CSS 裡面的 text-align 屬性可以控制文本的對齊方式。

text-align: justify; 將文本隔開,使每行的寬度相等。
text-align: center; 可以讓文本居中對齊。
text-align: right; 可以讓文本右對齊。
text-align: left; 是預設值,它可以讓文本左對齊

加粗 Bold

使用 strong 標簽來加粗文字。 粗體文字一般用來吸引讀者註意或用來表示強調。

使用 font-weight 來加粗文字。

<strong></strong>
font-weight: bold;
font-weight: XX px;

下劃線 Underline

使用 u 標簽來給文字添加下劃線。 下劃線通常用來表示重要內容或需要記憶的內容。

使用 text-decoration: underline 標簽來給文字添加下劃線。

如果使用 u 標簽添加下劃線,可能混淆文本和鏈接,則應避免使用它。 超鏈接標簽也有預設的下劃線格式。

<u></u>
text-decoration: underline;

強調/斜體 Italic

使用 em 標簽來強調文本,使用 i 斜體文本。

使用 font-style: italic 標簽來強調文本。

強調和斜體的效果一樣,但是含義不同。前者強調標簽中包含的文本,後者突出技術術語,標題或者來自另一語言的短語。

<em></em>
<i></i>
font-style: italic;

大小寫 Upper/Lowercase

CSS 里的 text-transform 屬性可以改變英文字母的大小寫。 使用這個屬性時,無需改變 HTML 元素中的文本也可以統一頁面里英文的顯示。

下麵的表格展示了 text-transform 的不同值對文字 “Transform me” 的影響:

結果
lowercase "transform me"
uppercase "TRANSFORM ME"
capitalize "Transform Me"
initial 使用預設值
inherit 使用父元素的 text-transform值。
none Default:不改變文字。
text-transform: uppercase;

上下標 Super/Subscript

使用supsub表示上下標,在表示公式時有用。

<sup></sup>
<sub></sub>

線條 Line

刪除線 Strikethrough

s 標簽來給文字添加刪除線。 刪除線是位於文字水平中央的一條線,它代表著一段文字不再有效。

text-decoration: line-through 標簽來給文字添加刪除線。

<s></s>
text-decoration: line-through;

水平線 Horizontal Line

hr 標簽來創建一條寬度撐滿父元素的水平線。 這種水平分割線一般用來表示內容主題的改變,或在視覺上將文檔分隔成幾個部分。

HTML 中的 hr 是自閉合標簽。

<hr>

行 Row

換行 Wrap

br標簽來換行。 HTML 中的 br 是自閉合標簽。

<br>

行高 Line Height

CSS 提供 line-height 屬性來設置行間的距離。 行高,顧名思義,可以用來設置每行文字所占據的垂直空間。

line-height: 25px;

陰影 Shadow

box-shadow 屬性用來給元素添加陰影,該屬性值是由逗號分隔的一個或多個陰影列表。

box-shadow 屬性的陰影依次由下麵這些值描述:

  • offset-x 陰影的水平偏移量;
  • offset-y 陰影的垂直偏移量;
  • blur-radius 模糊半徑;
  • spread-radius 陰影擴展半徑;
  • color 顏色

其中 blur-radiusspread-radius 是可選的。

可以通過逗號分隔每個 box-shadow 元素的屬性來添加多個 box-shadow。

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

透明度 Transparency

CSS 里的 opacity 屬性用來設置元素的透明度。

屬性值為 1 代表完全不透明。
屬性值為 0.5 代表半透明。
屬性值為 0 代表完全透明。

透明度會應用到元素內的所有內容,不論是圖片,還是文本,或是背景色。

opacity: 0.7;

超鏈接 Anchor

可以使用 a:hover 偽類選擇器來選取超鏈接的懸停狀態。

a:hover {
  color: blue;
}

位置 Position

相對定位 Relative

在 CSS 里一切 HTML 元素皆為盒子,也就是通常所說的盒模型。 塊級元素自動從新的一行開始(比如標題、段落以及 div),行內元素排列在上一個元素後(比如圖片以及 span)。 元素預設按照這種方式佈局稱為文檔的普通流,同時 CSS 提供了 position 屬性來覆蓋它。

當元素的定位設置為 relative時,它允許通過 CSS 指定該元素在當前文檔流頁面下的相對 偏移量。 CSS 里控制各個方向偏移量的屬性是 leftrighttopbottom。 它們代表從原來位置向遠離該方向偏移 指定的像素、百分比或者 em。

p {
  position: relative;
  bottom: 10px;
}

把元素的位置設置成相對,並不會改變該元素在佈局中所占的位置,也不會對其它元素的位置產生影響。

CSS 裡面的 topbottomleftright 定義了元素在相應方位的偏移距離。 元素將從當前位置向屬性相反的方向偏移。

絕對定位 Absolute

CSS position 屬性的取值選項 absolute,它的含義是相對於其包含塊定位。 和 relative 定位不一樣,絕對定位會將元素從當前的文檔流裡面移除,周圍的元素會忽略它。 這樣就可以用 CSS 的 top、bottom、left、right 屬性來調整元素的位置。

絕對定位比較特殊的一點是元素的定位參照於最近的 positioned 祖先元素。 如果它的父元素沒有添加定位規則(預設是 position: relative;),瀏覽器會繼續尋找直到預設的 body 標簽。

p {
  position: absolute;
  bottom: 10px;
}

固定定位 Fixed

fixed 定位,它是一種特殊的絕對(absolute)定位,將元素相對於瀏覽器視窗定位。 類似於絕對位置,它與 CSS 偏移屬性一起使用,並且也會將元素從當前的文檔流裡面移除。 其它元素會忽略它的存在,這樣也許需要調整其他位置的佈局。

fixedabsolute 的最明顯的區別在於,前者定位的元素不會隨著屏幕滾動而移動。

position: fixed;
top: 0;
left: 0;

浮動 Float

通過元素的 float 屬性來設置。 浮動元素不在文檔流中,它向 leftright 浮動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 通常需要用 width 屬性來指定浮動元素占據的水平空間。

.card1 {
  float: left;
  width: 50%;
}
.card2 {
  float: right;
  width: 50%;
}

元素重疊 Overlapping

當一些元素在位置上重疊時(例如,使用 position: absolute | relative | fixed | sticky時),在 HTML 里後出現的元素會預設顯示在更早出現的元素的上面。 可以使用 z-index 屬性指定元素的堆疊次序。 z-index 的取值是整數,數值大的元素會疊放到數值小的元素上面。

z-index: 2;

元素水平居中 Center

在應用設計中經常需要把一個塊級元素水平居中顯示。 一種常見的實現方式是把塊級元素的 margin 值設置為 auto(前提要設定元素的寬度 width)。

同樣的,這個方法也對圖片奏效。 圖片預設是內聯元素,但是可以通過設置其 display 屬性為 block來把它變成塊級元素。

width: 100px;
margin: auto;

漸變 Gradient

HTML 元素的背景色並不局限於單色。 CSS 還為提供了顏色漸變。 可通過 background 里的 linear-gradient() 實現線性漸變。

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

第一個參數指定了顏色過渡的方向——它的值是角度,90deg 表示垂直漸變(從左到右),45deg 表示沿對角線漸變(從左下方到右上方)。 其他參數指定了漸變顏色的順序:

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

repeating-linear-gradient()函數和 linear-gradient() 很像,主要區別是前者會重覆指定的漸變。 repeating-linear-gradient() 有很多參數,為了便於理解,只用到角度值和色標。角度就是漸變的方向。 色標代表漸變顏色及發生漸變的位置,由百分比或者像素值表示。

下麵的代碼可以幫助理解成對的起止漸變顏色值是如何過渡的。

0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px

如果每對起止漸變顏色值的顏色都是相同的,由於是在兩個相同的顏色間過渡,那麼中間的過渡色也為同色,接著就是同色的過渡色和下一個起止顏色,最終產生的效果就是條紋。


背景圖

background 屬性支持使用 url() 函數作為屬性值,這讓我們可以通過鏈接的方式引入紋理或樣式的圖片。 圖片鏈接的地址應寫在括弧內,一般會用引號包起來。

background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");

元素大小 Scale

CSS 屬性 transform 裡面的 scale() 函數可以用來改變元素的顯示比例。

p {
  transform: scale(1.5);
}

transform 屬性有很多函數可以調用,可以對元素進行調整大小、移動、旋轉、翻轉等操作。 當使用偽類選取元素的指定狀態(如 :hover)時,可以通過 transform 屬性非常方便地給元素添加交互。

p:hover {
  transform: scale(1.1);
}

transform 屬性 skewX():它使選擇的元素沿著 X 軸(橫向)傾斜指定的角度。

transform: skewX(24deg);

skewY 屬性使指定元素沿 Y 軸(垂直方向)翻轉指定角度。

transform: skewY(24deg);

動畫&關鍵幀 Animation&Keyframes

animation 屬性控制動畫,@keyframes規則控制動畫中各階段的變化。 總共有 8 個 animation 屬性。

animation-name 用來設置動畫的名稱。animation-duration 設置動畫顯示的時間。

@keyframes 可以通過設置特定時間點的行為來創建動畫。 為此,只需要給持續時間內的特定幀(從 0% 到 100%)加上 CSS 規則。

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}
@keyframes rainbow {
    0% {
      background-color: blue;
  }
    50% {
      background-color: green;
  }
    100% {
      background-color: yellow;
  }
}

animation-fill-mode 指定了在動畫結束時元素的樣式.

animation-fill-mode: forwards;

animation-iteration-count,這個屬性控制動畫迴圈的次數。如果想讓動畫一直運行,可以把值設置成 infinite

animation-iteration-count: 3;

animation-timing-function 用來定義動畫的速度曲線。 速度曲線決定了動畫從一套 CSS 樣式變為另一套所用的時間。 如果要描述的動畫是一輛車在指定時間內(animation-duration)從 A 運動到 B,那麼 animation-timing-function 表述的就是車在運動中的加速和減速等過程。有一些預定義的關鍵字可用於常見的選項。 比如,預設值是 ease,動畫以低速開始,然後加快,在結束前變慢。 其它常用的值包括 ease-out:動畫以高速開始,以低速結束;ease-in,動畫以低速開始,以高速結束;linear:動畫從頭到尾的速度是相同的。


貝塞爾曲線 Bezier Curve

在 CSS 動畫里,用 cubic-bezier 來定義貝塞爾曲線。 曲線的形狀代表了動畫的速度。 曲線在 1 * 1 的坐標系統內, 其中 X 軸代表動畫的時間間隔(類似於時間比例尺),Y 軸代表動畫的改變。

cubic-bezier 函數包含了 1 * 1 網格裡的4個點:p0p1p2p3。 其中 p0p3 是固定值,代表曲線的起始點和結束點,坐標值依次為 (0, 0) 和 (1, 1)。 你只需設置另外兩點的 x 值和 y 值,設置的這兩點確定了曲線的形狀從而確定了動畫的速度曲線。 在 CSS 裡面通過 (x1, y1, x2, y2) 來確定 p1p2。 以下就是 CSS 貝塞爾曲線的例子:

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

對齊 Align

文本對齊

見第一標題文本下對齊子標題。

HTML 元素對齊

HTML 元素對齊需要考慮盒子模型和文檔流。

居中對齊

對於塊級元素:

先給元素設定寬度,然後推外邊距至充滿父元素的可用空間。

<div class="parent">
  <div class="child">
  </div>
</div>

通過設置邊距把父元素的空間可視化:

.parent {
  border: 5px solid red;
}

把子元素的寬度設置為父元素的 50%,給一定的內邊矩(把元素變為空心)和邊框(為了可視化),為了居中子元素,把外邊距設置為 auto ,該屬性告訴瀏覽器根據可用空間自動計算外邊距:

.child {
  width: 50%;
  padding: 20px;
  border: 4px solid green;
  margin: auto;
}

對於行內元素,需要先把其變為塊級元素,然後應用相同的方式:

.child {
  display: block;
  border: 4px dashed blue;
  margin: auto;
}

左右對齊

常用方式是使用 float 屬性或者 position 屬性。

float 屬性設置元素位置相對於其父元素的文本內容。文本會包住子元素。

右對齊:

<div class="parent">
  <img src="logo.png" class="child">Lorem
</div>
.child {
  float: right;
}

註意文本內容在 img 元素之後,此時圖片的右部和頂部是挨著屏幕的,如果文本內容在圖片之前,那麼圖片的頂部會挨著文本。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 async await 語法是 ES7出現的,是基於ES6的 promise和generator實現的 generator函數 在之前我專門講個generator的使用與原理實現,大家沒瞭解過的可以先看那個手寫generator核心 ...
  • Common JS 是模塊化規範之一。每個文件都是一個作用域,文件裡面定義的變數/函數都是私有的,對其他模塊不可見。Common JS 規範在 Node 端和瀏覽器端有不同的實現。 ...
  • 接手的一個項目使用的是avue這個傻瓜式的專門給後端人員用的框架,文檔不夠友好,使用起來各種蛋疼(咱專業前端基本上不使用)。為此,專門記錄一下。當前avue版本2.8.12,如果要切換avue的版本,可以去https://cdn.jsdelivr.net/npm/@smallwei/[email protected] ...
  • REM rem是一個相對尺寸,它相對於html根元素來進行計算 類推3REM為48px。改變html根元素 font-size 屬性的大小。那麼REM值也會隨之改變。 html{ font-size: 50px; /* 預設 16px */ } 此時3REM為150px。接下來我們通過一個小案例來演 ...
  • 我的前端之旅。本節學習CSS媒體查詢(Media Quires),詳細介紹了媒體查詢語法定義,從三個具體佈局例子學習媒體查詢的使用技巧。並介紹了一些scss、css屬性知識。 ...
  • 每日3題 1 以下代碼執行後,控制臺中的輸出內容為? console.log(+true, !'hello') 2 點擊p標簽時,會輸出什麼 const numbers=[1,2,3,4,5] const [y] = numbers console.log(y) 3 以下代碼執行後,控制臺中的輸出內 ...
  • 背景 大家有沒有這麼一種困境 我現在需要去配置一個定時任務:"每天早上九點執行任務" 若你有一個好的定時任務平臺,相信很容易就能配置完成。那若是沒有定時任務平臺呢?是不是就要自己寫cron表達式 那 "每天早上九點執行任務" 的cron表達式怎麼寫呢? 這個時候我會去百度一些cron線上生成,因為我 ...
  • 介紹 在業務中,如果遇到文檔管理類的功能,會出現需要線上預覽的業務需求,本文主要是通過第三方庫來實現文檔預覽功能,並將其封裝成preview組件 docx docx的實現需要使用docx-preview插件 安裝 npm i docx-preview 使用 創建一個容器標簽 <div ref="fi ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 1.講故事 在分析的眾多dump中,經常會遇到各種奇葩的問題,僅通過dump這種快照形式還是有很多問題搞不定,而通過 perfview 這種粒度又太粗,很難找到問題之所在,真的很頭疼,比如本篇的 短命線程 問題,參考圖如下: 我們在 t2 時刻抓取的dump對查看 短命線程 毫無幫助,我根 ...
  • 在日常後端Api開發中,我們跟前端的溝通中,通常需要協商好入參的數據類型,和參數是通過什麼方式存在於請求中的,是表單(form)、請求體(body)、地址欄參數(query)、還是說通過請求頭(header)。 當協商好後,我們的介面又需要怎麼去接收這些數據呢?很多小伙伴可能上手就是直接寫一個實體, ...
  • 許多情況下我們需要用到攝像頭獲取圖像,進而處理圖像,這篇博文介紹利用pyqt5、OpenCV實現用電腦上連接的攝像頭拍照並保存照片。為了使用和後續開發方便,這裡利用pyqt5設計了個相機界面,後面將介紹如何實現,要點包括界面設計、邏輯實現及完整代碼。 ...
  • 思路分析 註冊頁面需要對用戶提交的數據進行校驗,並且需要對用戶輸入錯誤的地方進行提示! 所有我們需要使用forms組件搭建註冊頁面! 平時我們書寫form是組件的時候是在views.py裡面書寫的, 但是為了接耦合,我們需要將forms組件都單獨寫在一個地方,需要用的時候導入就行! 例如,在項目文件 ...
  • 思路分析 登錄頁面,我們還是採用ajax的方式提交用戶數據 唯一需要學習的是如何製作圖片驗證碼! 具體的登錄頁面效果圖如下: 如何製作圖片驗證碼 推導步驟1:在img標簽的src屬性里放上驗證碼的請求路徑 補充1.img的src屬性: 1.圖片路徑 2.url 3.圖片的二進位數據 補充2:字體樣式 ...
  • 哈嘍,兄弟們! 最近有許多小伙伴都在吐槽打工好難。 每天都是執行許多重覆的任務 例如閱讀新聞、發郵件、查看天氣、打開書簽、清理文件夾等等, 使用自動化腳本,就無需手動一次又一次地完成這些任務, 非常方便啊有木有?! 而在某種程度上,Python 就是自動化的代名詞。 今天就來和大家一起學習一下, 用 ...
  • 作者:IT王小二 博客:https://itwxe.com 前面小二介紹過使用Typora+PicGo+LskyPro打造舒適寫作環境,那時候需要使用水印功能,但是小二在升級LskyPro2.x版本發現有很多不如人意的東西,遂棄用LskyPro使用MinIO結合代碼實現自己需要的圖床功能,也適合以後 ...
  • OpenAI Gym是一款用於研發和比較強化學習演算法的工具包,本文主要介紹Gym模擬環境的功能和工具包的使用方法,並詳細介紹其中的經典控制問題中的倒立擺(CartPole-v0/1)問題。最後針對倒立擺問題如何建立控制模型並採用爬山演算法優化進行了介紹,並給出了相應的完整python代碼示例和解釋。要... ...
  • python爬蟲瀏覽器偽裝 #導入urllib.request模塊 import urllib.request #設置請求頭 headers=("User-Agent","Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, l ...
  • 前端代碼搭建 主要利用的是bootstrap3中js插件里的模態框版塊 <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密碼</a></li> <div class="modal fade bs-exam ...