177. （案例）综合案例2-网页导航案例-布局完成 - 1

1年前 886观看

黑马程序员web前端HTML5+CSS3+移动web全套，零基础自学必备

IT/互联网 / 程序设计开发

共450集 46.5万人观看

1Web标准
09:46
2HTML的感知 - 1
06:06
3HTML的感知 - 3
06:04
4HTML的感知 - 1
06:06
5HTML的感知 - 3
06:04
6HTML的感知 - 1
06:06
7HTML的感知 - 3
06:04
8HTML的注释
05:51
10HTML标签的属性
09:16
11HTML标签之间的关系
05:39
12标题标签
09:46
13段落标签
06:26
14换行标签
04:38
15水平线标签
03:03
16文本格式化标签
08:29
17图片标签的src属性
06:01
20图片标签的width和height属性
07:04
21相对路径-同级目录
04:48
22相对路径-下级目录
04:57
23相对路径-上级目录
05:20
24（案例）相对路径例子
03:52
25音频标签 - 1
05:41
26音频标签 - 3
05:43
27视频标签
07:46
28链接标签的href属性
08:03
29（了解）链接标签的显示特点
03:54
31（了解）空链接
03:52
32（总结）HTML标签总结
03:00
33（案例）综合案例1-招聘案例
09:12
35无序列表
08:05
36有序列表
04:52
38表格的基本标签
09:01
39表格相关属性
06:48
40表格标题和表头单元格标签
07:13
41表格的结构标签
06:30
42合并单元格 - 1
06:18
43合并单元格 - 3
06:15
44（总结）表格标签总结
03:18
45input系列标签的基本介绍
09:51
46input标签-文本框
04:01
47（拓展）value属性和name属性介绍
06:37
48input标签-密码框
04:56
49input标签-单选框
05:44
50input标签-复选框
03:19
51input标签-文件选择
03:59
52input标签-按钮
07:18
53（总结）input系列标签总结
02:04
54button按钮标签
06:04
55select下拉菜单
06:11
56textarea文本域标签
05:36
57label标签
07:01
58（总结）表单标签总结
03:32
59（了解）有语义的布局标签
05:05
60（案例）综合案例1-优秀学生信息表格-基本结构
06:48
61（案例）综合案例1-优秀学生信息表格-完整结构
05:58
62（案例）综合案例1-优秀学生信息表格-合并单元格
04:32
63（案例）综合案例2-会员注册表单案例-前半部分完成 - 1
06:00
64（案例）综合案例2-会员注册表单案例-前半部分完成 - 3
05:56
65CSS初识 - 1
05:10
66CSS初识 - 3
05:06
67CSS引入方式
09:34
68标签选择器
05:46
69类选择器
09:30
71（总结）基础选择器总结
02:08
72字体大小
05:51
73字体粗细
06:12
74字体样式
03:24
75常见字体系列
04:17
76字体系列font-family - 1
05:25
77字体系列font-family - 3
05:25
78样式的层叠问题
03:04
79字体font相关属性的连写 - 1
06:07
80字体font相关属性的连写 - 3
06:10
81文本缩进
06:35
82文本水平对齐方式
07:50
83文本修饰
06:36
84（总结）文本样式总结
01:31
85水平居中方法总结1-text-align
07:32
86行高的介绍和常见应用
08:00
87行高与font连写的注意点
04:38
88（操作）Chrome调试工具的基本使用-上 - 1
05:04
89（操作）Chrome调试工具的基本使用-上 - 3
05:09
90（操作）Chrome调试工具的基本使用-下
08:53
91（了解）颜色的常见取值-上 - 1
05:24
92（了解）颜色的常见取值-上 - 3
05:28
93（了解）颜色的常见取值-下
06:21
94（案例）综合案例1-新闻网页案例 - 1
09:07
95（案例）综合案例1-新闻网页案例 - 3
09:09
96后代选择器 - 1
05:18
97后代选择器 - 3
05:19
98子代选择器
04:56
99并集选择器
05:17
100交集选择器
06:04
101emmet语法
07:44
102hover伪类选择器
06:50
104背景颜色
06:53
105背景图片
07:18
106背景平铺
05:47
107背景位置 - 1
06:07
108背景位置 - 3
06:10
109背景相关属性连写 - 1
06:03
110背景相关属性连写 - 3
06:05
111img标签和背景图片的区别
05:38
112元素显示模式-块级元素
09:14
113元素显示模式-行内元素
05:34
114元素显示模式-行内块元素
07:30
115元素显示模式转换
08:22
116HTML嵌套规范注意点
06:33
117（总结）居中方法总结
03:22
118CSS三大特性-继承性 - 1
05:22
119CSS三大特性-继承性 - 3
05:24
120继承的小应用
04:57
121继承失效的特殊情况 - 1
05:32
122继承失效的特殊情况 - 3
05:35
123（案例）综合案例1-普通导航案例
09:05
124优先级 - 1
05:59
125优先级 - 3
06:04
126权重叠加计算
08:44
127（案例）权重计算案例下 - 1
05:08
128（案例）权重计算案例下 - 3
05:09
129（操作）调试工具查错流程 - 1
06:30
130（操作）调试工具查错流程 - 3
06:35
131（操作）PxCook的基本使用 - 1
05:48
132（操作）PxCook的基本使用 - 3
05:45
134内容区域的宽高
03:25
135border相关属性介绍 - 1
06:07
136border相关属性介绍 - 3
06:04
137盒子实际大小初级计算公式 - 1
05:15
138盒子实际大小初级计算公式 - 3
05:11
139（案例）综合案例1-新浪导航案例-大盒子完成 - 1
06:19
140（案例）综合案例1-新浪导航案例-大盒子完成 - 3
06:19
141padding取值介绍 - 1
06:01
142padding取值介绍 - 3
06:06
143盒子实际大小的终极计算公式
08:11
144（案例）新浪导航优化
06:08
145（了解）不会撑大盒子的特殊情况
05:14
146CSS3盒模型（自动内减）
08:57
147（案例）综合案例2-网页新闻列表案例-大盒子完成 - 1
05:11
148（案例）综合案例2-网页新闻列表案例-大盒子完成 - 3
05:09
149（案例）综合案例2-网页新闻列表案例-h2盒子完成 - 1
05:36
150（案例）综合案例2-网页新闻列表案例-h2盒子完成 - 3
05:37
151（案例）综合案例2-网页新闻列表案例-ul盒子完成
09:38
152margin的取值
09:44
153margin单方向设置的应用
07:26
154清除默认内外边距 - 1
05:18
155清除默认内外边距 - 3
05:19
156外边距的正常现象
04:12
157外边距折叠现象-合并现象
06:54
158外边距折叠现象-塌陷现象
10:00
159结构伪类选择器-查找单个 - 1
06:09
160结构伪类选择器-查找单个 - 3
06:05
161结构伪类选择器-查找多个
09:53
162（案例）结构伪类选择器的易错点
04:46
163（了解）nth-of-type结构伪类选择器
06:48
164伪元素 - 1
05:27
165伪元素 - 3
05:31
166浮动的介绍
09:30
167浮动的特点上 - 1
05:44
168浮动的特点上 - 3
05:48
169浮动的特点下 - 1
05:30
170浮动的特点下 - 3
05:32
171（案例）网页布局案例 - 1
07:05
172（案例）网页布局案例 - 3
07:01
173（案例）综合案例1-小米模块案例-大盒子完成 - 1
05:12
174（案例）综合案例1-小米模块案例-大盒子完成 - 3
05:18
175（案例）综合案例1-小米模块案例-小盒子完成
09:12
176（案例）综合案例2-网页导航案例-结构与样式清除完成
05:10
177（案例）综合案例2-网页导航案例-布局完成 - 1
05:18
178（案例）综合案例2-网页导航案例-布局完成 - 3
05:19
179清除浮动的介绍
08:20
180清除浮动方法-直接设置父元素高度
06:50
181清除浮动方法-双伪元素清除法
08:08
182清除浮动方法-给父元素设置overflow-hidden
03:55
183定位的应用场景介绍
06:57
184定位的基本使用步骤
08:41
185静态定位的介绍
03:41
186相对定位的介绍
09:06
187绝对定位的介绍
06:26
188绝对定位到底相对于谁进行移动
09:28
189子绝父相的介绍 - 1
05:15
190子绝父相的介绍 - 3
05:17
192（案例）卡片模块的hot图标定位案例 - 1
06:12
193（案例）卡片模块的hot图标定位案例 - 3
06:09
194（案例）子绝父相水平居中案例 - 1
07:19
195（案例）子绝父相水平居中案例 - 3
07:17
196（案例）子绝父相水平垂直都居中案例
09:13
197（案例）导航二维码居中定位案例 - 1
06:43
198（案例）导航二维码居中定位案例 - 3
06:46
199（案例）底部半透明遮罩效果案例 - 1
06:30
200（案例）底部半透明遮罩效果案例 - 3
06:28
201固定定位的介绍 - 1
05:40
202固定定位的介绍 - 3
05:42
203（总结）定位小结
03:26
204元素的层级关系
09:30
205垂直对齐方式
08:53
206（案例）vertical-align可以解决的问题一
06:27
207（案例）vertical-align可以解决的问题二
02:12
210（案例）vertical-align可以解决的问题五
04:25
211光标类型
05:54
212边框圆角的介绍
09:04
213overflow溢出部分显示效果
08:30
214元素本身隐藏属性介绍
05:22
215（案例）元素显示隐藏切换案例
04:46
216（案例）导航二维码显示隐藏切换案例
05:28
217（了解）元素整体透明度
04:44
218（了解）边框合并
06:24
219（拓展）用CSS画任意三角形的技巧
03:28
220（了解）链接伪类选择器 - 1
05:31
221（了解）链接伪类选择器 - 3
05:31
222（拓展）焦点伪类选择器
04:30
223精灵图的介绍
09:34
224精灵图的使用步骤
09:44
225背景图片大小 - 1
07:15
226背景图片大小 - 3
07:11
227（了解）文字阴影 - 1
05:24
228（了解）文字阴影 - 3
05:29
230过渡的介绍 - 1
06:28
231过渡的介绍 - 3
06:26
233（了解）骨架结构标签介绍 - 1
07:38
234（了解）骨架结构标签介绍 - 3
07:43
235SEO三大标签 - 1
05:47
236SEO三大标签 - 3
05:49
237有语义的布局标签
04:44
238ico图标的设置
04:36
239版心的介绍
07:11
240CSS的书写顺序
06:33
241基础公共样式
08:29
242index页面骨架
07:03
243header部分模块分析
05:35
244xtx-shortcut模块分析
04:17
245xtx-shortcut模块大盒子代码完成
07:24
246xtx-shortcut模块ul导航代码完成 - 1
05:22
247xtx-shortcut模块ul导航代码完成 - 3
05:22
248xtx-shortcut模块手机精灵图代码完成
09:39
249xtx-main-nav模块的nav部分代码完成
09:30
250xtx-main-nav模块的search部分input部分代码完成
08:58
251xtx-main-nav模块的search部分放大镜图标代码完成
07:06
252xtx-main-nav模块的cart部分完成 - 1
05:33
253xtx-main-nav模块的cart部分完成 - 3
05:33
254xtx-service模块分析和大盒子代码完成 - 1
05:19
255xtx-service模块分析和大盒子代码完成 - 3
05:17
256xtx-service模块内部a标签代码完成 - 1
06:41
257xtx-service模块内部a标签代码完成 - 3
06:39
258xtx-copyright模块分析和大盒子代码完成
04:11
259xtx-copyright模块内部代码完成
09:26
260xtx-entry模块分析和大盒子代码完成
08:42
261xtx-entry模块的banner部分完成
03:52
262xtx-entry模块的category部分大盒子完成
04:32
263xtx-entry模块的category部分文本内容完成
09:26
264xtx-entry模块的category部分右箭头完成
05:07
265xtx-entry模块的左右箭头部分完成 - 1
06:38
266xtx-entry模块的左右箭头部分完成 - 3
06:35
267xtx-entry模块的轮播指示器部分完成 - 1
05:27
268xtx-entry模块的轮播指示器部分完成 - 3
05:31
269xtx-new-goods模块分析
04:55
270xtx-new-goods模块的大盒子代码完成
04:28
271xtx-new-goods模块的goods-hd部分代码完成 - 1
06:00
272xtx-new-goods模块的goods-hd部分代码完成 - 3
06:03
273xtx-new-goods模块的goods-list部分大盒子完成
07:22
274字体图标-基本使用 - 1
06:08
275字体图标-基本使用 - 3
06:14
276字体图标-iconfont类
05:05
277案例-购物车
09:54
278字体图标-svg-上传-意义
06:03
279字体图标-sbg-上传-步骤
07:54
280平面转换-介绍
08:41
281平面转换-位移
08:07
282平面转换-位移-技巧
03:39
283平面转换-定位盒子居中
09:08
284案例-双开门-布局 - 1
06:13
285案例-双开门-布局 - 3
06:22
286案例-双开门-hover效果
06:00
287平面转换旋转
04:55
288平面转换-转换原点
07:45
289平面转换-多重转换
06:15
290平面转换-缩放
06:15
291案例-缩放 - 1
09:14
292案例-缩放 - 3
09:15
293案例-缩放-注意点-层叠性
03:39
294黑马程序员web前端HTML5+CSS3+移动web全套，零基础自学必备(20-渐变) - 1
05:45
295黑马程序员web前端HTML5+CSS3+移动web全套，零基础自学必备(20-渐变) - 3
05:42
296案例-渐变
09:05
297综合案例-华为-结构分析
10:00
298综合案例-华为-mask
07:05
299空间转换-简介
04:13
300空间转换-位移
07:35
302空间转换-透视属性-原理
09:33
303空间转换-rotateZ
04:16
304空间转换-rotateX
04:34
305空间转换-rotateY
03:30
306空间转换-左手法则
05:41
307空间转换-rotate3d-了解
02:33
308空间转换-立体呈现 - 1
08:28
309空间转换-立体呈现 - 3
08:30
310d导航-搭建立方体
08:04
311上午回顾
03:27
312空间转换-缩放
05:42
313动画-简介 - 1
05:25
314动画-简介 - 3
05:30
315动画-from..to
06:16
316动画-百分比
04:48
317动画-animation复合属性01 - 1
05:41
318动画-animation复合属性01 - 3
05:44
319动画-animation复合属性02
08:15
320动画-animation拆分写法
07:07
321动画-逐帧动画-简介
05:21
322动画-逐帧动画-实现 - 1
06:03
323动画-逐帧动画-实现 - 3
06:01
324动画-多组动画 - 1
05:17
325动画-多组动画 - 3
05:15
326综合案例-走马灯 - 1
09:28
327综合案例-走马灯 - 3
09:29
328综合案例-全民出游-背景大图 - 1
07:32
329综合案例-全民出游-背景大图 - 3
07:37
330综合案例-全民出游-云彩-布局
07:37
331课程介绍
01:49
332PC和移动网页不同点
05:13
333分辨率 - 1
05:18
334分辨率 - 3
05:22
335代码参考分辨率-逻辑 - 1
05:03
336代码参考分辨率-逻辑 - 3
05:03
337黑马程序员web前端HTML5+CSS3+移动web全套，零基础自学必备(08-视口) - 1
06:02
338黑马程序员web前端HTML5+CSS3+移动web全套，零基础自学必备(08-视口) - 3
06:04
339二倍图 - 1
07:27
340二倍图 - 3
07:29
341百分比布局 - 1
06:15
342百分比布局 - 3
06:19
343Flex-体验
09:43
344Flex-简介
08:40
345Flex-组成
08:42
346Flex-主轴对齐方式 - 1
05:21
347Flex-主轴对齐方式 - 3
05:23
349Flex-单独控制某个盒子侧轴对齐方式
03:17
351Flex-弹性伸缩比 - 1
06:24
352Flex-弹性伸缩比 - 3
06:27
353小兔鲜儿-确认订单-准备工作 - 1
05:07
354小兔鲜儿-确认订单-准备工作 - 3
05:07
355小兔鲜儿-确认订单-整体布局 - 1
08:10
356小兔鲜儿-确认订单-整体布局 - 3
08:11
357小兔鲜儿-确认订单-底部支付-布局
07:38
358小兔鲜儿-确认订单-底部支付-左侧
07:16
359小兔鲜儿-确认订单-底部支付-右侧
04:25
360小兔鲜儿-确认订单-用户信息-整体布局 - 1
06:32
361小兔鲜儿-确认订单-用户信息-整体布局 - 3
06:34
362小兔鲜儿-确认订单-用户信息-内容布局
05:38
363小兔鲜儿-商品-布局 - 1
06:14
364小兔鲜儿-商品-布局 - 3
06:16
365小兔鲜儿-商品-数量
05:36
366小兔鲜儿-商品-描述 - 1
08:19
367小兔鲜儿-商品-描述 - 3
08:17
368小兔鲜儿-其他信息-布局 - 1
05:36
369小兔鲜儿-其他信息-布局 - 3
05:37
370小兔鲜儿-其他信息-内容
08:47
371Flex-修改主轴方向
07:51
372Flex-主轴方向和对齐方式
05:32
373Flex-弹性盒子换行
08:52
374Flex-调整行对齐方式
05:51
375小兔鲜儿-pc-项目介绍 - 1
05:07
376小兔鲜儿-pc-项目介绍 - 3
05:08
377小兔鲜儿-pc-背景
07:25
378小兔鲜儿-pc-内容布局
08:51
379小兔鲜儿-pc-账户概览-布局
08:51
380小兔鲜儿-pc-账户概览-内容 - 1
07:25
381小兔鲜儿-pc-账户概览-内容 - 3
07:24
382小兔鲜儿-pc-账户概览-图片尺寸
03:54
383小兔鲜儿-pc-公共面板-布局 - 1
05:13
384小兔鲜儿-pc-公共面板-布局 - 3
05:09
385小兔鲜儿-pc-公共面板-文字样式
04:30
386小兔鲜儿-pc-订单-li布局
07:03
387小兔鲜儿-pc-订单-goods
09:18
388小兔鲜儿-pc-订单-goods-省略号
07:29
389rem-基本使用
07:04
390rem-媒体查询 - 1
06:28
391rem-媒体查询 - 3
06:35
392rem-移动适配 - 1
05:03
393rem-移动适配 - 3
05:12
394rem-布局流程 - 1
05:31
395rem-布局流程 - 3
05:36
396rem-flexible移动适配
09:47
397Less-体验
06:52
398Less-简介
03:04
400Less-注释
04:22
401Less-计算
07:25
402Less-嵌套 - 1
05:03
403Less-嵌套 - 3
05:00
404Less-变量 - 1
05:19
405Less-变量 - 3
05:22
406Less-导入
06:01
407Less-导出-插件配置
08:38
408Less-导出-单独路径
04:30
409Less-禁止导出
03:47
410游乐园-Less-导入
03:13
411游乐园-整体布局
09:45
412游乐园-根字号变量
05:15
413游乐园-banner区域
04:02
414游乐园-活动标题
04:47
415游乐园-活动-状态-蓝色
06:47
416游乐园-活动-状态-灰色
08:30
417游乐园-活动-文字-top
06:46
418游乐园-活动-文字-bottom
07:13
419游乐园-活动-内容复制
04:16
420游乐园-活动-底部工具栏 - 1
05:25
421游乐园-活动-底部工具栏 - 3
05:33
422vw-体验
09:48
423vh-体验
03:30
424vw-移动适配
06:27
425vh-全面屏影响
05:10
426B站-获取素材
08:51
427B站-项目准备
05:51
428B站-头部-布局 - 1
05:35
429B站-头部-布局 - 3
05:36
430B站-vw变量
01:39
431B站-头部-logo图标
06:54
432B站-头部-right内容
09:16
433B站-头部-更多
07:33
434B站-头部-字体图标字号
01:42
435B站-头部-tab - 1
05:10
436B站-头部-tab - 3
05:15
437B站-视频-布局 - 1
06:29
438B站-视频-布局 - 3
06:30
440B站-视频-介绍文字
03:47
441B站-视频-数量统计
09:41
442媒体查询-书写顺序
09:35
443了解-媒体查询-完整写法
06:27
444媒体查询-link写法
06:17
445媒体查询-隐藏
09:26
446bootstrap-体验
07:10
448bootstrap-下载
09:56
449bootstrap-使用
08:43
450bootstrap-栅格系统-原理 - 1
05:17
451bootstrap-栅格系统-原理 - 3
05:14
452bootstrap-栅格系统-代码 - 1
05:13
453bootstrap-栅格系统-代码 - 3
05:14
454bootstrap-栅格系统-其他类名 - 1
05:13
455bootstrap-栅格系统-其他类名 - 3
05:14
456bootstrap-介绍
06:19
457bootstrap-表格
08:47
458bootstrap-按钮
07:23
459bootstrap-组件
07:57
460bootstrap-字体图标
03:22
461bootstrap-插件-下拉菜单
07:10
462bootstrap-插件-轮播图
06:49
463AlloyTeam-项目准备
04:35
464AlloyTeam-头部-组件
06:41
465AlloyTeam-头部-样式
07:18
466bootstrap-定制-项目导航 - 1
06:58
467bootstrap-定制-项目导航 - 3
07:03
468AlloyTeam-开源项目-标题文字
06:28
469AlloyTeam-开源项目-栅格布局
04:14
470AlloyTeam-开源项目-内容
06:32