首先谈谈关于还原设计稿学到的一些东西，比如说网页设计稿和交互效果做好了，拿给我们在网页上实现，那如何实现呢，我就说说自己的鄙见吧。
第一，思考整个设计图的层次，比如说分别由哪些部分构成，针对这些“块”，怎么设计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="">CPUa> 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，放要轮播的三张图片。再然后设置三个图片，因为我们需要点击图片就能跳转链接的效果，所以在三个中放三个classname为banner-slide slide1（2、3）的div，来放背景图片。
两个按钮用a标签写入，其中如果href="#"，点击后会回到网页顶部，javascript:void(0)会没有任何反应。
小圆点因为在同一行内显示，使用标签，当然也是被一个div先包起来。
左侧的菜单功能全在mian标签下，新加的子元素第一个div是设置一级菜单背景颜色的，第二个子元素div是一级菜单的内容。第三个子元素div是二级菜单的内容，设置背景图片、大小、位置。
第一个子元素直接去设置样式。
第二个子元素div：每行内容设置一个div，内容包裹在中，内容有标题文字和小图标，文字用，图标用实现。
第三个子元素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%，除非设定一个宽度。
,
,
转载于:https://www.cnblogs.com/chentanyueying/p/7000241.html