pink老师课程-学成在线案例资料

哔哩哔哩里面pink老师课程那里实操。

代码和图片在末尾

总结

1.代码HTML结构要清晰，最好做好注释标明模块的开始和结束如：  。

2.起类名要注意，用对应的英文字母。top 、banner、main、footer、left、right、logo、user、course、goods 、content等等，如果不知道用什么就用对应的拼音全拼的哦。

3.一些有链接的导航采用ul>li>a这种形式写的，就是li里面包含a标签来写。

如下图。

4. 结构拆分，注意先分清楚结构后再写。

在写的过程中，一些知识点的补充

1.button和input都是行内块元素，他们之间有缝隙

2.做用户头像和名字时候，vertical-align: middle;

vertical-align 属性设置一个元素的垂直对齐方式。 middle把此元素放置在父元素的中部。可以这个的搜一下CSS属性，必须是行内块元素才有效

3.background:url(images/banner.png)；这个背景图片链接形式缩写

background缩写各个值的次序依次如下：
background-color | background-image | background-repeat | background-attachment | background-position

如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉background-attachment和background-position的话：
background: #FFCC66 url("butterfly.gif") no-repeat;
例如:

.bg01{background-image: url("path/bgFile.gif");background-repeat: no-repeat;background-attachment: fixed;background-position: left top;
}/*上面可以简写为:*/
.bg01{background:#FFCC66  url("path/bgFile.gif")  no-repeat  fixed  left  top;
}

补充：background-size

取值：
(1)、value1 value2
宽度高度
(2)、value1% value2%
百分比
(3)、cover
覆盖，将背景图像等比缩放，直到背景能够覆盖到元素的所有区域

（4)、contain
包含，将背景图像等比缩放，直到背景图像碰到右边或下边时，停止缩放。

4.浮动的盒子没有外边距合并的问题所以不会塌陷

5.a是行内元素如果没有变成块级元素就无法继承上面父级的宽度

6.可以给父级设置行高，行高会继承给后面的孩子；

7.写导航的时候不确定后面可能加的文字字数，不能指定每个a标签的宽度因为文字大小不确定。用 padding就比较好。不管文字多少，内边距都是一样的。

8.块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote、form，

margin定义的是块级元素的垂直外边距，所以这里的选择器不能选到a元素上，块级元素才有宽高内外边距

9.居中的话自己计算，慢慢理清楚。

黑妈程序pink老师学成在线案例代码+图片https://download.csdn.net/download/YuKing_HONG/86823560

pink老师课程-学成在线案例资料相关推荐

9.----------------------------------------------------------------------------------------【学成在线案例】
文章目录 [学成在线案例]前端小抄(9) 一.准备素材和工具二.案例准备工作三.CSS属性书写顺序四.页面布局分析五.确定版心六.头部制作七.banner 制作八.精品推荐小模块九.精 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
Day07——PS相关操作、学成在线案例
文章目录一.PS 操作 1.1 基本操作 1.2 常见的图片格式 1.3 PS切图 1.3.1 图层切图 1.3.2 切片切图 1.3.3 PS 插件切图二.学成在线案例 2.1 准备素材和工具 ...
黑马程序员-学成在线案例-版权部份
黑马程序员-学成在线案例-版权部份一.设置大盒子因为上一层盒子没有设置高度且所有子集都浮动了,所以必须先清除上一标签的浮动.即添加clearfixcss 标签再设置一个版心wrapper css ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
CSS浮动、PS切图、学成在线案例前期准备
传统网页布局的三种方式网页布局的本质--用CSS来摆放盒子,把盒子摆放到相应位置 CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动定位标准流所谓标准流 ...
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家如有错误,欢迎指出.如有侵权,联系删除文章目录 1. 案例准备工作 2 ...
学成在线案例素材及代码
头部标签顶部一行案例分五个盒子: 顶部居中header大盒子,学成在线图片logo盒子,导航栏nav盒子, 搜索栏search盒子,用户user盒子 <div class="head ...
前端网页项目-学成在线案例
典型的企业级网站目的是为了整体感知企业级网站布局流程,复习以前知识准备素材和工具: 学成在线PSD源文件开发工具=PS(切图)/cutterman插件+vscode(代码)+chrome(测试) ...

pink老师课程-学成在线案例资料

pink老师课程-学成在线案例资料相关推荐

最新文章

热门文章