首先谈谈关于还原设计稿学到的一些东西，比如说网页设计稿和交互效果做好了，拿给我们在网页上实现，那如何实现呢，我就说说自己的鄙见吧。
第一，思考整个设计图的层次，比如说分别由哪些部分构成，针对这些“块”，怎么设计div的结构，怎么把静态页面有条理的编写出来。
第二，思考如何实现设计图的交互效果，在逻辑上分析，比如用JS绑定哪些事件，采用什么样的函数实现怎么样的效果等等。
第三，代码的优化性考虑，怎么让代码简洁明了，方便维护。
以上就是我现在阶段对页面还原的一些看法，也许比较浅显，我也希望早日提升！
然后现在总结具体的案例，首先我们要还原的是一个类似小米商城轮播图的一个小项目。
里面有以下知识点：
1.图片显示区域的轮播效果，在div里的三张图片每3秒钟按顺序更换一次、两个按钮支持上一张，下一张图片的效果、图片右下角三个圆点支持点击第一个圆点显示第一张图片，点击第二个显示第二张、以此类推的效果。
2.图片左侧的菜单栏，需要实现鼠标滑过this.菜单栏时背景颜色改变、子菜单紧靠出现在菜单栏的右侧。离开菜单栏，子菜单隐藏。鼠标停留子菜单，子菜单一直显示，鼠标离开子菜单，子菜单隐藏。
3.静态页面中背景图，透明度，字体效果，div大小、定位、元素显示与隐藏、盒子间距的设置、左右对齐、隐藏溢出、阴影效果、z-index、元素的旋转、小图标的使用等等。
实现过程以下
html层面:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="main" id="main"> 10 <div class="menu-box"></div><!--左侧菜单的大盒子，用来设置透明度--> 11 12 <div class="sub-menu hide" id="sub-menu"><!--右侧菜单选项的盒子--> 13 <div class="inner-box"> 14 <div class="sub-inner-box"> 15 <div class="title">手机、配件</div> 16 <div class="sub-row"> 17 <span class="bold mr10">手机通讯：</span> 18 <a href="">手机</a> 19 <span class="ml10 mr10">/</span> 20 <a href="" >手机维修</a> 21 <span class="ml10 mr10">/</span> 22 <a href="" >以旧换新</a> 23 </div> 24 25 26 <div class="sub-row"> 27 <span class="bold mr10">手机配件：</span> 28 <a href="">手机壳</a> 29 <span class="ml10 mr10">/</span> 30 <a href="">手机存储卡</a> 31 <span class="ml10 mr10">/</span> 32 <a href="">数据线</a> 33 <span class="ml10 mr10">/</span> 34 <a href="">充电器</a> 35 <span class="ml10 mr10">/</span> 36 <a href="">电池</a> 37 </div> 38 <div class="sub-row"> 39 <span class="bold mr10">运营商：</span> 40 <a href="">中国联通</a> 41 <span class="ml10 mr10">/</span> 42 <a href="">中国移动</a> 43 <span class="ml10 mr10">/</span> 44 <a href="">中国电信</a> 45 </div> 46 <div class="sub-row"> 47 <span class="bold mr10">智能设备：</span> 48 <a href="">智能手环</a> 49 <span class="ml10 mr10">/</span> 50 <a href="">智能家居</a> 51 <span class="ml10 mr10">/</span> 52 <a href="">智能手表</a> 53 <span class="ml10 mr10">/</span> 54 <a href="">其他配件</a> 55 </div> 56 <div class="sub-row"> 57 <span class="bold mr10">娱乐：</span> 58 <a href="">耳机</a> 59 <span class="ml10 mr10">/</span> 60 <a href="">音响</a> 61 <span class="ml10 mr10">/</span> 62 <a href="">收音机</a> 63 <span class="ml10 mr10">/</span> 64 <a href="">麦克风</a> 65 </div> 66 </div> 67 </div> 68 69 70 <div class="inner-box"> 71 <div class="sub-inner-box"> 72 <div class="title">电脑</div> 73 <div class="sub-row"> 74 <span class="bold mr10">电脑：</span> 75 <a href="">笔记本</a> 76 <span class="ml10 mr10">/</span> 77 <a href="">平板</a> 78 <span class="ml10 mr10">/</span> 79 <a href="">一体机</a> 80 </div> 81 <div class="sub-row"> 82 <span class="bold mr10">电脑配件：</span> 83 <a href="">显示器</a> 84 <span class="ml10 mr10">/</span> 85 <a href="">CPU</a> 86 <span class="ml10 mr10">/</span> 87 <a href="">主板</a> 88 <span class="ml10 mr10">/</span> 89 <a href="">硬盘</a> 90 <span class="ml10 mr10">/</span> 91 <a href="">电源</a> 92 <span class="ml10 mr10">/</span> 93 <a href="">显卡</a> 94 <span class="ml10 mr10">/</span> 95 <a href="">其他配件</a> 96 </div> 97 <div class="sub-row"> 98 <span class="bold mr10">游戏设备：</span> 99 <a href="">游戏机</a> 100 <span class="ml10 mr10">/</span> 101 <a href="">耳机</a> 102 <span class="ml10 mr10">/</span> 103 <a href="">游戏软件</a> 104 </div> 105 <div class="sub-row"> 106 <span class="bold mr10">网络产品：</span> 107 <a href="">路由器</a> 108 <span class="ml10 mr10">/</span> 109 <a href="">网络机顶盒</a> 110 <span class="ml10 mr10">/</span> 111 <a href="">交换机</a> 112 <span class="ml10 mr10">/</span> 113 <a href="">存储卡</a> 114 <span class="ml10 mr10">/</span> 115 <a href="">网卡</a> 116 </div> 117 <div class="sub-row"> 118 <span class="bold mr10">外部产品：</span> 119 <a href="">鼠标</a> 120 <span class="ml10 mr10">/</span> 121 <a href="">键盘</a> 122 <span class="ml10 mr10">/</span> 123 <a href="">U盘</a> 124 <span class="ml10 mr10">/</span> 125 <a href="">移动硬盘</a> 126 <span class="ml10 mr10">/</span> 127 <a href="">鼠标垫</a> 128 <span class="ml10 mr10">/</span> 129 <a href="">电脑清洁</a> 130 </div> 131 </div> 132 </div> 133 <div class="inner-box"> 134 <div class="sub-inner-box"> 135 <div class="title">家用电器</div> 136 <div class="sub-row"> 137 <span class="bold mr10">电视：</span> 138 <a href="">国产品牌</a> 139 <span class="ml10 mr10">/</span> 140 <a href="">韩国品牌</a> 141 <span class="ml10 mr10">/</span> 142 <a href="">欧美品牌</a> 143 </div> 144 <div class="sub-row"> 145 <span class="bold mr10">空调：</span> 146 <a href="">显示器</a> 147 <span class="ml10 mr10">/</span> 148 <a href="">柜式</a> 149 <span class="ml10 mr10">/</span> 150 <a href="">中央</a> 151 <span class="ml10 mr10">/</span> 152 <a href="">壁挂式</a> 153 </div> 154 <div class="sub-row"> 155 <span class="bold mr10">冰箱：</span> 156 <a href="">多门</a> 157 <span class="ml10 mr10">/</span> 158 <a href="">对开门</a> 159 <span class="ml10 mr10">/</span> 160 <a href="">三门</a> 161 <span class="ml10 mr10">/</span> 162 <a href="">双门</a> 163 </div> 164 <div class="sub-row"> 165 <span class="bold mr10">洗衣机：</span> 166 <a href="">滚筒式洗衣机</a> 167 <span class="ml10 mr10">/</span> 168 <a href="">迷你洗衣机</a> 169 <span class="ml10 mr10">/</span> 170 <a href="">洗烘一体机</a> 171 </div> 172 <div class="sub-row"> 173 <span class="bold mr10">厨房电器：</span> 174 <a href="">油烟机</a> 175 <span class="ml10 mr10">/</span> 176 <a href="">洗碗机</a> 177 <span class="ml10 mr10">/</span> 178 <a href="">燃气灶</a> 179 </div> 180 </div> 181 </div> 182 <div class="inner-box"> 183 <div class="sub-inner-box"> 184 <div class="title">家具</div> 185 <div class="sub-row"> 186 <span class="bold mr10">家纺：</span> 187 <a href="">被子</a> 188 <span class="ml10 mr10">/</span> 189 <a href="">枕头</a> 190 <span class="ml10 mr10">/</span> 191 <a href="">四件套</a> 192 <span class="ml10 mr10">/</span> 193 <a href="">床垫</a> 194 </div> 195 <div class="sub-row"> 196 <span class="bold mr10">灯具：</span> 197 <a href="">台灯</a> 198 <span class="ml10 mr10">/</span> 199 <a href="">顶灯</a> 200 <span class="ml10 mr10">/</span> 201 <a href="">节能灯</a> 202 <span class="ml10 mr10">/</span> 203 <a href="">应急灯</a> 204 </div> 205 <div class="sub-row"> 206 <span class="bold mr10">厨具：</span> 207 <a href="">烹饪锅具</a> 208 <span class="ml10 mr10">/</span> 209 <a href="">餐具</a> 210 <span class="ml10 mr10">/</span> 211 <a href="">菜板刀具</a> 212 </div> 213 <div class="sub-row"> 214 <span class="bold mr10">家装：</span> 215 <a href="">地毯</a> 216 <span class="ml10 mr10">/</span> 217 <a href="">沙发垫套</a> 218 <span class="ml10 mr10">/</span> 219 <a href="">装饰字画</a> 220 <span class="ml10 mr10">/</span> 221 <a href="">照片墙</a> 222 <span class="ml10 mr10">/</span> 223 <a href="">窗帘</a> 224 </div> 225 <div class="sub-row"> 226 <span class="bold mr10">生活日用：</span> 227 <a href="">收纳用品</a> 228 <span class="ml10 mr10">/</span> 229 <a href="">浴室用品</a> 230 <span class="ml10 mr10">/</span> 231 <a href="">雨伞雨衣</a> 232 </div> 233 </div> 234 </div> 235 </div> 236 <div class="menu-content" id="menu-content"><!--左侧菜单栏的盒子，用来做菜单内容。--> 237 <div class="menu-item"> 238 <a href=""> 239 <span>手机、配件</span> 240 <i></i> 241 </a> 242 </div> 243 <div class="menu-item"> 244 <a href=""> 245 <span>电脑</span> 246 <i></i> 247 </a> 248 </div> 249 <div class="menu-item"> 250 <a href=""> 251 <span>家用电器</span> 252 <i></i> 253 </a> 254 </div> 255 <div class="menu-item"> 256 <a href=""> 257 <span>家具</span> 258 <i></i> 259 </a> 260 </div> 261 </div> 262 263 <div class="banner" id="banner"> 264 <a href=""> 265 <div class="banner-slide slide1 slide-active"></div> 266 </a> 267 <a href=""> 268 <div class="banner-slide slide2"></div> 269 </a> 270 271 <a href=""> 272 <div class="banner-slide slide3" ></div> 273 </a> 274 </div> 275 276 <a href="javascript:void(0)" class="button prev" id="prev"> </a> 277 <a href="javascript:void(0)" class="button next" id="next"> </a> 278 279 <div class="dots" id="dots"> 280 <span class="active"></span> 281 <span></span> 282 <span></span> 283 </div> 284 </div> 285 <script type="text/javascript" src="js/sprit.js"></script> 286 </body> 287 </html>
设置一个classname为main的div，放这个轮播图里所有的东西。然后设置一个classname为banner的div，放要轮播的三张图片。再然后设置三个图片，因为我们需要点击图片就能跳转链接的效果，所以在三个<a href=””>中放三个classname为banner-slide slide1（2、3）的div，来放背景图片。
两个按钮用a标签写入，其中如果href="#"，点击后会回到网页顶部，javascript:void(0)会没有任何反应。
小圆点因为在同一行内显示，使用<span>标签，当然也是被一个div先包起来。
左侧的菜单功能全在mian标签下，新加的子元素第一个div是设置一级菜单背景颜色的，第二个子元素div是一级菜单的内容。第三个子元素div是二级菜单的内容，设置背景图片、大小、位置。
第一个子元素直接去设置样式。
第二个子元素div：每行内容设置一个div，内容包裹在<a herf>中，内容有标题文字和小图标，文字用<span>，图标用<i>实现。
第三个子元素div：给一个总的div，包含四个子菜单的内容。四个总菜单分别给四个div。菜单内容给一个div，在里面写二级菜单的具体内容，如上代码所述就不一一展开
css样式：
1 *{
2 margin: 0;
3 padding: 0;
4 }
5
6 @font-face {
7 font-family: ‘iconfont‘;
8 src: url(‘../img/font/iconfont.eot‘);
9 src: url(‘../img/font/iconfont.eot‘) format(‘embedded-opentype‘),
10 url(‘../img/font/iconfont.woff‘) format(‘woff‘),
11 url(‘../img/font/iconfont.ttf‘) format(‘truetype‘),
12 url(‘../img/font/iconfont.svg#iconfont‘) format(‘svg‘);
13 }
14
15 body{
16 font-family:"微软雅黑";
17 color:#14191e;
18 }
19 a:link,a:visited{
20 text-decoration:none;
21 color: #333;
22 }
23
24 .main{
25 width:1200px;
26 height:460px;
27 margin:30px auto;
28 overflow: hidden;
29 position: relative;
30 }
31
32 .banner{
33 width:1200px;
34 height:460px;
35 overflow:hidden;
36 position: relative;
37
38 }
39
40 .banner-slide{
41 width: 1200px;
42 height:460px;
43 background-repeat: no-repeat;
44
45
46
47 }
48
49 .slide1{
50 background-image: url("../img/bg1.jpg");
51 }
52
53 .slide2{
54 background-image: url("../img/bg2.jpg");
55 }
56
57 .slide3{
58 background-image: url("../img/bg3.jpg");
59 }
60
61 .button{
62 position: absolute;
63 height: 80px;
64 width:40px;
65 left: 244px;
66 top: 50%;
67 margin-top:-40px;
68 background:url(../img/arrow.png) center center no-repeat;
69 transform: rotate(180deg);
70 }
71
72 .next{
73 left: auto;
74 right: 0px;
75 transform:rotate(0deg);
76 }
77
78 .button:hover{
79 background-color: rgb(81,78,85);
80 opacity:0.8;
81 filter:alpha(opacity=80);
82 }
83
84 .dots{
85 position: absolute;
86 right: 0;
87 text-align: right;
88 bottom: 24px;
89 padding-right: 24px;
90 line-height: 12px;
91 }
92
93 .dots span{
94 display: inline-block;
95 width: 12px;
96 height:12px;
97 border-radius: 50%;
98 margin-left: 8px;
99 background-color: rgba(7, 17, 27, 0.4);
100 cursor: pointer;
101 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
102 }
103
104 .dots span.active{
105 box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
106 background-color: #ffffff;
107 }
108
109 .menu-box{
110 width: 244px;
111 height:460px;
112 position:absolute;
113 top: 0;
114 left:0;
115 background: rgba(7,17,27,0.5);
116 opacity:0.5;
117 z-index:1;
118 }
119 .menu-content{
120 width: 244px;
121 height:454px;
122 position: absolute;
123 left: 0;
124 top: 0;
125 z-index: 2;
126 padding-top: 6px;
127 }
128
129 .menu-item{
130 height: 64px;
131 line-height: 66px;
132 font-size: 16px;
133 padding: 0 24px;
134 position: relative;
135 }
136
137 .menu-item a:link,.menu-item a:visited{
138 color: #fff;
139 }
140
141 .menu-item a{
142 display: block;
143 border-bottom: 1px solid rgba(225,225,225,0.2);
144 padding: 0 8;
145 line-height: 63px;
146 }
147
148 .menu-item i {
149 position: absolute;
150 right: 32px;
151 font-size: 24px;
152 top: 0;
153 font-family:"iconfont" ;
154 font-style: normal;
155 font-weight: normal;
156 }
157
158 .sub-menu{
159 width: 730px;
160 height: 458px;
161 border: 1px solid #d9dde1;
162 background: #fff;
163 z-index: 999;
164 position: absolute;
165 left: 244px;
166 top:0px;
167 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
168 }
169
170 .inner-box{
171 width: 100%;
172 height: 100%;
173 background: url(../img/fe.png) no-repeat;
174 display: none;
175 }
176
177 .sub-inner-box{
178 width: 652px;
179 margin-left: 40px;
180 overflow: hidden;
181 }
182 .title{
183 color:red;
184 font-size: 16px;
185 line-height: 16px;
186 margin: 28px 0 30px 0;
187 font-weight: bold;
188 }
189
190 .bold{
191 font-weight: bold;
192 }
193 .mr10{
194 margin-right: 10px;
195 }
196
197 .ml10{
198 margin-left: 10px;
199 }
200
201 .sub-row{
202 margin-top: 20px;
203 }
204
205 .hide{
206 display: none;
207 }
这里主要就是写一下几个比较陌生的css属性设置，以后多注意这些属性的用法，一定要熟练掌握
1.下面三行代码是比较通用的一些样式，先写在CSS的最前面，清空各种默认格式。
*{
margin: 0;
padding: 0;
}
body{
font-family:"微软雅黑";
color:#14191e;
}
a:link,a:visited{
text-decoration:none;
2.溢出overflow
overflow: hidden;内容会被修剪，并且其余内容是不可见的。
overfiow:auto;如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overfiow:scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
3.定位
position: relative;相对定位
position: absolute;绝对定位
绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。
4.box-shadow
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
box-shadow属性的参数设置取值：
阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-
box-shadow的形式。
5.背景
background 这个简写属性可以在一个声明中设置所有的背景属性：
可以设置如下属性：
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
6.圆角
border-radius: 50%;设置圆的形状。
7.光标
cursor 属性规定要显示的光标的类型（形状），该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。
curso：pointer； 光标呈现为指示链接的指针（一只手）
8.display
block： 块级元素 。 总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子
inline：内联元素。和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
inline-block：行内块元素。应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性。
JS代码：
1 function byId(id){
2 return typeof(id)==="string"?document.getElementById(id):id;
3 }
4
5 var index= 0,
6 timer= null,
7 pics = byId("banner").getElementsByTagName(‘div‘),
8 dots = byId("dots").getElementsByTagName(‘span‘),
9 menu = byId("menu-content").getElementsByTagName("div"),
10 menus = menu.length,
11 subMenu=byId("sub-menu"),
12 innerBox = subMenu.getElementsByClassName("inner-box"),
13 menuItem = byId("menu-content").getElementsByClassName("menu-item");
14 len = pics.length;
15
16
17 function slideImg(){
18 var main = byId("main");
19 main.onmouseover = function(){
20 if(timer) clearInterval(timer)
21 }
22
23
24 main.onmouseout = function(){
25 timer = setInterval(function(){
26 index++;
27 if (index >= len ){
28 index=0;
29 }
30 changeImg();
31 },3000);
32 }
33 main.onmouseout();
34
35 for(var d = 0;d<len;d++){
36 dots[d].id= d;
37 dots[d].onclick=function(){
38 index=this.id;
39 changeImg();
40 }
41 }
42
43 }
44
45 next.onclick=function(){
46 index++;
47 if(index>=len) index=0;
48 changeImg();
49 }
50
51 prev.onclick=function(){
52 index--;
53 if(index<0) index=len-1;
54 changeImg();
55 }
56
57 function changeImg(){
58 for(var i =0;i<len; i++){
59 pics[i].style.display="none";
60 dots[i].className="";
61 }
62 pics[index].style.display=‘block‘;
63 dots[index].className="active";
64 }
65
66 slideImg();
67
68 function button(){
69 for(var m =0;m<menus;m++){
70
71 menu[m].setAttribute("data-index",m)
72 menu[m].onmouseover=function(){
73 var idx=this.getAttribute("data-index");
74 for(var j = 0;j<innerBox.length;j++){
75 subMenu.className="sub-menu";
76 innerBox[j].style.display="none";
77 menuItem[j].style.background="none";
78 }
79 innerBox[idx].style.display="block";
80 menuItem[idx].style.background="rgba(0,0,0,0.1)";
81 }
82 }
83 byId("menu-content").onmouseout=function(){
84 subMenu.className="sub-menu hide";
85 }
86 subMenu.onmouseover=function(){
87 this.className="sub-menu";
88 }
89 subMenu.onmouseout=function(){
90 this.className="sub-menu hide";
91 }
92 }
93
94 button();
几个关键
一个是遍历所有的项，设置一个样式。当触发了什么事件，以触发这个事件的数组的数字为依托进行更改样式。这里有两个变量，一个是用来遍历所有的元素的，一个是用来确定当下触发事件的具体数组的。
几个交互效果API onmouseover 、 onmouseover、setInterval定时器、clearInterval清除定时器、onclick、this的内容、setAttribute、getAttribute、getElementsByClassName与getElementsByTagName的区别。
时间： 2024-10-23 02:34:06