慕课网

精品课程初识HTML(5)+CSS(3)

初识HTML(5)+CSS(3)

最热最新

weixin_慕标4176587
```
 1-1 html和css的关系
```
单纯的html标签:

代码如下：
```
<p>我是一个p标签</p>
```
经过css修饰过后html标签：
代码如下：
```
  p {
        color: red;
        border: 1px solid blue;
        width: 140px;
        height: 40px;
    }
```
技术点的解释：
1、css是用来修饰html样式的
2、html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css
3、html+css构成了我们网页的基本页面结构和样式
查看全部

0 采集收起来源：佛靠金装，人靠衣装 - html和css的关系
2021-01-24
bubblllllle

这一章节我们来学习flex属性，设置子元素相对于父元素的占比。
可以参考右侧编辑器的代码，测试效果如下：
技术点的解释：
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。

查看全部

0 采集收起来源：我想占大头 - 给子元素设置flex占比
2021-01-24

bubblllllle

align-items属性:

flex-start：默认值，左对齐

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

flex-end：交叉轴的终点对齐

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

center：交叉轴的中点对齐

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

baseline：项目的第一行文字的基线对齐。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。

实现效果：

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 .box {
        height: 300px;
        background: blue;
        display: flex;
        align-items: stretch;
    }

    .box div {
        /*不设置高度，元素在垂直方向上铺满父容器*/
        width: 200px;
    }

实现效果：

查看全部

0 采集收起来源：操作一下竖轴- 使用align-items属性设置纵轴排列方式

2021-01-24

bubblllllle

justify-content属性：定义了项目在主轴上的对齐方式

 justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：交叉轴的起点对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

flex-end：右对齐

.box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

center：居中

 .box {
        background: blue;
        display: flex;
        justify-content: center;
    }

space-between：两端对齐，项目之间的间隔都相等。

.box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }

查看全部

0 采集收起来源：操作一下横轴- 使用justify-content属性设置横轴排列方式

2021-01-24

BurstLink
文本输入框or密码输入框:
语法：
```
<form>
   <input type="text/password" name="名称" value="文本" />
</form>
```
查看全部

0 采集收起来源：先来填用户名和密码 - 文本输入框、密码输入框
2021-01-24
慕粉4391284

网友摘录：当body的高度大于视口高度时，footer在body的最底部。
当body的高度小于视口高度时，footer脱离文档流，使用固定定位保持在视口的底部

查看全部

0 采集收起来源：结尾神转折 - <footer>标签定义底部区域
2021-01-24
bubblllllle

上面的代码：
三个块元素设置大小以及背景色，在父容器中添加flex。
技术点的解释：
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。

查看全部

0 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2021-01-23
bubblllllle
使用position:absolute相对于其它元素进行定位:
1、参照定位的元素必须是相对定位元素的前辈元素：
```
<div id="box1">
    <div id="box2">相对参照元素进行定位</div>
</div>
```
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
```
#box1{
    width:200px;
    height:200px;    position:relative;        }
```
定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
```
#box2{    position:absolute;
    top:20px;
    left:30px;         }
```
查看全部

0 采集收起来源：Relative与Absolute组合使用
2021-01-23
bubblllllle
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
```
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
```
查看全部

0 采集收起来源：我就在那不动了-层模型之固定定位
2021-01-23
bubblllllle
设置层模型中的相对定位:position:relative（表示相对定位）
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
```
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>
```
什么叫做“偏移前的位置保留不动”呢？
大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：
```
<body>
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span></body>
```
从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
查看全部

0 采集收起来源：相对于自己的位置-层模型之相对定位
2021-01-23
bubblllllle
层模型中的绝对定位:position:absolute
这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
```
div{
    width:200px;
    height:200px;
    border:2px red solid;    position:absolute;
    left:100px;
    top:50px;}
<div id="div1"></div>
```
查看全部

0 采集收起来源：万事无绝对 -层模型之绝对定位
2021-01-23
bubblllllle

层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

查看全部

0 采集收起来源：什么是层模型？
2021-01-23
bubblllllle

在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

查看全部

0 采集收起来源：排队显示-流动模型（二）
2021-01-23
bubblllllle

流动模型:
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

查看全部

0 采集收起来源：排队显示-流动模型（一）
2021-01-23
bubblllllle

CSS3包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

查看全部

0 采集收起来源：CSS3的布局 - css布局模型
2021-01-23

首页上一页 336 337 338 339 340 341 342 下一页尾页

0/150

提交

取消

开始学习

课程须知: 没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。

老师告诉你能学到什么？: 本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。