重學前端002 --響應式網頁設計 CSS 基礎

文章目錄

  • css 樣式
  • 特殊說明

根據在這里 Freecodecamp 實踐,調整順序后做的總結。

css 樣式

 body {background-color: red;  # 跟background-image 不同時使用background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);font-family: sans-serif;padding: 20px;
}h1 {font-family: Impact, serif;font-size: 40px;margin-top:0;  # 清除默認的上邊距margin-bottom:15px;  # 修改默認的下邊距text-align: center;  # left/right
}div {width: 300px;  # width: 80%;max-width: 500px;background-color: burlywood;background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255)       100%) ;  # 漸變色opacity: 0.5; # 不透明度margin-top: auto;  # margin: auto;   #margin: 5px;  margin-bottom: auto;margin-left: auto;margin-right: auto;padding-left: 20px;  # padding: 20px; # 效果等同于下面四個加起來padding-right: 20px;padding-top:20px;padding-bottom: 20px;border-left: 10px solid black; # 下面三個的縮寫border-left-width: 10px;border-left-style: solid;  # 邊框可見。 如果未設置顏色,則默認使用黑色。取值:doubleborder-left-color:black;box-shadow: 5px 5px red;  # 不寫默認引用是黑色box-shadow: 5px 5px 5px green;  # 添加了模糊效果,值越大越模糊box-shadow: 0 0 0 5px blue; #  添加了擴大陰影范圍,值越大陰影越大 (除了0,必須帶單位,顏色可以使用rgba,設置不透明度)
}hr {height: 2px;border-width: 1px; border-color: brown;  # 邊框顏色background-color: red;margin-top: 25px;
}p {font-family: sans-serif;  # 字體  # font-family: Impact, serif;  # 字體font-style: italic;  # 斜體font-size: 40px;  # 字體大小text-align: center;width: 75%;display: inline-block;margin-top: 5px;margin-bottom: 5px;}	img {display: block;  # 使圖片成為行元素display: inline-block;   # inline-block 元素只會占用其內容的寬度。margin-left:auto;margin-right:auto;
}a {color: black;  # 超鏈接的顏色
}a:visited {  # 超鏈接被訪問后的顏色color: grey;
}a:hover {  # 鼠標經過超鏈接時的顏色color: brown;
}a:active {  # 超鏈接被點擊的時候的顏色color: white;
}footer {font-size: 14px;
}

特殊說明

  1. h 標題
    標題元素(如 h1、h2)的排版是由用戶瀏覽器的默認值設置的。可以對他們字體大小進行設置。
    瀏覽器為h1元素設置了一些默認的上邊距和下邊距。

  2. P 元素
    當兩個p元素顯示為行內元素,并且需要顯示到一行時,需要把兩個p元素之間的空格去掉,兩個元素緊緊挨著。

  3. hr 分割線
    總的線條的寬度=自身的寬度+上下邊框的寬度

  4. img 圖片
    圖片是內聯因素,不會單獨占據一行,使用display:block 可以使它變成行元素。

  5. 其他
    背景顏色background-color和背景圖片background-image兩個屬性不能同時使用;

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

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

相關文章

Zig高并發爬取數據簡潔模版

上文中我們介紹了Zig語言得爬蟲的有些優劣勢,想必大家對于自身項目選擇那種語言做爬蟲應該有些思路了,今天我將使用Zig的標準庫來構建一個簡單的高并發爬蟲模板。由于Zig的異步機制和標準庫中的http模塊,我們可以實現一個基于事件循環的爬蟲。…

IS-IS 協議 | LSP 傳輸與鏈路狀態數據庫同步機制

略作整理,待校。IS-IS 中 SRM 與 SSN 標志的作用及協同機制 SRM 和 SSN 標志的作用 在 IS-IS 協議中,SRM 和 SSN 是兩個關鍵標志,用于控制和優化 LSP(Link State PDU,鏈路狀態信息)在網絡中的泛洪與同步過程。 一、SRM…

xxl-job 改造適配pg數據后的Jenkins自動部署

接上文適配pg數據庫之后需要進行部署,便有了此文 1.下載并安裝Jenkins如下: https://mirrors.jenkins.io/war-stable/2.504.3/jenkins.war nohup java -jar jenkins.war --httpPort8080 & 啟動Jenkins并解鎖安裝需要的環境,git&#xff0…

數據庫Oracle從入門到精通!第四天(并發、鎖、視圖)

八、并發控制數據庫是一個共享資源,可以為多個應用程序所共享,這些程序可以串行執行(排隊執行),但是很多情況下,可能出現多個程序或一個程序中的多個進程并行的執行,這就是數據庫的并行操作&…

EXCEL(帶圖)轉html

文章目錄敘述1、效果2、excel 轉換主邏輯3、其他補充3.0 主前端bootstrap3.1 my.css:3.2 my.js3.3 入口home.html3.4 Data.ashx敘述 要實現H5 展示excel 查詢 了一下沒有好的辦法,自己寫了一個,簡單記錄一下 1、效果 用bootstrap 根據sheet做了一個菜單。 2、exc…

小程序富文本Editor插入圖片、超鏈接、公式等的一次嘗試

小程序插入圖片 通過EditorContext.insertImage接口可以實現圖片的插入: EditorContext.insertImage({src,width,height,data, })如何插入超鏈接、公式、視頻、表格等等? 通過EditorContext.insertCustomBlock應該是可以實現的,具體實現方式我沒有了…

傳輸層協議TCP、UDP

傳輸層協議TCP、UDP 1、TCP和UDP報文格式 傳輸層協議TCPvsUDP 傳輸層主要兩個傳輸協議,分別是TCP和UDP,負責提供流量控制、排序服務和錯誤校驗。 (1)TCP是面向連接的,一般用于傳輸數據量比較少,且對可靠性要…

設計模式—專欄簡介

大學總是忙著參加ACM實驗室的各種事情,到了畢業的時候,對于設計模式也是僅了解單例模式。畢業后,剛開始代碼也是亂寫一通,完全沒有章法。整個開發環境也是為了解決問題,從來沒有考慮結構化什么的(沒辦法&am…

面試150 鏈表的復制

思路 python可以使用調庫法,使用深度拷貝 """ # Definition for a Node. class Node:def __init__(self, x: int, next: Node None, random: Node None):self.val int(x)self.next nextself.random random """class Solution:de…

MySQL分布式ID沖突詳解:場景、原因與解決方案

引言 在分布式系統開發中,你是否遇到過這樣的崩潰時刻?——明明每個數據庫實例的自增ID都從1開始,插入數據時卻提示“Duplicate entry ‘100’ for key ‘PRIMARY’”;或者分庫分表后,不同庫里的訂單ID竟然重復&#x…

c++文字游戲_闖關打怪2.0(開源)

本次更新內容: 1.增強對手性能 2.可暫停(按N) 3.修復些許bug 4.增加boos關(第10、20、30...關) 1. 游戲概述 本游戲是一個基于Windows控制臺的回合制戰斗游戲,采用俯視視角的2D平面設計。玩家控制角色"p"在1325大小的封閉場景中與敵人"@"戰斗,通過…

Java學習第十二部分——idea各種項目簡介

目錄 一.前言 二.語言介紹 三.生成器介紹 四.拓展 一.前言 打開idea項目創建時發現如上情況,“新建項目”下面的是語言,生成器下面的是這些語言對應的生成器工具,本文將簡單介紹。 二.語言介紹 Java 用途:Java是一種廣泛使…

Codeforces Round 868 (Div. 2) D. Unique Palindromes(1900,構造)

Problem - D - Codeforces 不錯的字符串構造體,記錄一下 首先注意到k≤20這一條件。對于一個長度為n的字符串,最多有n個不同的回文子串,這種情況出現在所有字符都相同時。因此,限制條件中的xi必須滿足xi≤ci,且相鄰兩…

ClickHouse 全生命周期性能優化

引言 ClickHouse作為列式存儲的OLAP數據庫,以其極致的查詢性能著稱,但"高性能"并非開箱即用。不合理的表設計、SQL寫法或集群配置,可能導致性能衰減甚至服務不可用。本文基于ClickHouse 24.3版本,從設計規范、開發規范、…

Linux sed 命令 詳解

在 Linux 系統中,sed(Stream Editor)是一個非常強大且靈活的文本處理工具。它不僅可以用于簡單的文本替換、刪除和插入操作,還能實現復雜的文本轉換任務。 📌 一、什么是 sed? sed 是一個基于模式匹配對文…

項目進度同步不及時,如何提升信息透明度

項目進度同步不及時的核心問題包括溝通渠道不暢通、缺乏統一的信息平臺、未建立明確的進度更新機制、團隊意識不足、責任劃分不明確等。其中,缺乏統一的信息平臺最為關鍵。統一的信息平臺能夠確保所有相關人員實時掌握最新的進度狀態,避免信息孤島&#…

使用各種CSS美化網頁

實驗目的1.理解CSS的概念,掌握CSS定義樣式的方法,具備使用CSS和相關庫進行界面樣式設計的能力。 2.掌握Bootstrap 5的基本使用方法。3.Bootstrap框架練習實驗步驟1. 實驗準備創建一個HTML文件(如 index.html)。引入Bootstrap5的CS…

在PPT的文本框中,解決一打字,英文雙引號就變成中文了

問題:在制作PPT的過程中,插入文本框,在里面輸入代碼類的格式時,使用英文的雙引號"",但是只要在后面輸入內容,或者逗號等,英文雙引號就變成中文了,很煩原因:大概…

iOS 證書過期如何處理

找到鑰匙串位置創建新的CSR文件。點擊菜單中鑰匙串訪問—>證書助理—>從證書頒發機構請求證書…進入證書助理,填寫信息(用戶名稱和郵箱隨便寫),請求是 選擇 存儲到磁盤創建好CSR文件,回到developer 證書管理中心…

CODESYS + 全志T113-i + 國產系統OneOS,打造新一代工業控制解決方案!

創龍科技與中移物聯網有限公司、CODESYS攜手合作,成功實現了T113-i工業評估板對國產系統OneOS CODESYS軟件的適配,此舉將讓工業自動化領域的工程師們更高效地開發,并為眾多企業產品的快速上市提供強有力的保障。 解決方案簡介 CODESYS簡介 …