html5--项目实战-仿360囧图
实例：
代码
1 2 3 4 5仿360囧途 6 7 8 910 21 22 2324 71257026
36- 27
一招制敌
- 28
麦霸的不为人知的一面
- 29
每个妹子心里都有梦想
- 30
妹子把粽子的枣藏哪了
- 31
妹子我来喂你吧
- 32
让我辨别下是否有凶兆
- 33
原来这才是正解
- 34
麦霸的不为人知的一面
- 35
只想安静的吃个饭而已
37
47- 38
一招制敌
- 39
麦霸的不为人知的一面
- 40
每个妹子心里都有梦想
- 41
妹子把粽子的枣藏哪了
- 42
妹子我来喂你吧
- 43
让我辨别下是否有凶兆
- 44
原来这才是正解
- 45
麦霸的不为人知的一面
- 46
只想安静的吃个饭而已
48
58- 49
一招制敌
- 50
麦霸的不为人知的一面
- 51
每个妹子心里都有梦想
- 52
妹子把粽子的枣藏哪了
- 53
妹子我来喂你吧
- 54
让我辨别下是否有凶兆
- 55
原来这才是正解
- 56
麦霸的不为人知的一面
- 57
只想安静的吃个饭而已
59
69- 60
一招制敌
- 61
麦霸的不为人知的一面
- 62
每个妹子心里都有梦想
- 63
妹子把粽子的枣藏哪了
- 64
妹子我来喂你吧
- 65
让我辨别下是否有凶兆
- 66
原来这才是正解
- 67
麦霸的不为人知的一面
- 68
只想安静的吃个饭而已
72 78 8279 点击加载更多图片 808183 89200 251 2529019691
195- 92 93
97 9894
妹子你回头，跟你说点事
95 96- 99 100
104101
这样吃会消化不良的
102 103- 105 106
110107
真是个不拘小节的妹子
108 109- 111 112
116113
羡慕那只猪
114 115- 117 118
122119
妹子，你手放哪儿了？
120 121- 123 124
128125
谁能把笔拿开！
126 127- 129 130
134131
这叫痛并快乐着
132 133- 135 136
140137
我这手法对吗？
138 139- 141 142
146143
今天这卧铺买对了
144 145- 147 148
152149
啊呀，姐的蛋蛋呢
150 151- 153 154
158155
就喜欢乳臭未干的妹妹
156 157- 159 160
164161
姑娘这是洗泡泡浴呐
162 163- 165 166
170167
不摸腿根本没法开车
168 169- 171 172
176173
男生当教练的小心机
174 175- 177 178
182179
熊孩子理想有点长
180 181- 183 184
188 189 190妹子你回头，跟你说点事
186 187这样吃会消化不良的
192 193 194197 点击加载更多图片198199
1 @charset "utf-8"; 2 /* CSS Document */ 3 *{ 4 margin: 0; 5 padding: 0; 6 } 7 8 body{ 9 background: rgba(20,20,20,0.2); 10 } 11 12 ul{ 13 list-style-type: none; 14 } 15 16 a{ 17 /* color: #fff;*/ 18 text-decoration: none; 19 } 20 21 header{ 22 height: 50px; 23 width: 100%; 24 background: url(../img/bj.png) repeat-x; 25 } 26 27 nav{ 28 width: 1000px; 29 height: 50px; 30 margin: 0 auto; 31 /* background: #AD6162;*/ 32 } 33 34 nav a{ 35 color: #fff; 36 } 37 38 39 h1{ 40 color: #fff; 41 font: bold 40px 隶书; 42 float: left; 43 margin-left: 50px; 44 } 45 46 nav li{ 47 float: left; 48 font-size: 20px; 49 height: 50px; 50 line-height: 50px; 51 letter-spacing: 5px; 52 margin-right: 5px; 53 /* background: red;*/ 54 width: 100px; 55 text-align: center; 56 } 57 58 /***********************第二课***********************/ 59 aside{ 60 position:fixed; 61 left: 100px; 62 top:100px; 63 } 64 65 .switch{ 66 width: 1000px; 67 margin: 0 auto; 68 background: #fff; 69 overflow: hidden; 70 margin-top: 15px; 71 } 72 73 .swi{ 74 width: 1000px; 75 float: left; 76 } 77 78 /* 79 .switch:after{ 80 content: "";display: block;clear: both; 81 } 82 */ 83 84 .swi1{ 85 text-align: center; 86 float:left; 87 margin: 10px 15px 10px 15px; 88 } 89 90 .swi1:hover,.swi1:active{ 91 color: orange; 92 } 93 94 95 96 .sw{ 97 width: 4000px; 98 position: relative; 99 animation:swimg 9s linear infinite normal;100 }101 102 @keyframes swimg{103 0% {left: 0px}104 5% { left: 0px}105 106 30% { left: -1000px}107 40% { left: -1000px}108 109 60%{ left: -2000px;}110 70% { left: -2000px}111 112 95%{ left:-3000px;}113 100%{ left:-3000px;}114 }115 116 117 /************************第三节课***********************/118 .mid{119 width: 1000px;120 margin: 0 auto;121 margin-top: 15px;122 }123 124 .all{125 color: orange;126 }127 128 .midnav{129 height: 50px;130 line-height: 50px;131 /* background: green;*/132 font-size: 20px;133 }134 .more{135 width: 1000px;136 height: 50px;137 line-height: 50px;138 background: #fff;139 text-align: center;140 font-size: 24px;141 margin: 20px auto 20px auto;142 }143 144 .more a{145 color: #000;146 }147 148 149 /*****************footer部分********************/150 151 footer{152 width: 100%;153 background: rgba(60,60,60,0.2);154 155 }156 157 .footer2{158 width: 100%;159 height: 50px;160 background: rgba(50,50,50,0.6);161 162 }163 164 165 166 .footer1 {167 width: 1000px;168 margin:0px auto;169 background: rgba(50,50,50,0.3);170 display: flex;171 text-align: center;172 }173 174 .footnav {175 height: 180px;176 border-right: 1px solid rgba(60,60,30,0.3);177 }178 179 .footnav h3{180 font-weight: normal;181 color: rgba(30,30,30,0.8);182 }183 184 .footnav3{185 border: none;186 }187 188 .foot{189 width: 1000px;190 margin: 0px auto;191 height:50px;192 line-height:50px;193 font-size:12px;194 color:#c2c2c2;195 }196 197 .mimg{198 background: #fff;199 }200 201 .mimg li a{202 color: #000;203 }204 205 .mimg li{206 text-align: center;207 float: left;208 margin: 10px 14px 10px 14px;209 210 }211 212 .foot a{213 color: #FFF;214 }
学习要点
- 常用快捷方式
- 清除浮动的技巧
- 利用css3的动画实现图片轮播。
- 综合运用我们之前学过的知识来构建一个完整的web页面。
更换你的装备
常用快捷方式
- 乘法*: ul>li*5 在编辑器中输入缩写代码：ul>li*5 ，然后按下拓展键（默认为tab），即可得到代码片段：
- 后代 >：nav>ul>li
- 兄弟 +:div+h3+p*3
- 缩写：(div>dl>(dt+dd)*3)+footer>p
- 自增符号：$: ul>li.item$*5
- 缩写：#header
- 缩写：p.class1.class2.class3
- 缩写：ul>.class
- 其他还有很多，大家可以自己去百度下
学习技巧：高手是怎样炼成的
- 观摩优秀的网站，可以F12键查看它的源代码。
- 分析优秀作品的页面结构。
- 模仿优秀的作品,尝试着自己去做一下。
- 尝试着创新，在模仿作品中加入自己的创意思路。
- 反复进行以上四个步骤，直到你自己可以创作出优秀的作品，把自己变成高手
江湖经验
网站开发流程
网站的基本开发流程如下，明白流程，可以明确自己的职责和项目环节，有重点的学习。
- 网站策划--交互设计--网页设计（视觉设计）- 前端开发（前端工程师）-测试网页--网站发布--后期维护
- 沟通的重要性：多与后端技术，美工设计等协作人员沟通。
小技巧
清除浮动的技巧：消除子元素浮动对父元素背景/边框/不能被子元素撑开的方法：
- 父元素结尾处增加一空元素 div；并清除其浮动。缺点：如果布局复杂需要增加许多空标签
- 在父元素定义overflow:hidden（浏览器会自动检查浮动区域的高度，注.不必理会原理，知道用法即可。缺点：超出部分会被隐藏
- 利用伪类：after 父元素内容后增加空元素，并清除浮动。
战斗开始啦
- 创建项目文件夹存放相应的素材、文档等
- 对页面进行结构分析
- 准备素材
- 开始编写代码
项目实战
- 创新从模仿开始，咱们的第一综合实例就从模仿网页-360囧图开始，网址：http://xiaohua.360.cn/jiongtu
- 第一个项目采用固定浮动布局，单位为像素.
- 由于录制课程的时候使用1024*768的分别率；所以项目设定屏幕分辨率为：1024*768
未完，待续...........
- ...
代码优化
优化代码使更加符合HTML5大纲算法.步骤如下
- 查看页面目录结构，逐项修改有问题部分。
- nav中添加标题并将它隐藏。
小技巧
- 当width为100%时。可用用min-width来规定一个最小宽度，防止缩放时变形，尤其是背景图片。
- 将定位和外边距结合让图片以中心点居中。
- 用opcity设置半透明遮罩层。
- inline-block可以使用text-align 居中；
- 可以给background同时设置半透明渐变和背景图片，来增加背景图片的模糊度来突出背景上的文字。
- 用ul列表做导航的好处:逻辑清楚，有条理。
分离css代码
- 将代码重用部分比如header footer分离出来，其他需要的文件重复引用即可