文字屬性和div容器盒的使用基礎

来源:https://www.cnblogs.com/tian-520/archive/2019/01/04/10222772.html
-Advertisement-
Play Games

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <m ...


 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .center{
11             width: 200px;
12             margin: auto;
13         }
14         /* 這裡是加粗文字 */
15         .p1 {
16             font-weight: bold;
17         }
18         /* 這裡是傾斜文字 */
19         .p2 {
20             font-style: italic;
21         }
22         /* 這裡是文字間距 */
23         .p3 {
24             letter-spacing: 10px;
25         }
26         /* 這裡 是詞 間距 */
27         .p4 {
28             word-spacing: 10px;
29         }
30         /* 這裡是首行縮進 */
31         .p5 {
32             text-indent: 10px;
33         }
34         /* 這裡是上劃線 */
35         .p6 {
36             text-decoration: overline;
37         }
38         /* 這裡是下劃線 */
39         .p7 {
40             text-decoration: underline;
41         }
42         /* 這裡是刪除線 */
43         .p8 {
44             text-decoration: line-through;
45         }
46         /* 這裡是襯托文字 */
47         .p9 {
48             font-family: serif;
49         }
50         /* 這裡是非襯托文字 */
51         .p10 {
52             font-family: sans-serif;
53         }
54         /* 這裡是容器盒的陰影 */
55         .box {
56             width: 200px;
57             height: 300px;
58             background: red;
59             box-shadow: 10px 10px 10px #ccc;
60         }
61         /* 這裡是 文字的陰影 */
62         h1 {
63             text-shadow: 10px 10px 10px #ccc;
64         }
65         /* border邊框屬性 */
66         .border{
67             width: 200px;
68             height: 200px;
69             border-radius: 50% 50%;
70             background: yellow;
71             text-align: center;
72             line-height: 200px;
73         }
74     </style>
75 </head>
76 
77 <body>
78     <div class="center">
79         <p class="p2">這裡是傾斜文字</p>
80         <p class="p3">這裡是文字間距</p>
81         <p class="p4">這裡 是詞 間距</p>
82         <p class="p5">這裡是首行縮進</p>
83         <p class="p6">這裡是上劃線</p>
84         <p class="p7">這裡是下劃線</p>
85         <p class="p8">這裡是刪除線</p>
86         <p class="p9"> 這裡是襯托文字</p>
87         <p class="p10">這裡是非襯托文字</p>
88         <div class="box">這裡是容器盒的陰影</div>
89         <h1>這裡是文字的陰影</h1>
90         <div class="border">我是一個圓</div>
91        
92     </div>
93 </body>
94 
95 </html>




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

-Advertisement-
Play Games
更多相關文章
  • (色含輕重霧,香引去來風) 在Android Studio中,將項目打包成jar包,按照網上說的方法打包完成後,在intermediates文件夾下沒有bundles,AS版本3.1.2,後來發現,原來是intermediates/packaged-classes替換了intermediates/b ...
  • 安卓端 難點有兩個 收款碼的生成和到帳監聽 需要源碼加 2442982910 ...
  • 以下均為自己在Android ble開發項目中遇到的問題 1.儘量不要在BluetoothGattCallback裡面的回調函數中執行讀寫通知操作,最多一個,因為例如在onServicesDiscovered回調函數中只會傳一個寫操作,不管裡面有多少個,而通知如setCharacteristicNo ...
  • 一、 iOS應用程式是如何啟動的: 1) main.m 中的 main 函數調用自動釋放池 (autorelease pool) 中的 UIApplicationMain 函數: @autoreleasepool { return UIApplicationMain(argc, argv, nil, ...
  • 運行App後,Android Studio顯示如圖1-1界面: 圖1-1 這是因為你連接的外部設備(比如Android手機或AVD)的SDK版本在你的電腦上沒有安裝對應的版本,所以解決辦法為點擊“Install and Continue”,安裝缺失版本安裝對應版本的SDK即可。 安裝後,Androi ...
  • 友盟的錯誤分析越來越人性化了 前提集成了友盟統計,並打包的時候保留了.dSYM文件 先看看效果 可以看到bug顯而易見的被髮現了!那個文件夾,那一行代碼 那麼怎麼才能這樣呢 首先加入符號表,就是.dSYM文件,對應版本的哦! 有人會問.dSYM文件xcode怎麼生成呢 如果沒有發現.dSYM文件就看 ...
  • 版本:EasyUI 1.7.0 在用easyui寫項目時,碰到一個combobox的奇葩bug。代碼如下: 賦值語句如下: 本來這是一個很簡單的combobox賦值,但是當我真正賦值時卻出現了問題,經常出現一個bug,就是賦值完,combobox顯示的內容是true或者false,而不是男或女,而且 ...
  • 基本選擇器: 標簽(元素)選擇器 格式 >標簽名{ 聲明的屬性} 類 選擇器 >這裡有個點(.)+類名稱{聲明的屬性} ID 選擇器 >#+id名稱{聲明的屬性} 並集(群組)選擇器 >.類名,#id名稱,標簽名{聲明的屬性} 通配符 選擇器 >*{聲明的屬性} >這個的話會用到所有body中的元素 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...