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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 浮动模型: 块状元素并排显示 div{ float:left; } div{ float:right; }
    查看全部
  • 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行) 右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素
    查看全部
  • 流动模型(一) 先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。在默认状态下,块状元素的宽度都为100%
    查看全部
  • css布局模型: 有三种布局模型: 1、流动模型(Flow) 2、浮动模型 (Float) 3、层模型(Layer)
    查看全部
  • 边界: 元素与其它元素之间的距离 margin:10px; 属性跟padding一样 padding在border内,margin在border外
    查看全部
  • 盒模型 - - 填充(padding) div{padding:20px 10px 15px 30px;}上右下左(顺时针) div{padding:10px;}四个方向填充一样 div{padding:10px 20px;}上下填充一样为10px,左右一样为20px
    查看全部
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="author" content="Csdn" /> <meta name="Copyright" content="Csdn" /> <meta name="description" content="" /> <meta content="" name="keywords" /> 这些代码干嘛用的 重要吗 第一行说明了他的文字编码 第二行说明了他采用的语言 第三行说明了他的作者 第四行说明了他的版权 第五行是对网站的简单描述 第六行是说明了本网站的关键字 后便两行主要是被百度这些搜索网站检索的时候用的 非常重要
    查看全部
    0 采集 收起

    2018-03-22

  • <em>文字</em>:文字斜体 <strong>文字<、strong>:文字加粗
    查看全部
    0 采集 收起

    2018-03-22

  • <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> <img src = "myimage.gif" alt = "My Image" title = "My Image" /> 1、src:标识图像的位置; 2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本; 3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本); 4、图像可以是GIF,PNG,JPEG格式的图像文件。
    查看全部
    0 采集 收起

    2018-03-22

  • <a href="mailto:shaojun724@126.com?cc=shaojun724@126.com&bcc=shaojun724@126.com&subject=我爱你 body=我非常的爱你">my mail</a> cc 抄送 bcc 秘密抄送 subject 题目 body 内容 ;抄送多个邮箱有;隔开 <a href="mailto:shaojun724@126.com;shaojun724@126.com">my mail</a>
    查看全部
    0 采集 收起

    2018-03-22

  • 盒模型--宽度和高度 盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。 因此一个元素实际宽度: (盒子的宽度)=左边界margin+左边框border+左填充padding+内容宽度width+右填充padding+右边框border+右边界margin。 元素的高度也是同理。 比如: css代码: div{ width:200px; padding:20px; border:1px solid red; margin:10px; } html代码: <body> <div>文本内容</div> </body> 元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px (上一节中的列表项长度为什么这么长啊,不明白同学是不是应该看一看标签分类那一小节,li是块状元素,块状元素有一个特点之一:在不设置宽度的情况下,显示为父容器的100%。)
    查看全部
  • 边框 p标签单独设置左边框 p{border-left:1px solid red;} top 上, bottom 下,left 左,right右 margin 跟 padding 同样可单独设置四个方向
    查看全部
  • 盒模型 - - 边框(border) 这条线可设置它的粗细、样式和颜色 border:2px solid red; 等价于: border-width:2px; border-style:solid; border-color:red; 注意: 1、border-style:dashed(虚线)| dotted(点线)| solid(实线)... 2、border-color可设置为十六进制颜色,如:border-color:#888; 3、border-width:thin | medium | thick(但不是很常用)|象素(px)...
    查看全部
  • 盒子模型: 月饼盒:页面元素(例:<div>) 月饼(内容):文字、图片、另一个标签元素 月饼盒到月饼的距离:内填充(padding) 两个月饼盒之间的距离:外边距(margin) 盒子的边框(border) 块级标签都具备盒子模型特征。如:<div><ul><ol><p><h><table>
    查看全部
  • 元素分类--内联块状元素 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。 inline-block元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高以及顶和底边距都可设置。
    查看全部

举报

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

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