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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • asdawdq

    查看全部
  • 层模型
    1:绝对定位position:absolute最接近的一个具有定位属性的父包含块进行绝对定位;没有则相对于浏览器(body)
    2:相对定位position:relative相对于元素本身进行偏移,但偏移前的位置仍然会保留(后面的元素文本流会跟随偏移前的元素位置)
    3:固定定位position:fixed相对于网页窗口,不会随着文本流移动而移动;和background-attachment:fixed功能相同。
    4:relative与absolute配合使用:绝对定位可以不以浏览器为参照,而以任一元素为参照进行定位。规则:1、参照定位的元素必须是相对   定位元素的前辈元素;2、参照定位的元素必须加入position:relative

    查看全部
  • 内联元素 a – 锚点
    2 abbr – 缩写
    3 acronym – 首字
    4 b – 粗体(不推荐)
    5 bdo – bidi override
    6 big – 大字体
    7 br – 换行
    8 cite – 引用
    9 code – 计算机代码(在引用源码的时候需要)
    10 dfn – 定义字段
    11 em – 强调
    12 font – 字体设定(不推荐)
    13 i– 斜体
    14 img – 图片
    15 input – 输入框
    16 kbd – 定义键盘文本
    17 label – 表格标签
    18 q – 短引用
    19 s – 中划线(不推荐)
    20 samp – 定义范例计算机代码
    21 select – 项目选择
    22 small – 小字体文本
    23 span – 常用内联容器,定义文本内区块
    24 strike – 中划线
    25 strong – 粗体强调
    26 sub – 下标
    27 sup – 上标
    28 textarea– 多行文本输入框
    29 tt – 电传文本
    30 u – 下划线
    31 var – 定义变量

    在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

    右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

    查看全部
  • 流动布局模型具有2个比较典型的特征:第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

    查看全部
  • 在网页中,元素有三种布局模型:
    1、流动模型(Flow)也就是标准文档流
      ①块元素p/h/div/lu/li(霸占一行)
      ②内联元素a、span、em、strong
    2、浮动模型 (Float)
    3、层模型(Layer)也就是绝对定位
    ①绝对定位(position: absolute)
    ②相对定位(position: relative)
    ③固定定位(position: fixed)

    查看全部
  • text-indent:2em 文本之前设置两个空格line-height:1.5em  段落行间距

    查看全部
  •  使用text-indent为文本添加首行缩进

    中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:

    p{text-indent:2em;} <p>w </p>


    注意:2em的意思就是文字的2倍大小。

    查看全部
  • 开头空两格喔 - 使用text-indent为文本添加首行缩进

    中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:

    p{text-indent:2em;} <p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>


    注意:2em的意思就是文字的2倍大小。

    查看全部
  • 开头空两格喔 - 使用text-indent为文本添加首行缩进

    中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:

    p{text-indent:2em;} <p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>


    注意:2em的意思就是文字的2倍大小。

    查看全部
  • 颜色的值有三种设置方式:英文命令颜色RGB颜色与PS 中的RGB 颜色是一致的,有R(red)、G(green)、B(blue)三种颜色的比例来配色,每一项的值可以是0~255 之间的整数,也可以是0%~100% 的百分数十六进制颜色这种颜色设置方法是现在比较普遍使用的方法,其原理也是RGB 设置,但是其每一项的值由0~255 变成了十六进制00-ff,比如“#00ffff”

    查看全部
  • 不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。(注:基本上什么盒子外边距、内边距,还有定位什么的是不能被继承的)
    所有元素可继承:visibility和cursor。
    内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
    终端块状元素可继承:text-indent和text-align。
    列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
    表格元素可继承:border-collapse。

    查看全部
  • 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:
    .first  span{color:red;}

    请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

    总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

    查看全部
  • 选择指定标签元素的第一代子元素”就是让样式只作用于它的孩子,不作用与他的孙子。像案例里面“&lt;p class="first"&gt;&lt;span&gt;我还是一个&lt;span&gt;胆小如鼠&lt;/span&gt;的小女孩&lt;/span&gt;&lt;/p&gt;”外面的span才是“p class="first"”的孩子,“&lt;span&gt;胆小如鼠&lt;/span&gt;”虽然用是span包的,但它是“p class="first"”的孙子,它包在前一个span的里面(就是它孩子的里面),所以样式对它不起作用。如果把“&gt;”改为空格,就会发现两个span都有边框了。空格用于元素的所有后代的。

    查看全部
  • input的type属性type="text" 账号type="password" 密码type="number" 数字类型type="url"  网址类型type="email" 邮箱类型

    查看全部
  • input的type属性设置为url,则表示该输入框的类型为网址。数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。<body>    <form name="input-url" method="get" action="save.php">        <input type="url">            </form></body>

    查看全部

举报

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

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