重學前端003 --- 響應式網頁設計 CSS 顏色

文章目錄

  • 文檔聲明
  • head
  • 顏色模型
  • div

根據在這里 Freecodecamp 實踐,記錄筆記總結。

文檔聲明

在文檔頂部添加 DOCTYPE html 聲明
<!DOCTYPE html>

head

title 元素為搜索引擎提供了有關頁面的額外信息。 它還通過以下兩種方式顯示 title 元素的內容:

  • 當頁面打開時,在標題欄中;
  • 當你把鼠標懸停在該頁面上時,在瀏覽器標簽中。 即使該標簽未被激活,一旦你將鼠標懸停在該標簽上,title 文本就會顯示出來。
<head><meta charset="utf-8"><title>Colored Markers</title><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" href="styles.css">
</head>

顏色模型

主要有兩種顏色模型:電子設備中使用的加色RGB(紅、綠、藍)模型和印刷中使用的減色CMYK(青、品紅、黃、黑)模型。

RGB 模型。 這意味著顏色從黑色開始,色值隨著紅色、綠色和藍色數值變化而變化。 一個簡單的方法是使用 CSS rgb
函數。rgb(red, green, blue);

每個紅色、綠色和藍色值都是一個從 0 到 255 的數字。 0 表示該顏色的 0%,并且是黑色。 255 意味著該顏色的 100%。

rgb(255,0,0)  # 純紅色
rgb(0,255,0) #純綠色
rgb(0,0,255) # 純藍色rgb(0,0,0) # 黑色
rgb(255, 255, 255) # 白色rgb(255, 255, 0) # 黃色
rgb(0, 255, 255) # 青色,藍綠色

在加性RGB顏色模型中,原色是組合后產生純白色的顏色。但要做到這一點,每種顏色都需要達到最高強度。

div

div 元素的 display 屬性默認是 block。 因此,當兩個 block 元素彼此相鄰時,它們會像實際的塊一樣堆疊。要將兩個
div 元素放置在同一行上,需要將它們的 display 屬性設置為 inline-block。

所有 HTML 元素都有邊框,盡管它們通常默認設置為 none。 使用
CSS,你可以控制元素邊框的所有方面,并在所有邊上設置邊框,或者一次只設置一側。 要使邊框可見,你需要設置其寬度和樣式。

box-shadow 屬性允許你在元素周圍應用一個或多個陰影。 這是基本語法:

box-shadow: offsetX offsetY color;

下面是 offsetX 和 offsetY 值的作用: both offsetX and offsetY accept number
values in px and other CSS units 正 offsetX 值將陰影向右移動,負值將它向左移動 正 offsetY
值將陰影向下移動,負值將它向上移動 如果你想要 offsetX 和 offsetY
其中一個值為零,或兩個都為零(0),那么你不需要添加單位。 每種瀏覽器都知道零意味著沒有變化。
陰影的高度和寬度由應用陰影的元素的高度和寬度決定。 你也可以使用可選的 spreadRadius 值來擴大陰影的范圍。

如果不設置 blurRadius 的值,則默認為 0,并產生銳利的邊緣。 blurRadius 的值越大,模糊效果就越大。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/89036.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/89036.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/89036.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

這個Pandas函數可以自動爬取Web圖表

Pandas作為數據科學領域鰲頭獨占的利器&#xff0c;有著豐富多樣的函數&#xff0c;能實現各種意想不到的功能。 作為學習者沒辦法一次性掌握Pandas所有的方法&#xff0c;需要慢慢積累&#xff0c;多看多練。 這次為大家介紹一個非常實用且神奇的函數-read_html()&#xff0…

vLLM與SGLang在自然語言處理領域的技術架構與性能對比研究

隨著大語言模型在工業界和學術界的廣泛應用&#xff0c;高效推理框架的選擇成為自然語言處理領域的關鍵挑戰。vLLM與SGLang作為當前最前沿的推理優化框架&#xff0c;分別通過創新的PagedAttention和RadixAttention機制展現了獨特的技術優勢。本文將系統對比兩大框架的核心架構…

樓宇自動化:Modbus 在暖通空調(HVAC)中的節能控制(二)

Modbus 在 HVAC 節能控制中的應用案例案例一&#xff1a;某商業建筑 HVAC 系統節能改造某大型商業建筑&#xff0c;總建筑面積達 5 萬平方米&#xff0c;涵蓋了購物中心、餐飲區和娛樂場所等多種功能區域 。改造前&#xff0c;其 HVAC 系統采用傳統的控制方式&#xff0c;設備之…

win10安裝Elasticsearch

1 啟動elasticsearch 下載地址&#xff1a;Download Elasticsearch | Elastic 雙擊elasticsearch.bat elasticsearch黑窗口啟動亂碼問題解決方案 到 config 文件下找到 jvm.options 文件 打開后 在文件末尾空白處 添加 -Dfile.encodingGBK 保存后重啟即可。 啟動后輸入&am…

[Meetily后端框架] Whisper轉錄服務器 | 后端服務管理腳本

第七章&#xff1a;Whisper轉錄服務器 歡迎回來&#xff01; 到目前為止&#xff0c;我們已經深入探索了"meeting-minutes"項目的"大腦"——Python后端。 我們已經了解了它如何通過后端API網關接收文本轉錄&#xff0c;使用摘要數據結構&#xff08;Pyd…

Azure-ADF 抽取數據

1,Azure 訪問地址 1,國際版 https://portal.azure.com/#homehttps://portal.azure.com/#home2,世紀互聯中國版 Microsoft Azure 由世紀互聯運營https://portal.azure.cn/2,創建資源組并且所有的后續組件都是再此資源下面創建。 3,創建Data Factory 工具 4,核心組件 1. 管…

django queryset 去重

在Django中&#xff0c;使用QuerySet時&#xff0c;如果你想要對查詢結果進行去重&#xff08;即去除重復的記錄&#xff09;&#xff0c;你可以使用幾種不同的方法。這里列出了一些常見的方法&#xff1a; 使用distinct() distinct()方法用于返回QuerySet中不重復的唯一對象。…

WIFI MTU含義 ,協商修改的過程案例分析

WIFI MTU含義 ,協商修改的過程案例分析 文章目錄 **WIFI MTU含義 ,協商修改的過程案例分析****一、WIFI MTU的含義****二、MTU協商修改的過程案例分析****1. TCP/IP協議中的MTU協商****2. 藍牙(BLE)中的MTU協商****3. 網絡設備配置中的MTU調整****三、協商修改的注意事項**…

記一次Android Studio編譯報錯:Execution failed for task ‘:app:compileDebugAidl‘

問題背景: android studio導入AIDL文件的時候編譯提示: Execution failed for task :app:compileDebugAidl. > A failure occurred while executing com.android.build.gradle.tasks.AidlCompile$AidlCompileRunnable > com.android.ide.common.process.ProcessEx…

selenium跳轉到新頁面時如何進行定位

在 Selenium 中&#xff0c;當你跳轉到新頁面&#xff08;例如通過點擊鏈接、提交表單或 JavaScript 重定向&#xff09;時&#xff0c;通常會遇到頁面加載或窗口切換的問題。為了在新頁面上繼續進行頁面定位操作&#xff0c;你需要確保以下幾點&#xff1a;? 1. 等待頁面加載…

QT——QComboBox組合框控件

QComboBox概述QComboBox是Qt框架中提供的組合框控件&#xff0c;它結合了按鈕和下拉列表的功能&#xff0c;允許用戶從預定義的選項列表中選擇一個或多個項目。基本特性特性描述顯示方式顯示當前選中項&#xff0c;點擊后展開下拉列表編輯能力可設置為可編輯或不可編輯項目類型…

CentOS 安裝jenkins筆記

1. 安裝 Java。目前一般jdk要求11以上&#xff0c;否則會報錯2. 手動添加 Jenkins 倉庫先創建一個專門的Jenkins文件夾&#xff1a;mkdir jenkins然后 執行 sudo curl -fsSL https://pkg.jenkins.io/redhat/jenkins.io.key -o /etc/pki/rpm-gpg/jenkins.io.key 然后&#xff0…

C#枚舉:從基礎到高級的全方位解析

C#枚舉&#xff1a;從基礎到高級的全方位解析 在 C# 編程中&#xff0c;枚舉&#xff08;Enum&#xff09;是一種特殊的值類型&#xff0c;用于定義命名的常量集合&#xff0c;它為代碼提供了更強的類型安全、可讀性和可維護性。從簡單的狀態標識到復雜的位運算組合&#xff0c…

[spring6: Resource ResourceLoader ResourceEditor]-加載資源

Resource Resource 接口為處理和訪問不同類型資源&#xff08;如文件、URL、輸入流等&#xff09;提供了統一的 API&#xff0c;支持資源的存在性檢查、讀取、轉換等操作。 public interface Resource extends InputStreamSource {boolean exists();default boolean isReadable…

Spring Boot - Spring Boot 集成 MyBatis 分頁實現 PageHelper

一、PageHelper 概述 PageHelper 是一個優秀的 MyBatis 分頁插件&#xff0c;可以方便地在 Spring Boot 項目中使用 MyBatis 結合 PageHelper 實現分頁功能二、PageHelper 引入 1、依賴引入 pom.xml <properties>...<postgresql.verison>42.5.6</postgresql.ver…

jenkins自動化部署前端vue+docker項目

文章目錄一、準備工作二、編寫dockerfile文件三、新建jenkins任務一、準備工作 默認你的服務器centos已經搭建完成&#xff0c;同時已經安裝了jenkins和docker。 接下來去下載開源項目ruoyi并上傳到自己的gitee中。 二、編寫dockerfile文件 打開項目工程&#xff0c;在rouy…

opencv中contours的使用

一 Contour FindingContours使用 STL-style vector<> 表示&#xff0c;如 vector<cv::Point>, vector<cv::Point2f>。opencv中&#xff0c;使用函數 cv::findContours() 尋找contours&#xff0c; 具體函數定義如下&#xff1a;void cv::findContours(cv::In…

網絡安全初級

1、docker并配置代理 &#xff08;1&#xff09;在Ubuntu中安裝docker apt-get install docker.io docker-compose &#xff08;2&#xff09;安裝完成后&#xff0c;進入/etc/systemd/system/docker.service.d/http-proxy.conf配置文件下進行代理的配置&#xff0c;配置如圖…

JetBrains IDE 性能優化指南:idea.vmoptions 核心參數解析與配置建議

文章目錄深入解析 JetBrains IDE 的 VM 選項&#xff1a;idea.vmoptions 參數詳解一、內存與垃圾回收配置二、診斷與錯誤處理三、運行時優化參數四、模塊系統與反射控制五、特殊參數說明六、配置建議指南深入解析 JetBrains IDE 的 VM 選項&#xff1a;idea.vmoptions 參數詳解…

Datawhale AI夏令營 《基于帶貨視頻評論的用戶洞察挑戰賽》Part .1.

1. 賽題 參賽者需要構建端到端的評論分析系統&#xff0c;完成三大核心任務&#xff1a; 商品識別 輸入&#xff1a;視頻描述文本(video_desc)和標簽(video_tags)輸出&#xff1a;精準識別推廣商品名稱(Xfaiyx Smart Translator/Recorder) 多維情感分析 維度&#xff1a;情感傾…