2019年6月14日
锚的使用
摘要： (1)对于a标签可以通过name属性定义锚的位置 (2)对于其他标签可以通过id属性定义锚的位置 a标签创建锚连接基本格式： id属性创建锚连接基本格式： 锚链接的使用示例： 阅读全文
posted @ 2019-06-14 13:03 请叫我二狗哥 阅读(347) 评论(0) 推荐(0)
定时器小案例：模拟火箭发射按钮
摘要： 模拟火箭发射时的按钮状态：数字从10减少到0，在数字变为0之前按钮均为不可点击状态，在变为0后，按钮变为可点击状态。 参考代码： 阅读全文
posted @ 2019-06-14 11:13 请叫我二狗哥 阅读(601) 评论(0) 推荐(0)
2019年6月13日
HTML文档中class的命名规则以及命名规范
摘要： 1、采用英文字母、数字以及“-”和“_”命名。 2、以小写字母开头，不能以数字和“-”、“_”开头。 3、命名形式：单字，连字符，下划线和驼峰。 4、使用有意义命名。 其中(3)、(4)条规定主要是便于编程者“望文生义”，快速通过class名称了解该定位元素的位置和作用。这点对于对于合作编程的项目以 阅读全文
posted @ 2019-06-13 12:51 请叫我二狗哥 阅读(4240) 评论(0) 推荐(1)
3-3 编程练习：jQuery键盘事件案例
摘要： 3-3 编程练习 完善下面的代码，在input框中输入内容的时候同样显示在下面的p标签中 任务 1、选中input元素 2、使用键盘事件，将input框中的内容添加到p标签中 任务提示 val()方法返回或者设置被选元素的值，获取输入框中的内容可以使用val() 参考代码 $($).ready(fu 阅读全文
posted @ 2019-06-13 12:30 请叫我二狗哥 阅读(276) 评论(0) 推荐(0)
2019年6月12日
慕课网JavaScript函数1-20 作业：函数的基础封装
摘要： 1-20 作业 小伙伴们，掌握了JavaScript的语法、流程控制语句以及函数，接下来让我们运用所学知识完成如gif图所示的效果——计算自己出生那天是该年当中的第几天。 gif效果图如下: 任务描述 一、语言和环境 1、实现语言：HTML、JavaScript 2、环境要求及开发工具：Sublim 阅读全文
posted @ 2019-06-12 18:08 请叫我二狗哥 阅读(226) 评论(0) 推荐(0)
jQuery属性选择器
摘要： jQuery属性选择器是基于元素属性作为筛选条件的选择器。 [attribute] 属性名选择器 [attribute=value]属性值选择器 [attribute!=value]非属性值选择器 [attribute^=value]属性值以某个字符串开头的选择器 [attribute$=value 阅读全文
posted @ 2019-06-12 14:27 请叫我二狗哥 阅读(8872) 评论(0) 推荐(2)
2019年6月11日
jQuery层级选择器
摘要： jQuery层级选择器 (A)后代选择器 $('ancestor descendant') 在给定的祖先元素下，匹配所有的后代元素 (B)直接后代选择 $('parent > child') 在给定的父元素下匹配所有的子元素 (C)兄弟元素选择器 (1)相邻下一个兄弟元素选择器 $('prevSib 阅读全文
posted @ 2019-06-11 13:11 请叫我二狗哥 阅读(214) 评论(0) 推荐(0)
jQuery多项选择器
摘要： jQuery多项选择器模式： $("selector1,selector2,selectorN"); 将每一个选择器匹配到的元素合并后一起返回，可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。 示例代码： 控制台打印结果： id选择器“#one”和clas选择器“.string”所选择的元 阅读全文
posted @ 2019-06-11 12:39 请叫我二狗哥 阅读(3580) 评论(0) 推荐(0)
2019年6月10日
慕课网6-4 编程练习：jQuery选择器中的过滤器
摘要： 6-4 编程练习 结合所学的jQuery过滤器知识，实现如下图所示的隔行换色效果 任务 使用jQuery的.css()方法设置样式，语法css('属性 '属性值') 使用:odd和:even过滤器实现效果 参考代码： 阅读全文
posted @ 2019-06-10 14:56 请叫我二狗哥 阅读(131) 评论(0) 推荐(0)
慕课网4-6 编程练习:jQuery后排兄弟选择器
摘要： 4-6 编程练习 结合所学的兄弟选择器" ~ "，实现如下图所示效果： 任务 (1)使用兄弟选择器" ~ "将技术语言的背景色变成红色 (2)使用jQuery的.css()方法设置样式，语法css('属性 '属性值') 参考代码： 阅读全文
posted @ 2019-06-10 12:44 请叫我二狗哥 阅读(145) 评论(0) 推荐(0)
慕课网4-2 编程练习：jQuery祖先后代选择器小案例
摘要： 4-2 编程练习 结合所学的祖先后代选择器，实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式，语法css('属性 '属性值') 参考代码： 阅读全文
posted @ 2019-06-10 12:09 请叫我二狗哥 阅读(171) 评论(0) 推荐(0)
2019年6月7日
慕课网2-5 编程练习：通过jQuery通配符选择器进行文字变色
摘要： 2-5 编程练习 请请使用*选择器将div标签中的字体颜色变成红色 效果图： 任务 （1）使用通配符选择器 （2）使用jQuery的.css()方法设置样式，语法css('属性 '属性值') 参考代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta 阅读全文
posted @ 2019-06-07 13:23 请叫我二狗哥 阅读(237) 评论(0) 推荐(0)
2019年6月6日
3-5 编程练习：jQuery实现简单的图片对应展示效果
摘要： 3-5 编程练习：jQuery实现简单的图片对应展示效果 通过这个章节的学习， 老师带领大家完成了一个基本的图片切换特效，接下来，我们也实现一个类似的效果，点击相应的按钮，切换对应的图片。 效果图 : 任务 1、首先建立一个就绪函数ready函数，把所有的jQuery内容都写到这个函数中。 2、选中 阅读全文
posted @ 2019-06-06 16:06 请叫我二狗哥 阅读(301) 评论(0) 推荐(0)
justify-content属性
摘要： justify-content 用于设置或检索弹性盒子元素在主轴方向上的对齐方式。 属性值：flex-start 属性值：flex-end 属性值：center 属性值：space-between 属性值：space-around 通过具体代码示例各个属性值的效果。 HTML结构 CSS样式： 属性 阅读全文
posted @ 2019-06-06 13:13 请叫我二狗哥 阅读(1535) 评论(0) 推荐(0)
2019年6月5日
慕课网5-2编程练习：flex布局制作卡片布局案例
摘要： 慕课网5-2编程练习：flex布局制作卡片布局案例 小伙伴们，学习了卡片布局，接下来我们根据效果图，也写出一个卡片布局的页面吧! 效果图如下： 任务 1、主体内容的卡片一行只能显示两个。 2、卡片与卡片之间的距离相等，行与行之间的距离也相等。 3、卡片的主体内容居中显示。 4、当鼠标放在按钮上时，按 阅读全文
posted @ 2019-06-05 16:34 请叫我二狗哥 阅读(753) 评论(0) 推荐(0)
2-5编程练习：响应式布局案例——不同屏幕大小显示不同图片布局
摘要： 2-5编程练习 我们刚学习了通过媒体查询进行响应式布局，接下来我们来实现图片在显示器大小变化时，布局由4列变3列变2列变1列的响应式效果吧。 要求： (1)显示器宽度大于960px时，图片呈一行4列布局; (2)宽度小于960px大于780px时，呈一行3列布局; (3)宽度小于780px大于440 阅读全文
posted @ 2019-06-05 16:28 请叫我二狗哥 阅读(977) 评论(0) 推荐(0)
flex中align-content属性
摘要： 在flex弹性盒模型中align-content属性控制容器内多行在交叉轴上的排列方式 默认值：stretch 可用值： 属性值：flex-start 属性值：flex-end 属性值：center 属性值：stretch (默认值) 属性值：space-between 属性值：space-arou 阅读全文
posted @ 2019-06-05 13:28 请叫我二狗哥 阅读(571) 评论(0) 推荐(0)
2019年6月3日
慕课网2-3编程练习：媒体查询用法响应式效果小案例-字体颜色随浏览器窗口宽度而变化
摘要： 2-3编程练习 我们刚学习过了媒体查询的用法，接下来我们事先一个小的响应式效果吧。（建议到本地践行测试哦） 要求： （1）浏览器窗口宽度大于1100px时，文字颜色为红色； （2）小于1100px大于960px时，文字颜色为橙色； （3）小于960px大于800px时，文字颜色为黄色； （4）小于8 阅读全文
posted @ 2019-06-03 18:29 请叫我二狗哥 阅读(493) 评论(0) 推荐(0)
阿拉伯数字1与英语字母l造成的代码bug
摘要： 在VS code编辑器中，“1”（阿拉伯数字1）和“l”（字母L的小写）仅凭肉眼几乎无法区别开来。测试图片不显示，而且控制台提示图片资源不存在，当时怎么看都没有代码逻辑或语法错误。代码一点点对比，在纯文本中才能发现一些显示上的区别。这真是一个不大不小的坑。 还有类似的坑，搜狗输入法状态下的“丨”（竖 阅读全文
posted @ 2019-06-03 18:11 请叫我二狗哥 阅读(736) 评论(0) 推荐(0)
2019年5月31日
慕课网3-13编程练习：采用flex弹性布局制作页面主导航
摘要： 小伙伴们，伸缩容器的属性我们已经学完了，接下来使用我们所学的伸缩容器属性完成下面的效果图。 要求： 1、logo、导航项、登录注册按钮这三项在水平和垂直方向上都对齐，而且他们之间的距离也相等。 2、导航项各项之间的距离也是一样的。 3、登录、注册按钮之间的距离也是一样的。 慕课网logo图： 效果图 阅读全文
posted @ 2019-05-31 16:40 请叫我二狗哥 阅读(510) 评论(0) 推荐(0)