慕课网

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

初识HTML(5)+CSS(3)

最热最新

慕仰2390403

开头空两格喔 - 使用text-indent为文本添加首行缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?</p>

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

查看全部

0 采集收起来源：开头空两格喔 - 使用text-indent为文本添加首行缩进
2021-08-23
慕仰2390403

开头空两格喔 - 使用text-indent为文本添加首行缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

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

查看全部

0 采集收起来源：开头空两格喔 - 使用text-indent为文本添加首行缩进
2021-08-23
慕仰2390403

面试常考题之宽高不定实现盒子水平垂直居中
这一章我们来学习未知宽高实现盒子水平垂直居中，通常使用定位以及translate完成。参考下面例子
<div class="box">
<div class="box1">
慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
</div>
</div>
添加样式：
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;

}

.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

查看全部

0 采集收起来源：面试常考题之宽高不定实现盒子水平垂直居中
2021-08-23
慕仰2390403

面试常考题之已知宽高实现盒子水平垂直居中
这一章节我们来学习已知宽高实现盒子水平垂直居中。通常使用定位完成，例如想要实现以下效果：

要实现子元素相对于父元素垂直水平居中,我们只需要输入以下代码：
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：

3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

查看全部

1 采集收起来源：面试常考题之已知宽高实现盒子水平垂直居中
2021-08-23
果果橙

使用重置按钮，重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法：
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
举例：

在浏览器中显示的结果：

输入账号
单击重置按钮

查看全部

0 采集收起来源：使用重置按钮，重置表单信息
2021-08-23
慕仰2390403

水平居中设置-定宽块状元素
当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
也可以写成：
margin-left:auto; margin-right:auto;
注意：元素的“上下 margin” 是可以随意设置的。

查看全部

0 采集收起来源：水平居中设置-定宽块状元素
2021-08-23
慕仰2390403

水平居中设置-行内元素
我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。
这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style> .txtCenter{ text-align:center; } </style>

查看全部

0 采集收起来源：水平居中设置-行内元素
2021-08-23
果果橙

提交按钮
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
举例：

在浏览器中显示的结果：

查看全部

0 采集收起来源：填完就可以提交咯 - 提交按钮
2021-08-23
慕仰2390403

我想占大头 - 给子元素设置flex占比
这一章节我们来学习flex属性，设置子元素相对于父元素的占比。
可以参考右侧编辑器的代码，测试效果如下：

技术点的解释：
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。

查看全部

0 采集收起来源：我想占大头 - 给子元素设置flex占比
2021-08-23
慕仰2390403

操作一下竖轴- 使用align-items属性设置纵轴排列方式
这一章节我们来学习align-items属性，本属性定义了项目在交叉轴上的对齐方式。属性值分别为：
align-items: flex-start | flex-end | center | baseline | stretch;
结合右侧编辑器中的布局以及下面的样式设置进行理解：
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-08-23
慕仰2390403

justify-content属性
flex-start：交叉轴的起点对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

查看全部

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

弹性盒模型 - 弹性盒模型之flex属性
这一章节我们来学习flex弹性盒子模型，根据下面的例子来理解一下吧：

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

查看全部

1 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2021-08-23
果果橙

使用select、option标签创建下拉菜单
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：
讲解：
1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。
2、select标签里面只能放option标签，表示下拉列表的选项。
3、option标签放选项内容，不放置其他标签。
4、value：
5、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。
在浏览器中显示的结果：

查看全部

0 采集收起来源：使用select、option标签创建下拉菜单
2021-08-23
weixin_宝慕林8096693
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style type="text/css">
/*添加边框样式粗细为1px 颜色为红色的实线*/

.food>li {border:1px solid red;}
.first>span{border:1px solid red;}
</style>
</head>

<body>
<p class="first">三年级时<span>我还是一个<span>胆小如鼠</span>的小女孩</span>上课从来不敢回答老师提出的问题生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>

</html>
查看全部

0 采集收起来源：捡了一个儿子 - 子选择器
2021-08-23
weixin_宝慕林8096693

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>认识html标签</title>
<style type="text/css">
#stress {
color: red;
}
#css{
color:green;
}
</style>
</head>

<body>
<h1>勇气</h1>
<p>三年级时我还是一个<span id="stress">胆小如鼠</span>的小女孩上课从来不敢回答老师提出的问题生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时我们班上了一节<span id="css">公开课</span>老师提出了一个很简单的问题班里很多同学都举手了甚至成绩比我差很多的也举手了还说着"我来我来。"我环顾了四周就我没有举手。</p>
</body>

</html>

查看全部

0 采集收起来源：取个唯一标识 - ID选择器
2021-08-23
慕仰2390403

弹性盒模型 - 弹性盒模型之flex属性
这一章节我们来学习flex弹性盒子模型，根据下面的例子来理解一下吧：

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

查看全部

0 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2021-08-23