當前位置: 摩鑫平台 >> 知識庫 >> 軟件閑敘 >> 正文
【CSS3詳解】三、美化網頁元素
發布時間:2024-04-25       編輯:網絡中心       瀏覽次數:


三、美化網頁元素

3-1、美化網頁原因

  1. 有效傳遞頁面信息

  2. 頁面漂亮可吸引用戶

  3. 凸顯頁面主體

  4. 提高用戶體驗

span標簽🚴🏽‍♀️:重點要突出的文字,使用span套起來

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #title01{
           font-size: 50px;
       }
   </style>
</head>
<body>

天水<span id="title01">姜伯約</span>
</body>
</html>

3-2、字體樣式

<!--
font-family🧑‍✈️✒️:字體
font-size🧖🏿:字體大小
font-weight👲🏻:字體粗細
color:字體顏色
-->
<style>
body{font: oblique bolder 16px "華文行楷";/*font-family: 華文行楷;*/color: crimson;}
h1{font-size: 50px;text-align: center;}.p1{font-weight: bold;}
</style>

3-3、文本樣式

  1. 顏色:color💂,rgb✍️,rgba

  2. 文本對齊方式:text-align = center

  3. 首行縮進:text-indent🤷🏼‍♂️:2em;

  4. 行高🏃🏻‍♂️‍➡️:line-height(單行文字上下居中:line-height = height)

  5. 裝飾:text-decoration

  6. 文本圖片水平對齊🪥:vertical-align✍️:middle🤼‍♂️;

<!DOCTYPE html><html lang="en"><head>
   <meta charset="UTF-8">
   <title>Title</title>

   <!--
   顏色🎢:
       單詞
       RGB 0~F
       RGBA A🕸:0~1a
   text-align: 排版💁‍♀️,居中
   text-indent: 2em; 段落首行縮進
   line-height:行高,和塊的高度一致⚉,就可以上下居中
   -->
   <style>
       h1{
           color: rgba(0,255,255,0.8);
           text-align: center;
       }
       .p1{
           text-indent: 2em;
       }
       .p4{
           background: aqua;
           height: 100px;
           line-height: 20px;
       }
       /*下劃線*/
       .l1{
           text-decoration: underline;
       }
       /*中劃線*/
       .l2{
           text-decoration: line-through;
       }
       /*上劃線*/
       .l3{
           text-decoration: overline;
       }
   </style>
   </head>
   <body>
   <p class="l1">12</p>
   <p class="l2">34</p>
   <p class="l3">56</p>
   <h1>《滕王閣序》</h1>
   <p class="p1">豫章故郡,洪都新府。星分翼軫🌗,地接衡廬🦶🏽。襟三江而帶五湖👂🏼♥️,控蠻荊而引甌越😅🔮。物華天寶,龍光射牛鬥之墟;人傑地靈,徐孺下陳蕃之榻🤨。雄州霧列,俊采星馳。臺隍枕夷夏之交🈹,賓主盡東南之美。都督閻公之雅望,棨戟遙臨;宇文新州之懿範🙎‍♂️,襜帷暫駐👨🏼‍🍼🏋🏻‍♀️。十旬休假,勝友如雲;千裏逢迎🥋,高朋滿座。騰蛟起鳳🧑🏿‍🎨,孟學士之詞宗;紫電青霜,王將軍之武庫🎨。家君作宰🔃,路出名區𓀗;童子何知,躬逢勝餞。</p><p>時維九月🥨,序屬三秋。潦水盡而寒潭清,煙光凝而暮山紫🤣🐵。儼驂騑於上路🚣🏻🪂,訪風景於崇阿;臨帝子之長洲,得天人之舊館🚒✣。層巒聳翠,上出重霄;飛閣流丹🍪,下臨無地。鶴汀鳧渚👨‍🍳,窮島嶼之縈回;桂殿蘭宮,即岡巒之體勢。</p><p>披繡闥,俯雕甍,山原曠其盈視,川澤紆其駭矚。閭閻撲地🫷🏼,鐘鳴鼎食之家;舸艦彌津,青雀黃龍之舳。雲銷雨霽,彩徹區明👳🏿‍♀️🧑🏼‍⚕️。落霞與孤鶩齊飛💖,秋水共長天一色。漁舟唱晚🦞,響窮彭蠡之濱;雁陣驚寒💁🏼‍♂️,聲斷衡陽之浦🫸🏼。</p><p class="p4">遙襟甫暢,逸興遄飛🚶‍➡️。爽籟發而清風生,纖歌凝而白雲遏。睢園綠竹,氣淩彭澤之樽;鄴水朱華🤸‍♀️,光照臨川之筆🙋🏻👨🏼‍🍼。四美具,二難並。窮睇眄於中天🌩,極娛遊於暇日。天高地迥👍🏿,覺宇宙之無窮;興盡悲來🖊,識盈虛之有數🕌。望長安於日下👨🏼‍⚖️,目吳會於雲間。地勢極而南溟深,天柱高而北辰遠🤸🏿‍♀️。關山難越,誰悲失路之人?萍水相逢,盡是他鄉之客。懷帝閽而不見,奉宣室以何年?</p>
   </body>
   </html>

3-4🏑、陰影

在這裏插入圖片描述

/*text-shadow:陰影顏色,水平偏移,垂直偏移,陰影半徑*/
#man{
   text-shadow: aqua 10px 10px 2px;}

3-5、超鏈接偽類

正常情況下:a,a:hover

a{
   text-decoration: none;
   color: #030e0c;}
   /*鼠標懸浮的顏色(只需要記住)*/
a:hover{
   color: orange;
   font-size: 50px;}
   /*鼠標按住未釋放的狀態*/
a:active{
   color: red;}

3-6☛🩸、列表

/*ul li*//*
list-style:
none 去掉原點
circle 空心圓
decimal:數字
square:正方形
*/
ul{
   background: darkgrey ;
   }
ul li{
   height: 30px;
   list-style: none;
   text-indent: 1em;
   }

3-7、背景

  • 背景顏色

  • 背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       div{
           width: 1000px;
           height: 700px;
           border: 1px solid red;
           /*默認是全部平鋪*/
           background-image: url("images/1.png");
       }
       .div1{
           background-repeat: repeat-x;
       }
       .div2{
           background-repeat: repeat-y;
       }
       .div3{
           background-repeat: no-repeat;
       }
   </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

3-8、漸變

background-color: #D9AFD9;
background-image: linear-gradient(340deg, #D9AFD9 0%, #97D9E1 100%);

https://blog.csdn.net/clover_page/article/details/130100672

作者:姜伯約

下一條🫴🏼:【CSS3詳解】二、選擇器

關閉本頁

摩鑫平台教育技術與網絡中心版權所有

©GDAFC Education Technology & Network Center, All Rights Reserved.

摩鑫平台专业提供:摩鑫平台摩鑫摩鑫娱乐等服务,提供最新官网平台、地址、注册、登陆、登录、入口、全站、网站、网页、网址、娱乐、手机版、app、下载、欧洲杯、欧冠、nba、世界杯、英超等,界面美观优质完美,安全稳定,服务一流💇🏿,摩鑫平台欢迎您。 摩鑫平台官網xml地圖