前端页面模块制作技巧 【很重要】

 目录:

　　1 网页的三段式布局

　　2 滑动到父元素时显示指定的子元素

　　3 利用 i标签 制作图标

1网页的三段式布局 

　　思路：上中下个利用一个div作为各自的父div；然后可以在各自里面都嵌套一个wrap_div作为居中使用；然后在wrap_div里面添加相应内容

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         .wrap990 {
25             background-color: red;
26             height: 100px;
27             width: 990px;
28             margin: 0 auto;
29         }
30         .clear {
31             clear: both;
32         }
33         .header {
34             height: 100px;
35 
36             background-color: skyblue;
37 
38             margin-bottom: 10px;
39         }
40             
41         .body {
42             /*height: 500px; // 01*/
43 
44             /*添加滚动条后会自动将整个div往左边移动一些*/
45            /* overflow: scroll; // 01
46             padding-left: 16px; //01 */
47 
48             background-color: #8282E0;
49         }
50         .wrap_body {
51             width: 990px;
52             margin: 0 auto;
53         }
54         .body_left {
55             height: 400px;
56             width: 700px;
57 
58             background-color: orange;
59 
60             float: left;
61         }
62         .body_right {
63             height: 400px;
64             width: 270px;
65 
66             background-color: blue;
67 
68             float: right;
69         }
70 
71 
72         .footer {
73             height: 100px;
74 
75             background-color: skyblue;
76 
77             margin-top: 10px;
78         } 
79     </style>
80 </head>
81 
82 <body>
83     <div class="header">
84         <div class="wrap990">我是头部</div>
85     </div>
86 
87     <div class="body">
88         <div class="wrap_body">
89             <div class="body_left">我是body左</div>
90             <div class="body_right">我是body右</div>
91             <div class="clear"></div>
92         </div>
93     </div>
94 
95     <div class="footer">
96         <div class="wrap990">我是底部</div>
97     </div>
98 </body>
99 </html>
三段式布局源代码

 

2鼠标划上去时显示指定元素

　　思路：要显示的元素先的display元素设置成none，当鼠标划到其父元素时display属性变成block；父元素利用相对定位，子元素利用绝对定位来确定显示时的位置

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         
25         .box1 {
26             width: 100px;
27             height: 100px;
28 
29             margin: 0 auto;
30 
31             background-color: red;
32 
33             position: relative;
34         }
35         .box2 {
36             width: 200px;
37             height: 200px;
38 
39             display: none;
40 
41             background-color: skyblue;
42 
43             position: absolute;
44             top: 100px;
45         }
46         .box1:hover .box2 {
47             display: block;
48         }
49     </style>
50 </head>
51 
52 <body>
53     <div class="box1">
54         <div class="box2"></div>
55     </div>
56     
57 </body>
58 </html>
滑动到父元素时显示

 

3利用 i标签  制作图标

　　思路：通过改变 i标签 的border来实现，注意：最好先将 i标签设置成一个行内块

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24         #icon {
25             display: inline-block;
26             border: 20px solid red;
27             border-top-color: orange;
28             border-bottom-color: blue;
29             border-left-color: skyblue;
30             border-right-color: green;
31         }
32 
33         #icon02 {
34             display: inline-block;
35             border: 20px solid red;
36             border-top-color: orange;
37             border-bottom: none;
38             border-left-color: skyblue;
39             border-right-color: green;
40         }
41 
42         #icon03 {
43             display: inline-block;
44             border-top: 20px solid red;
45             border-left: 20px solid transparent;
46             border-right: 20px solid red;
47         }
48 
49         /*掌握这种方法制作图标*/
50         #icon04 {
51             display: inline-block;
52             border-top: 20px solid red;
53             border-left: 20px solid transparent;
54             border-right: 20px solid transparent;
55         }
56          
57     </style>
58 </head>
59 
60 <body>
61     <i id="icon"></i>
62     <br /><hr /><br />
63     <i id="icon02"></i>
64     <br /><hr /><br />
65     <i id="icon03"></i>
66     <br /><hr /><br />
67     <i id="icon04"></i>
68 
69     
70 </body>
71 </html>
i标签制作图标源代码

 

posted @ 2017-05-20 18:31  寻渝记  阅读(385)  评论(0)    收藏  举报