Day30

CSS

CSS常用樣式

font-family:“微軟雅黑” -設置字體

font-size: 50px -設置字體大小

font-style : italic-設置字體風格

font-weight:bolder -設置字體粗細

color: white-設置字體顏色

letter-spacing: 20px-設置文本內容的間隔

text-decoration :underline - 設置劃線

text-align:center -設置文本對齊方式

background-color:red -設置背景顏色

border: black 5px solid -設置邊框-顏色、粗細、實線

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{font-family: "微軟雅黑";/*設置字體*/font-size: 50px;/*設置字體大小*/font-style: italic;/*設置字體風格*/font-weight: bolder;/*設置字體粗細*/color: white;/*設置字體顏色*/letter-spacing: 20px;/*設置文本內容的間隔*/text-decoration: underline;/*設置劃線*/text-align: center;/*設置文本對齊方式*/background-color: red;/*設置背景顏色*/border: black 5px solid;/*設置邊框 - 顏色、粗細、實線*/}a{text-decoration: none;/*設置劃線*/}a:link {color: black}		/* 未訪問的鏈接 */a:visited {color: black}	/* 已訪問的鏈接 */a:hover {color: dodgerblue}	/* 鼠標移動到鏈接上 */a:active {color: dodgerblue}	/* 選定的鏈接 */button{background-image: url(../img/衣.jpg);/*設置背景圖片*/background-repeat: repeat-y;/*設置背景平鋪方式*/width: 500px;height: 500px;}</style></head><body><p>初心至善</p><a href="http://www.baidu.com">百度一下，你就知道</a><br /><button>普通按鈕</button></body>
</html>

盒子模型

< div> < /div>

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{border: red 1px solid;width: 200px;height: 200px;/*margin: 50px; 設置上下左右外邊距*/margin-top: 50px;/*設置上外邊距*/margin-bottom: 50px;/*設置下外邊距*/margin-left: 50px;/*設置左外邊距*/margin-right: 50px;/*設置右外邊距*/padding: 50px;/*padding: 50px; 設置上下左右內邊距*/padding-top: 50px;/*設置上內邊距*/padding-bottom: 50px;/*設置下內邊距*/padding-left: 50px;/*設置左內邊距*/padding-right: 50px;/*設置右內邊距*/margin: 0 auto;/*水平居中,0表示上下外邊距為0。auto表示左右外邊距自動調整*/}</style></head><body><div>初心至善</div></body>
</html>

注意：
1.內邊距會把盒子撐變形
2.為了兼容IE老版本，能用外邊距就用外邊距

定位

position: relative-相對定位：保留原有位置，針對于原有位置進行位移

position:absolute-絕對定位：不保留原有位置，找尋父級標簽，判斷父級標簽是否有position樣式，如果有就按照父級標簽位移，如果沒有就繼續向上找尋，直到body標簽為止。

position:fixed-固定定位：將組件固定到頁面的某個位置

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 80px;}#box01{border: red 1px solid;width: 100px;height: 100px;position: absolute;/*絕對定位：不保留原有位置，找尋父級標簽，判斷父級標簽是否有position樣式，如果有就按照父級標簽位移，如果沒有就繼續向上找尋，直到body標簽為止*/top:50px;left:50px;}#box02{border: green 1px solid;width: 100px;height: 100px;position: relative;/*相對定位：保留原有位置，針對于原有位置進行位移*/top: 50px;left: 50px;}#box03{border: blue 1px solid;width: 100px;height: 100px;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{position: fixed;/*固定定位：將組件固定到頁面的某個位置*/top: 50%;left: 90%;}</style></head><body><a name="top"></a><div><a href="#top">置頂</a></div><a href="#new01">法治</a><!--鏈接到錨點的位置--><a href="#new02">國際</a><!--鏈接到錨點的位置--><a href="#new03">娛樂</a><!--鏈接到錨點的位置--><a name="new01"></a><!--下錨點--><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><a name="new02"></a><!--下錨點--><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><a name="new03"></a><!--下錨點--><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1></body>
</html>

浮動

浮動可以幫助我們更好進行頁面排版，使原本豎著排列的盒子可以橫向排列起來。

副作用：因為浮動會使元素脫離了標準的文檔流，從而導致父級元素無法被撐開。

解決辦法：添加空盒子

在被浮動的元素后面，添加一個空的div，并且設置一個clear類，并付給該div

.clear{clear:both;}
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 50%;height: 100px;background-color: red;float: left;}#box02{width: 50%;height: 100px;background-color: blue;float: right;}.clear{clear: both;/*清除浮動影響 */}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>
注意： clear屬性的作用不是“清除”浮動元素，而是阻止元素與前面的浮動元素并排，強制將元素放到浮動元素的下方。因此，clear并不是在“清除”浮動元素本身，而是在清除浮動元素對后續普通流元素的影響。這確保了包含它們的父容器能夠正確擴展以包含所有子元素的高度。換句話說，它支撐了父容器，使父容器擴展到足以包含浮動元素。

擴展

repeat-x：對圖片在水平方向上重復

#EAF4FF：在背景圖片未覆蓋到的區域顯示此顏色

border-radius: 5px：使得按鈕的四個角都具有5像素的圓角，使按鈕的外觀更加柔和。

border-radius:50%：這條規則將圖像的圓角半徑設置為元素的50% ，使其變成一個圓。（如果圖像不是正方形，那么這會使圖像變成一個橢圓形。）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: url(../img/漸變色.jpg) center top repeat-x #EAF4FF;}button{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 5px;/*圓角屬性*/box-shadow: 10px 10px 5px gainsboro;/*添加按鈕陰影 X軸偏移量 Y軸偏移量 陰影模糊半徑*/text-shadow: 5px 5px 5px black;/*添加文本陰影 X軸偏移量 Y軸偏移量 陰影模糊半徑*/}img{border-radius:50%;}</style></head><body><button>普通按鈕</button><br /><img src="../img/衣.jpg" /></body>
</html>

HTML5新特性

定義文檔類型

在文件的開頭總是會有一個標簽

語言	文檔類型聲明方式
html4
html5

新增語義化標簽

標簽	描述
	頭部標簽
	導航標簽
本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處：http://www.pswp.cn/bicheng/19905.shtml 繁體地址，請注明出處：http://hk.pswp.cn/bicheng/19905.shtml 英文地址，請注明出處：http://en.pswp.cn/bicheng/19905.shtml 如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！相關文章電動汽車電子系統架構電動汽車的普及正在穩步發展，供應鏈的各個環節也在發生變化。它涵蓋了制造電動汽車零件的原材料、化學品、電池和各種組件。與此同時，汽車充電基礎設施也參與其中，它們正經歷一個歷史性的階段，經過徹底的重新設計。它們的電氣化以… 閱讀更多... Wpf 使用 Prism 實戰開發Day30 登錄界面設計一.準備登錄界面圖片素材（透明背景圖片） 1.把準備好的圖片放在Images 文件夾下面，格式分別是.png和.ico 2.選中 login.png圖片鼠標右鍵，選擇屬性。生成的操作選擇>資源 3.MyTodo 應用程序右鍵，屬性&a… 閱讀更多... 如何修改開源項目中發現的bug？如何修改開源項目中發現的bug？目錄如何修改開源項目中發現的bug？第一步：找到開源項目并建立分支第二步：克隆分支到本地倉庫第三步：在本地對項目進行修改第四步：依次使用命令行進行操作注意：Gi… 閱讀更多... 地質災害位移應急監測站地質災害位移應急監測站是一種專門用于地質災害預警和應急響應的設施，它能夠實時監測和分析山體、建筑物、管道等的位移變化情況。以下是關于地質災害位移應急監測站的詳細介紹：主要組成部分傳感器：安裝于需要監測的位置，用于… 閱讀更多... RK3588+FPGA+AI高性能邊緣計算盒子，應用于視頻分析、圖像視覺等搭載RK3588（四核 A76四核 A55），CPU主頻高達 2.4GHz ，提供1MB L2 Cache 和 3MB L3 ，Cache提供更強的 CPU運算能力，具備6T AI算力，可擴展至38T算力。產品規格系統主控CPURK3588，四核… 閱讀更多... Nginx服務器替換SSL證書記得要重啟輸入訪問域名，發現https證書過期了，果斷申請好ssl證書，并在Nginx服務器上將原證書替換成新申請的證書。打開瀏覽器輸入網址確認一看，還是原來的證書并沒有替換成功?感覺不合常理以下開啟了證書為什么替換不成功的排查 1、清除… 閱讀更多... GUI 02：布局管理器相關知識，AWT 的 3 種布局管理器應用，以及嵌套布局的使用一、前言記錄時間 [2024-05-31] 前置文章 GUI 01：GUI 編程概述，AWT 相關知識，Frame 窗口，Panel 面板，及監聽事件的應用本文講述了 GUI 編程種布局管理器的相關知識，以及 AWT 的 3 種布局管理器——流式布… 閱讀更多... 【FPGA】Verilog語言從零到精通接觸fpga一段時間，也能寫點跑點吧……試試系統地康康呢~這個需要耐心但是回報巨大的工作。正原子&&小梅哥 15_語法篇：Verilog高級知識點_嗶哩嗶哩_bilibili 1Verilog基礎 Verilog程序框架：模塊的結構類比：c語言的基礎… 閱讀更多... P3881 最小值最大二分：枚舉兩個牛之間的最小距離，左端點是1，右端點是籬笆總長度。 Check數組：如果兩頭牛之間距離是Mid不合法，則返回0（false）；如果兩頭牛之間距離是Mid合法&#xf… 閱讀更多... 去噪擴散概率模型在現代技術中的應用：圖像生成、音頻處理到藥物發現去噪擴散概率模型（DDPMs）是一種先進的生成模型，它通過模擬數據的噪聲化和去噪過程，展現出多方面的優勢。DDPMs能夠生成高質量的數據樣本，這在圖像合成、音頻生成等領域尤為重要。它們在數據去噪方面表現出色&#xff0… 閱讀更多... 瑞吉外賣項目學習筆記（二）后臺系統的員工管理業務開發一、完善登錄功能 1.1 問題分析 1.2 代碼實現 package com.itheima.reggie.filter;//這是一個過濾器類 //登錄檢查過濾器import com.alibaba.fastjson.JSON; import com.itheima.reggie.common.R; import lombok.extern.slf4j.Slf4j; import org.slf4j.Logger; import org.slf… 閱讀更多... 華為OD機試-最大坐標值題目描述與示例題目描述小明在玩一個游戲，游戲規則如下：在游戲開始前，小明站在坐標軸原點處（坐標值為 0）給定一組指令和一個幸運數，每個指令都是一個整數，小明按照指定的要求前進或者后退指… 閱讀更多... 解析Java中1000個常用類：FunctionalInterface類，你學會了嗎？ Java 8 引入了一系列新的特性和改進，其中之一便是函數式編程。函數式接口（Functional Interface）是函數式編程的核心概念之一。本文將深入探討 FunctionalInterface 注解，介紹其用法、重要性，并通過示例展示如何在實際開發中應用函數式接口。什么是函數式接口？函數式… 閱讀更多... 有向圖的拓撲排序文章目錄概念及模板例題雜務概念及模板有向圖的拓撲排序是指將有向無環圖中的所有頂點排成一個線性序列，使得圖中任意一對頂點u和v，若邊(u, v)在圖中，則u在該序列中排在v的前面。例如，假設有n個任務，這些任務需… 閱讀更多... HarmonyOS鴻蒙學習筆記（28）@entry和@Component的生命周期 entry和Component的生命周期 entry和Component的關系Component生命周期Entry生命周期生命周期流程圖生命周期展示示例代碼參考資料 HarmonyOS的生命周期可以分為Compnent的生命周期和Entry的生命周期，也就是自定義組件的生命周期和頁面的生命周期。 entry和Compone… 閱讀更多... 【傳知代碼】雙深度學習模型實現結直腸癌檢測（論文復現）前言：在醫學領域，科技的進步一直是改變人類生活的關鍵驅動力之一。隨著深度學習技術的不斷發展，其在醫學影像診斷領域的應用正日益受到關注。結直腸癌是一種常見但危害極大的惡性腫瘤，在早期發現和及時治療方面具有重要意義。然而… 閱讀更多... 快手發布大模型產品“可圖”，超20種創新AI圖像玩法限免上線近日，快手自研大模型產品“可圖”（Kolors）正式對外開放，支持文生圖和圖生圖兩類功能，已上線20余種AI圖像玩法。目前，用戶可以通過“可圖大模型”官方網站和微信小程序，免費使用各項AI圖像功能。… 閱讀更多... 純分享#126個電商平臺集合（包含60個不同國家）值得一看 01 亞洲中國淘寶：擁有大量的賣家和商品種類，主要面向中國市場。天貓:淘寶旗下的B2C電商平臺，提供品質保證、正品保障的商品。京東:中國第二大B2C電商平臺，提供品質保證、正品保障的商品。蘇寧易購: 中國家電連鎖巨頭蘇寧旗下的… 閱讀更多... 反VC情緒：加密市場需要新的分布式代幣發行方式 GME事件 GME事件反應了社交媒體在金融決策中的影響力，散戶投資者群體通過集體行動，改變了很多人對股市的看法和參與方式。 GME事件中，meme扮演了核心角色。散戶投資者使用各種meme來溝通策略、激勵持股行為，創造了一種反對華爾街… 閱讀更多... 【車載開發系列】汽車開發常用工具說明【車載開發系列】汽車開發常用工具說明【車載開發系列】汽車開發常用工具說明【車載開發系列】汽車開發常用工具說明一. CANbedded二. Davinci Configurator Pro三. Davinci Developer-AUTOSAR軟件組件設計工具四. MICROSAR五. MICROSAR OS六. CANdelaStudio七. Volcano VSB八… 閱讀更多... 最新文章通過Location API精準獲取位置信息并優化定位精度！構建可擴展的狀態系統：基于 ArkTS 的模塊化狀態管理設計與實現重生之我在暑假學習微服務第二天《MybatisPlus-下篇》系統整理Python的條件語句和常用方法記錄個IAR程序下載后硬件復位不運行，必須斷電復位才運行的問題觀察者模式（Observer Pattern）和發布-訂閱模式（Publisher-Subscriber Pattern） 2025年接口技術的十字路口：當MCP遇見REST、GraphQL與gRPC 【CTF-WEB-反序列化】利用__toString魔術方法讀取flag.php Copyright @ 2022~2023

Day30

Day30

CSS

CSS常用樣式

盒子模型

定位

浮動

擴展

HTML5新特性

定義文檔類型

新增語義化標簽

相關文章