前端基础 Day04

CSS（2）

3. 美化网页元素

一、为什么要美化网页（重点看代码的注释哦）

有效传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

span标签：重点要突出的字，使用span标签套起来

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  
 7      <style>
 8          #hahaha{
 9              font-size: 50px;
10          }
11      </style>
12  </head>
13  <body>
14  
15  欢迎学习<span id="hahaha">java</span>
16  
17  </body>
18  </html>

二、字体样式

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  
 7      <!--font-family: 字体
 8      font-size: 字体大小
 9      font-weight: 字体粗细
10      color: 字体颜色
11      -->
12      <style>
13          body{
14              font-family: "Adobe Hebrew";
15              font-family: 华文楷体;
16  
17          }
18          h1{
19              font-size: 50px;
20          }
21          .p1{
22              font-weight: bold;
23          }
24      </style>
25  </head>
26  <body>
27  <h1>轻音少女</h1>
28  <p class="p1">
29  《轻音少女》是由日本漫画家kakifly创作的四格漫画作品。
30  </p>
31  <p>
32  自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《Manga Time Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。
33  </p>
34  <p>
35      其后，在《Manga Time Kirara Carat》2011年3月号宣布复刊 [1]  ，漫画分为大学和高中两个故事分别进行，《Manga Time Kirara》2011年5月号连载平泽唯、秋山澪、田井中律、琴吹䌷四人的大学剧情，《Manga Time Kirara Carat》2011年6月号连载中野梓与其朋友的高中剧情，两个故事分别于《Manga Time Kirara》2012年7月号和《Manga Time Kirara Carat》2012年8月号同时完结，单行本于2012年10月12日和11月12日分别发行销售，分大学与高中共2卷。
36  </p>
37  </body>
38  </html>
39  <!--字体风格-->
40  <style>
41      p{
42          font:oblique bolder 12px 华文楷体;
43      }
44  </style>

三、文本样式

颜色 color rgb rgba
对齐方式 text-align = center
首行缩进 text-indent: 2em;
行高 line-height: 单行文字上下居中！ line height = height
装饰 deraction
文本图片水平对齐 vertical-align: middle

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <!--
 7      颜色：单词；RGB 0~F；RGBA （0，255，255）A：0~1透明度
 8  
 9      text-align:  排版
10      text-indent: 2em;  断落首行缩进
11      height: 50px;
12      line-height: 50px;
13      行高，和 块的高度一致，就可以上下居中
14      text-decoration: underline;   下划线
15      -->
16      <style>
17          h1{
18              color: #ff8cec;
19              text-align: center;
20          }
21          .p1{
22              text-indent: 2em;
23          }
24          .p3{
25              background: #f6dcff;
26              height: 50px;
27              line-height: 50px;
28          }
29          .l1{
30              text-decoration: underline;
31          }
32          .l2{
33              text-decoration: line-through;
34          }
35          .l3{
36              text-decoration: overline;
37          }
38      </style>
39  </head>
40  <body>
41  <p class="l1">11</p>
42  <p class="l2">22</p>
43  <p class="l3">33</p>
44  <h1>轻音少女</h1>
45  <p class="p1">
46      《轻音少女》是由日本漫画家kakifly创作的四格漫画作品。
47  </p>
48  <p>
49      自2007年5月在芳文社所属四格漫画月刊《Manga Time Kirara》上开始连载，2008年10月开始同时在芳文社杂志《Manga Time Kirara Carat》上隔月连载，于《Manga Time Kirara》2010年10月号完结，单行本于2007年4月26日开始发行销售，共出版4卷。
50  </p>
51  <p class="p3">
52      其后，在《Manga Time Kirara Carat》2011年3月号宣布复刊 [1]  ，漫画分为大学和高中两个故事分别进行，《Manga Time Kirara》2011年5月号连载平泽唯、秋山澪、田井中律、琴吹䌷四人的大学剧情，《Manga Time Kirara Carat》2011年6月号连载中野梓与其朋友的高中剧情，两个故事分别于《Manga Time Kirara》2012年7月号和《Manga Time Kirara Carat》2012年8月号同时完结，单行本于2012年10月12日和11月12日分别发行销售，分大学与高中共2卷。
53  </p>
54  </body>
55  </html>

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  <!--    水平对齐  参照物 ， -->
 7      <style>
 8          img,span{
 9              vertical-align: middle;
10          }
11      </style>
12  </head>
13  <body>
14  
15  <p>
16      <img src="images/轻音少女.png" alt="">
17      <span>k on k on k on k on k on k on</span>
18  </p>
19  
20  </body>
21  </html>

四、超链接伪类

正常情况下，a，a：hover就够用了，即前两个。

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6  
 7      <style>
 8          /*默认的颜色*/
 9          a{
10              text-decoration: none;
11              color: black;
12          }
13          /*鼠标悬浮的颜色*/
14          a:hover{
15              color:pink;
16              font-size: 30px;
17          }
18          /*鼠标按住未释放的状态*/
19          a:active{
20              color: yellow;
21          }
22          a:link{
23              color: darkblue;
24          }
25          a:visited{
26              color: darkgray;
27          }
28          /*text-shadow: 阴影颜色，水平偏移，垂直便宜，阴影半径*/
29          #set{
30              text-shadow: #4ccfff 10px 10px 2px;
31          }
32      </style>
33  </head>
34  <body>
35  
36  <a href="">
37      <img src="images/呆唯.jpg" alt="">
38  </a>
39  <p>
40      <a href="">轻音少女</a>
41  </p>
42  <p>
43      <a href="">呆唯</a>
44  </p>
45  <p id="set">
46      吉他手
47  </p>
48  </body>
49  </html>

阴影效果👆

五、列表

 1 /*去网页里调块的宽度*/
 2  /*去中间白条，把背景设为和ul一样*/
 3  #nav{
 4      width: 227px;
 5      background: antiquewhite;
 6  }
 7  .title{
 8      font-size:18px;
 9      font-weight: bold;
10      text-indent: 1em;
11      line-height: 30px;
12      color: crimson;
13      background: burlywood;
14  }
15  a{
16      text-decoration: none;
17      font-size: 14px;
18      color: black;
19  }
20  a:hover{
21      color: coral;
22      text-decoration: underline;
23  }
24  /*ul li*/
25  /*list-style
26  none 去掉圆点
27  circle 空心圆
28  decimal  数字
29  square  正方形
30  */
31  ul{
32      background: antiquewhite;
33  }
34  ul li{
35      height: 30px;
36      list-style: none;
37  
38  
39  }

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <link rel="stylesheet" href="css/style.css">
 7  </head>
 8  <body>
 9  <div id="nav">
10  <h2 class="title">全部商品分类</h2>
11  <ul>
12      <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
13      <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
14      <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
15      <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
16      <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个性化妆</a></li>
17      <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
18      <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
19      <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
20  </ul>
21  </div>
22  </body>
23  </html>

六、背景

图片平铺

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         div{
 9             width: 1000px;
10             height: 700px;
11             border: 1px solid red;
12             background-image: url("images/violet1.png");
13             /*默认是全部平铺的 repeat*/
14         }
15         .div1{
16             background-repeat: repeat-x;
17         }
18         .div2{
19             /*颜色、图片、图片位置、平铺方式*/
20             background:white url("images/violet2.png") 200px 250px no-repeat;
21         }
22     </style>
23 </head>
24 <body>
25 
26 <div class="div1"></div>
27 <div class="div2"></div>
28 <div class="div3"></div>
29 <div class="div1"></div>
30 
31 </body>
32 </html>

七、渐变

http://www.grablent.com 上不去。。。

1 .div3{
2     /*background-color: #FFFFFF;*/
3     background-image: linear-gradient(19deg,#21D4FD 0%,#00ff4e 100%);
4 }

posted @ 2021-03-29 11:43 825728422 阅读(71) 评论(0) 收藏举报

刷新页面返回顶部

825728422

前端基础 Day04

CSS（2）

3. 美化网页元素

一、 为什么要美化网页（重点看代码的注释哦）

二、 字体样式

三、 文本样式

四、 超链接伪类

五、列表

六、背景

七、 渐变

公告

一、为什么要美化网页（重点看代码的注释哦）

二、字体样式

三、文本样式

四、超链接伪类

七、渐变