慕课网

初识HTML(5)+CSS(3)-升级版

最热最新

superman4892475

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

查看全部

0 采集收起来源：我想占大头 - 给子元素设置flex占比
2023-12-28
superman4892475

align-items: flex-start | flex-end | center | baseline | stretch;

竖直方向
flex-start：默认值，左对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

查看全部

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

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

flex-start：左对齐。
flex-end：右对齐。
center：居中。
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

查看全部

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

1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。

查看全部

0 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2023-12-28
superman4892475

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

浮动模型
float:left;
float:right;

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

查看全部

0 采集收起来源：排队显示-流动模型（一）
2023-12-28
superman4892475

一个元素实际宽度（盒子的宽度）=左边界(margin)
+左边框(border)+左填充(padding)+内容宽度+右填充(padding)+右边框(border)+右边界(margin)。

查看全部

0 采集收起来源：长胖长高点--宽度和高度
2023-12-27
superman4892475

display: none;
none设置此元素不会被显示，当想要元素隐藏的时候可以使用此值。

查看全部

0 采集收起来源：隐身术 - none不占据位置
2023-12-27
superman4892475

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
display:block就是将元素显示为块级元素。

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
display:inline将元素设置为内联元素。

inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
display:inline-block就是将元素设置为内联块状元素。

查看全部

0 采集收起来源：给元素分个类 - 元素分类
2023-12-27
superman4892475

选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

查看全部

0 采集收起来源：别插队啊 - 选择器的优先级
2023-12-27
superman4892475

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

查看全部

0 采集收起来源：这么快就当爷爷了? - 后代选择器
2023-12-27
AppMan

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>css3选择器优先级</title>
<style type="text/css">
/* 选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 */
/* 选择器: id选择器 */
#id_box {
color: red;
font-size: 20px;
}
/* 选择器: 类选择器 */
.cls {
color: blue;
font-size: 30px;
}
/* 选择器: 标签选择器 */
div {
color: black;
font-size: 40px;
}
/* 选择器: 通用符选择器 */
* {
color: yellow;
font-size: 50px;
}
</style>
</head>

<body>
<div id="id_box" class="cls" >
我是一个div
</div>
</body>

</html>

查看全部

0 采集收起来源：别插队啊 - 选择器的优先级
2023-12-26
AppMan

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>

<body>
<form>
<lable>联系我们</lable>
<br />
<textarea cols="50" rows=10>在这里输入内容...</textarea>
</form>
</body>

</html>

查看全部

0 采集收起来源：留下您宝贵的意见 - 使用<textarea>标签创建文本域
2023-12-25
AppMan

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>

<body>

<form method="post">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>

</html>

查看全部

0 采集收起来源：使用表单标签，与用户交互 - 使用<form>创建表单
2023-12-25
AppMan

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>使用thead、tbody、tfoot标签</title>
</head>

<body>
<table border="1">


<thead>
<tr>
<th>科目</th>
<th>分数</th>
</tr>
</thead>

<tbody>
<tr>
<th>语文</th>
<td>99</td>
</tr>
<tr>
<th>数学</th>
<td>60</td>
</tr>
</tbody>

<tfoot>
<tr>
<th>总分</th>
<td>159</td>
</tr>
</tfoot>
</table>
</body>

</html>

查看全部

0 采集收起来源：使用thead、tbody、tfoot定义表格
2023-12-25
AppMan

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>学习表格标签</title>
</head>

<body>


<table border="1">

<caption>前端三剑客</caption>

<tr>

<th>知识点</th>
<th>重要程度</th>
<th>难度</th>
<th>学习周期</th>
</tr>
<tr>

<td>html</td>
<td>5星</td>
<td>3星</td>
<td>7天</td>
</tr>
<tr>
<td>css</td>
<td>5星</td>
<td>4星</td>
<td>10天</td>
</tr>
<tr>
<td>js</td>
<td>5星</td>
<td>5星</td>
<td>20天</td>
</tr>
</table>
</body>

</html>

查看全部

0 采集收起来源：听说你要制定学习计划了-使用table家庭为网页添加表格
2023-12-25

首页上一页 21 22 23 24 25 26 27 下一页尾页

0/150

提交

取消

开始学习

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

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