网页常用效果图设计

一、常用hover效果

　　　1、本级和下一级都有hover效果

　　　效果：本级hover边框，内部也有会hover效果。应用格式标签属性 hover 标签属性{}

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         
 9         <style>    
10             body{
11                 margin:0;
12             }
13             .c0{
14                 background-color:green;
15                 width:80px;
16                 height:80px;
17                 border:2px solid transparent;
18             }
19             .c0:hover{
20                 border:2px solid red;
21             }
22             .c0:hover .c2{
23                 color:red;
24                 font-size:20px;
25             }
26             
27         </style>
28     </head>
29     <body>
30         <div class="c0">
31             <div class="c1">123</div>
32             <div class="c2">abc</div>
33         </div>
34     </body>
35 </html>

View Code

　　　2、盒子hover盒子

　　　　这里插入一个规则。覆盖优先级规则：1、同级有长宽空div 文字图片先有谁谁就全显示，排在后面的地方不够排就被覆盖。覆盖优先级位置决定。

　　　　主要知识点：position：fixed固定在界面中央。position：relative 用在外框。position：absolute用在内盒。

　　　　　　　　　　text-align：center ------>局中位置总结：a）文字局中，text-align：center 。b）盒子局中，margin：0 auto；

　　　　　　　　　　鼠标停滞动态图片总结：先想到用hover，a）两个盒子，鼠标停滞后显示的盒子，格式为标签属性（先显示）：hover 标签属性（后显示），常用，hover，visibility属性，hidden和visible值。b）一个盒子鼠标停滞先显示的透明，然后显示效果。常用比如，border：20px，solid，transparent。

　　　　　　　　　　两种图片透明：opacity：0.6 background-color：rbga(0,0,0,0.7)注意一定带着a

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         
 9         <style>    
10             body{
11                 margin:0;
12             }
13             .c0{                
14                 width:800px;
15                 height:800px;
16                 border:2px solid transparent;
17                 overflow:hidden;
18                 position:relative;
19             }
20             .c0:hover .conte{
21                 visibility:visible;
22             }
23             .c0 .conte{
24                 <!--background-color:black;
25                 opacity:0.6;-->
26                 background-color:rbga(0,0,0,0.7);
27                 position:absolute;
28                 top:0;
29                 right:0;
30                 bottom:0;
31                 left:0;
32                 color:white;
33                 text-align:center;
34                 visibility:hidden;
35             }            
36             
37         </style>
38     </head>
39     <body>
40         <div class="c0">
41             <div class="cpicture">
42                 <img src="zhuomian.jpg">
43             </div>
44             <div class="conte">
45                 <div>11111</div>
46                 <div> 22222</div>
47             </div>
48         </div>
49     </body>
50 </html>

View Code

二、边框效果

　　　1、去边框闪烁

　　　　效果：鼠标放在内容上时，边框不自然呈现，有闪烁现象。

　　　　先看一下未经过处理的效果。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         
 9         <style>    
10             body{
11                 margin:0;
12             }
13             .c0{
14                 background-color:red;
15                 width:30px;
16                 height:90px;
17             }
18             .c0:hover{
19                 border:20px solid blue;
20             }
21         </style>
22     </head>
23     <body>
24         <div class="c0"></div>
25     </body>
26 </html>

View Code

　　　　再看一下经过处理后的效果。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         
 9         <style>    
10             body{
11                 margin:0;
12             }
13             .c0{
14                 background-color:red;
15                 width:30px;
16                 height:90px;
17                 border:2px solid transparent;
18             }
19             .c0:hover{
20                 border:2px solid blue;
21             }
22         </style>
23     </head>
24     <body>
25         <div class="c0"></div>
26     </body>
27 </html>

View Code

　　　　本质：未处理的，在鼠标放置时，因为多加了边框所以大小变化了。导致闪烁的效果。处理的思路就是先加上边框设置为透明。

　　　2、利用边框构图

　　　　利用边框特性构造一个小的黑色三角形。当两边都出现不一致的颜色边框的时候就会出现锐角。两种颜色在一起汇聚到一个直角，就会按照各自的宽度比例产生锐角。

　　　　下面的例子构造一个立体效果。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         
 9         <style>    
10             body{
11                 margin:0;
12             }
13             .c0{                
14                 width:20px;
15                 height:20px;
16                 border-top:10px solid red;
17                 border-right:10px solid black;
18             }
19             
20         </style>
21     </head>
22     <body>
23         <div class="c0"></div>
24     </body>
25 </html>

View Code

　　　　下面例子构造了一个真正的三角形，注意一定加display：inline-block，否则边框是沿着body布置的。如果想获得真正三角形在此基础上将其他三遍的颜色改为透明。即出现直角朝下的等腰直角三角形。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         
 9         <style>    
10             body{
11                 margin:0;
12             }
13             .c0{                
14                 
15                 border-top:20px solid red;
16                 border-right:20px solid black;
17                 border-bottom:0px;
18                 border-left:20px solid green;
19                 display:inline-block;
20             }
21             
22         </style>
23     </head>
24     <body>
25         <div class="c0"></div>
26     </body>
27 </html>

View Code

　　　下面例子说明可以构造指向指定方向的三角形。原理：只要其他三个边框设置为透明。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         
 9         <style>    
10             body{
11                 margin:0;
12             }
13             .c0{                
14                 
15                 border-top:20px solid red;
16                 border-right:20px solid transparent;
17                 border-bottom:20px solid transparent;
18                 border-left:20px solid transparent;
19                 display:inline-block;
20             }
21             .c1{                
22                 
23                 border-top:20px solid transparent;
24                 border-right:20px solid transparent;
25                 border-bottom:20px solid red;
26                 border-left:20px solid transparent;
27                 display:inline-block;
28             }
29             
30         </style>
31     </head>
32     <body>
33         <div class="c0"></div>
34         <div class="c1"></div>
35     </body>
36 </html>

View Code

　　　　实际上更简单的方法是不用定义四个，只要定义两个边框一个透明就可以了。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         
 9         <style>    
10             body{
11                 margin:0;
12             }
13             .c0{                                
14                 border-top:20px solid red;
15                 border-right:20px solid transparent;
16                 
17                 display:inline-block;
18             }    
19             .c1{                                
20                 border-top:20px solid transparent;
21                 border-right:20px solid red;
22                 
23                 display:inline-block;
24             }    
25         </style>
26     </head>
27     <body>
28         <div class="c0"></div>
29         <div class="c1"></div>
30         
31     </body>
32 </html>

View Code

　　　　怎么移动,使用margin-top或margin-left移动位置。如下例子鼠标停滞后尖角在原位置改变指向。注意：这里盒子显示时间距调节用的margin-top，在hover调节时使用margin-bottom不起作用，hover只能用margin-top调节位置。这可能由于display：inline-block的原因，inline无论怎么移动都不能将图标移动出界面，但是block是可以。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         
 9         <style>    
10             body{
11                 margin:0;
12             }
13             .c0{
14                 background-color:purple;
15                 width:20px;
16                 height:90px;
17             }
18             .c1{
19                 border:20px solid transparent;    
20                 border-top:20px solid red;                                
21                 display:inline-block;    
22                 margin-top:10px;
23             }
24             .c1:hover{
25                 border:20px solid transparent;    
26                 border-bottom:20px solid red;                            
27                 display:inline-block;
28                 margin-top:-10px;
29             }
30             
31         </style>
32     </head>
33     <body>
34         <div class="c0"></div>
35         <div style="background-color:blue;width:50px;height:50px;">
36             <div class="c1"></div>
37         </div>
38     </body>
39 </html>

View Code

三、引入更形象的图案

　　1、原理及使用方法简介

　　　　基于unicode编码格式制图，每个小图标都对应一个unicode编码。加载awesome的.CSS文件，使用时引用即可。

　　　　下载网址http://www.fontawesome.com.cn/

　　　　注意：他们不是内容，只是CSS渲染效果。

　　2、伪类和伪元素

　　　　：：before是伪元素，修饰元素后作用在选择器

.span .fa xxx ::before      伪元素  

.fa-cloud:before {
content: "\f0c2";
}                                   font-awesome.css文件中的 伪类

　　　　具体使用规则不明确？？？？？？？？？？？？？？？？？？

　　　　：before伪类，修饰选择器。

　　3、实例

　　　　注意<link rel="stylesheet" href="Font-Awesome-4.4.0/css/font-awesome.css">链接式导入css文件的方法。window的路径符要改为/，并用google浏览器打开。360浏览器显示不出来。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <link rel="stylesheet" href="Font-Awesome-4.4.0/css/font-awesome.css">
 9         <style>    
10             body{
11                 margin:0;
12             }
13             
14         </style>
15     </head>
16     <body>
17         <div class="c0">
18             <span class="fa fa-fighter-jet">aaaaaaaaaa</span>
19             <span class="fa fa-cut">cccccccccccccccccccccccccccccc</span>
20         </div>
21         
22     </body>
23 </html>

View Code

　　4、组合　　

常见的用户名登陆框设计使用到input和icon的拼接，并且达到输入内容不覆盖图标效果需要在input内设置内边距。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <link rel="stylesheet" href="E:/python/zuoye/chouti/appro/plugin/Font-Awesome-4.4.0/css/font-awesome.css">
 9         <style>    
10             body{
11                 margin:0;                
12             }
13             .user{
14                 position:relative;
15             }
16             .user input{
17                 background-color:white;                
18                 width:100px;
19                 height:20px;
20                 top:0;
21                 left:0;
22                 position:absolute;
23                 padding-right:20px;
24             }
25             .user span{
26                 position:absolute;
27                 top:0;
28                 left:105px;
29             }
30         </style>    
31     </head>
32     <body>    
33         <div class="user">
34         
35             <input type="text">
36             <span class="fa fa-user">
37                 
38             </span>
39         </div>
40     </body>
41 </html>

View Code

　　5、模态对话框

引用E:\python\zuoye\chouti\appro\loadIcon

top：50%；是以图形的左上角为基准，用margin-top：-1px；调节。z-index：2；确定显示顺序。

　　　　局中用fixed。用

　　JS实现模态对话框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>^-^</title>
        <style>
            .hid{
                display:none;
            }
            .c1{
                position:fixed;
                top:0;
                bottom:0;
                left:0;
                right:0;
                background:rgba(0,0,0,.6);
                z-index:2;
            }
            .c2{
                position:fixed;
                width:200px;
                height:200px;
                top:50%;
                right:50%;
                background-color:white;
                margin-right:-100px;
                margin-top:-100px;
                z-index:3;
            }
            
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>
                    <input type="button" value="点击" onclick="showv();"/>
                </td>
            </tr>    
            <tr>
                <td>1</td>
                <td>2</td>
                <td>
                    <input type="button" value="点击" onclick="showv();"/>
                </td>
            </tr>    
            <tr>
                <td>1</td>
                <td>2</td>
                <td>
                    <input type="button" value="点击" onclick="showv();"/>
                </td>
            </tr>
            
        </table>
        <div id="one" class="c1 hid">
            
        </div>
        <div id="two" class = "c2 hid">
            <input type = "button" value="确定">
            <input type = "button" value="取消" onclick="rem();">
        </div>
        <script>
            function showv(){
                document.getElementById("one").classList.remove('hid');
                document.getElementById("two").classList.remove('hid');
            }
            function rem(){
                document.getElementById("one").classList.add('hid');
                document.getElementById("two").classList.add('hid');
            }
        </script>
    </body>
</html>

View Code

四、折叠效果

　　由模态对话框的思路引申出折叠菜单。

　小结

　　　　常见样式的构造思路：

　　　　1）拼接，a）多图基本拼接。b）多图position。3）附加图漂浮在基础图之上或附近。注意在某种程度position可以代替flowt.

　　　　2）层叠，a） hover及hover+标签。b）透明transparent。c）隐藏+可见，使用visibility：visible和hidden。

　　　　3）局域以上的所有带有非覆盖效果，均可使用设置内部内容带有内边距的办法。

　　　　综上，元素定位margin，组合定位position，元素内容定位padding。基本可以解决一切定位问题。

posted on 2016-08-13 19:11 lexn 阅读(782) 评论(0) 收藏举报

刷新页面返回顶部