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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            span {
                // 字体属性一般包含字体大小,位置,颜色,是否加粗等
                font-size: 16px;
                font-weight: blod;
                text-align: center;
                color: blue;
            }
        </style>
        <title>html笔记</title>
    </head>
    <body>
        <!-- css样式 -->
        <span>css字体样式</span>
    </body>
    </html>


    查看全部
  • 表单:<form></form>

    action:浏览者输入的数据被传送到的地方,比如一个php页面(save.php)

    method:数据传送的方式(get/post)

    <form    method="post"   action="save.php"></form>

    查看全部
  • 定宽块状元素:块状元素的宽度width为固定值

    满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

    查看全部
  • 水平居中又分为两种情况:行内元素和块状元素;块状元素又分为定宽块状元素,不定宽块状元素;

    (文本、图片)父元素设置:text-align: center实现 

    查看全部
  • flex属性,设置子元素相对于父元素的占比。

    技术点的解释:

    1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

    2、flex属性的值只能是正整数,表示占比多少。

    3、给子元素设置了flex之后,其宽度属性会失效。


    查看全部
  • <h1></h1>表头

    <hr/>

    <table border="">横线

    <thead>表头

    <tr>行

    <th></th>列

    <th></th>

    </tr>

    </thead>

    <tbody>表身

    <tr>

    <td></td>列

    <td></td>

    </tr>

    </tbody>

    <tfoot>表尾

    <tr>

    <td></td>

    <td></td>

    </tr>

    </tooft>

    查看全部
  • 技术点的解释:

    1、设置display: flex属性可以把块级元素在一排显示。

    2、flex需要添加在父元素上,改变子元素的排列顺序。

    3、默认为从左往右依次排列,且和父元素左边没有间隙。


    查看全部
  • 使用position:relative遵守下面规范:

    1、参照定位的元素必须是相对定位元素的前辈元素

    2.参照定位的元素必须加入position:relative;

    3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

    查看全部
  • fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变

    查看全部
  • 如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

    查看全部
  • 如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

    查看全部
  • 层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的

    层模型有三种形式:

    1、绝对定位(position: absolute)

    2、相对定位(position: relative)

    3、固定定位(position: fixed)


    查看全部
  • 任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。

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

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


    查看全部

举报

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

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