为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
初识HTML(5)+CSS(3)_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • CSS样式:内联式、嵌入式和外部式三种
    查看全部
    0 采集 收起

    2014-12-25

  • 语法: <em>需要强调的文本</em> <strong>需要强调的文本</strong>
    查看全部
    0 采集 收起

    2018-03-22

  • 语法: <p>段落文本</p> 一次就是一个段落
    查看全部
    0 采集 收起

    2018-03-22

  • 元素分类
    查看全部
  • HTML的代码注释<!--注释文字 -->
    查看全部
  • 总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
    查看全部
  • CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。 在网页中,元素有三种布局模型: 1、流动模型(Flow) 2、浮动模型 (Float) 3、层模型(Layer)
    查看全部
  • iB
    颜色值缩写 关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。 例子1: p{color:#000000;} 可以缩写为: p{color: #000;} 例子2: p{color: #336699;} 可以缩写为: p{color: #369;}
    查看全部
    0 采集 收起

    2014-12-25

  • iB
    盒模型代码简写 还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ 通常有下面三种缩写方法: 1、如果top、right、bottom、left的值相同,如下面代码: margin:10px 10px 10px 10px; 可缩写为: margin:10px; 2、如果top和bottom值相同、left和 right的值相同,如下面代码: margin:10px 20px 10px 20px; 可缩写为: margin:10px 20px; 3、如果left和right的值相同,如下面代码: margin:10px 20px 30px 20px; 可缩写为: margin:10px 20px 30px; 注意:padding、border的缩写方法和margin是一致的。
    查看全部
    1 采集 收起

    2014-12-30

  • iB
    Relative与Absolute组合使用 小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范: 1、参照定位的元素必须是相对定位元素的前辈元素: <div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div> 从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。 任务 我也来试一试:我们把右侧任务区中的box4当做是图片的讲解文本。 具体要求: 1、把box4定位到图片(box3)的底部。 效果图如下: ?不会了怎么办 1、相对于底部对齐使用bottom。 参考代码如下: #box3{ width:200px; height:200px; position:relative; } #box4{ width:99%; position:absolute; bottom:0; left:0; /*这条css样式可以省略*/ }
    查看全部
  • iB
    Relative与Absolute组合使用 小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范: 1、参照定位的元素必须是相对定位元素的前辈元素: <div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div> 从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。 任务 我也来试一试:我们把右侧任务区中的box4当做是图片的讲解文本。 具体要求: 1、把box4定位到图片(box3)的底部。 效果图如下:
    查看全部
  • 回头看看就近原则
    查看全部
  • iB
    层模型有三种形式: 1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed)
    查看全部
  • 请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。 总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
    查看全部
  • iB
    第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行) 右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。
    查看全部

举报

0/150
提交
取消
课程须知
没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。
老师告诉你能学到什么?
本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识,可以利用HTML(5)、CSS(3)样式技术制作出简单页面。
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!