css常用效果

button 

outline: 0;   /* 去掉 button 点击时的黄色线圈 */ 

border: none; /* 去掉 button 默认的立体效果 */

border-radius: 5px; button:hover button:active

button代码

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>按钮</title>
 6     
 7 <style type="text/css"> 
 8     
 9     button {
10         outline: 0;   /* 去掉 button 点击时的黄色线圈 */
11     }
12 
13     button[class="default"] {
14         border: none; /* 去掉 button 默认的立体效果 */
15         border-radius: 5px;
16         background-color: #63BDA8;
17         color: #7A7A7A;
18         width: 68px;
19         height: 28px;
20         font-weight: bold;
21     }
22     
23     button:hover {   /* 停留时 */
24         background-color: lightblue;
25     }
26     
27     button:active { /* 激活时 */
28         background-color: yellow;
29     }
30     
31 </style>
32 
33 </head>
34 <body>
35    
36 <h1>按钮</h1>
37 <button class="default">你好</button>
38 <hr>
39 <a href="http://www.bestcssbuttongenerator.com/" target="_blank">生button</a>
40     
41 </body>
42 </html>
View Code

 

ul

/* 得到水平菜单列表 */

ul {
list-style-type: none;  /* 清除ul样式 */
}
ul li {
display: inline;        /* li一行显示 */
}

ul代码

 

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>i</title>
 6 <style>
 7 
 8 * {margin: 0;}
 9 ul {
10     list-style-type: none;
11 }
12 ul li {
13     display: inline;
14 } 
15 
16 #left-wrap {
17     background-color: aquamarine;
18     float: left;
19     width: 20%;
20 }
21 #right-wrap {
22     background-color: azure;
23     float: right;
24     width: 80%;
25 }
26     
27 .large-menu {
28     background-color: aquamarine;
29     float: left;
30     width: 20%;
31 }
32 .content {
33     background-color: azure;
34     float: right;
35     width: 80%;
36 }
37 
38 </style>
39 
40 </head>
41 <body>
42 
43 <div id="left-wrap">
44     <ul>
45         <li>12</li>
46         <li>34</li>
47         <li>56</li>
48         <li>78</li>
49     </ul>
50 </div>
51 <div id="right-wrap">right-wrap content</div>
52 
53     
54 </body>
55 </html>
View Code

 

 

 

@media

媒体查询：根据屏幕的宽高来相应调整页面的内容，达到响应式显示的效果

@media 代码

 

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>媒介查询 @media</title>
 6     
 7 <style type="text/css"> 
 8 
 9 @media screen and ( max-width: 800px ) {
10     .small-menu { 
11         display: inline; 
12     }
13     .large-menu { 
14         display: none; 
15     } 
16 }
17 
18 @media screen and ( min-width: 801px ) and (  max-width: 1024px ) {
19     .small-menu { 
20         display: none; 
21     }
22     .large-menu { 
23         width: 100%; 
24     }
25     .large-menu ul {
26         list-style-type: none;
27     }
28     .large-menu ul li {
29         display: inline;
30     }
31     .content {
32         width: 100%;
33     }
34 }
35 
36 @media screen and ( min-width: 1025px ) {
37     .small-menu { 
38         display: none; 
39     } 
40     .large-menu li { 
41         display: inline; 
42       
43     }
44     .large-menu {
45         float: left;
46         width: 20%;
47     }
48     .content {
49         float: right;
50         width: 80%;
51     }
52     
53 }
54     
55 </style>
56 
57 </head>
58 <body>
59    
60 <h1>媒介查询 - @media</h1>
61 
62 <div class="small-menu">
63     <form action="">
64         <select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selecttedIndex].value">
65             <option value="blog.html">My Blog</option>
66             <option value="home.html">My Home</option>
67             <option value="tutorials.html">My Tutorials</option>
68         </select>
69     </form>
70 </div>
71 
72 <div class="large-menu">
73     <ul>
74         <li>
75             <a href="blog.html">My Blog</a>
76         </li>
77         <li>
78             <a href="home.html">My Home</a>
79         </li>
80         <li>
81             <a href="tutorials.html">My tutorials</a>
82         </li>
83     </ul>
84 </div>
85 
86 <div class="content">
87     <pre>
88       device-width, device-height 屏幕宽高
89       width, height               渲染窗口宽高
90       orientation                 设备方向
91       resolution                  设备分辨率
92     </pre>
93 </div>
94 
95 <script></script>
96     
97 </body>
98 </html>
View Code

 

posted @ 2015-04-14 17:11  Hi！张宝  阅读(128)  评论(0)    收藏  举报