CSS学习笔记(一)-7.小案例-导航侧边栏样式 

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-12 17:30:10
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-12 17:42:00
 7  * @Description: 
 8  * @FilePath: \css\小案例.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>小案例</title>
18     <style>
19         a {
20             height: 40px;
21             width: 230px;
22             display: block;
23             text-indent: 2em;
24             text-decoration: none;
25             color: white;
26             background-color: gray;
27             font-size: 15px;
28             line-height: 40px;
29         }
30         
31         a:hover {
32             background-color: orange;
33         }
34     </style>
35 </head>
36 
37 <body>
38 
39     <a href="#">手机 电话卡</a>
40 
41     <a href="#">电脑 盒子</a>
42 
43     <a href="#">笔记本 平板</a>
44 
45     <a href="#">出行 穿戴</a>
46 
47     <a href="#">健康 儿童</a>
48 
49 </body>
50 
51 </html>
View Code

 

 

posted @ 2021-07-12 17:43  kaer_invoker  阅读(100)  评论(0)  编辑  收藏  举报