慕课网

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

最热最新

开心( ◠‿◠ )

语法：
html4.01版本 <hr>
xhtml1.0版本 <hr />
注意：
1. <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
2. <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
3. 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

查看全部

0 采集收起来源：再来一个水平分割线 - 使用<hr>标签实现水平线标签
2023-02-06
慕仔4070705
```
<h>标题标签</h>
<h1>标题标签1级</h1>
<p>文本标签</p>
<div>容器，一组</div>
```
查看全部

0 采集收起来源：正文才是重点喔 - <section>定义区段
2023-02-06
开心( ◠‿◠ )

添加新闻信息列表 - 使用<ul><li>标签实现无序列表
语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>

查看全部

0 采集收起来源：添加新闻信息列表 - 使用<ul><li>标签实现无序列表
2023-02-06
开心( ◠‿◠ )

如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。
语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，如下图所示：

查看全部

0 采集收起来源：添加图书销售排行榜- 使用<ol><li>标签实现有序列表
2023-02-06
开心( ◠‿◠ )

用<img>标签来插入图片。
语法：
<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 采集收起来源：不发一张自拍么? - 使用<img>标签为网页添加图片
2023-02-06
开心( ◠‿◠ )

语法：
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
例如：
<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>
上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（11-13行）。
注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。

查看全部

0 采集收起来源：百度一下,你就知道 - 使用<a>标签为网页添加超链接
2023-02-06
开心( ◠‿◠ )

学习<a>标签中的target属性

a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

查看全部

0 采集收起来源：开个新窗口 - 在新建浏览器窗口中打开链接
2023-02-06
开心( ◠‿◠ )

创建表格的四个元素：table、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
4、<th>…</th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框，属性值为数字。
注意：
1、table标签用来定义整个表格，为双标签，必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列，一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

查看全部

0 采集收起来源：听说你要制定学习计划了-使用table家庭为网页添加表格
2023-02-06
开心( ◠‿◠ )

我们表格第一行为表头数据,我们用<thead>标签包裹,中间的科目和分数为表格的主体内容,我们用<tbody>标签包裹,最后的总分我们用<tfoot>标签包裹。
1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
3、<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

查看全部

0 采集收起来源：使用thead、tbody、tfoot定义表格
2023-02-06
开心( ◠‿◠ )

语法：
<form method="传送方式" action="服务器文件">
讲解：
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ：数据传送的方式（get/post）。
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
注意:
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。

查看全部

0 采集收起来源：使用表单标签，与用户交互 - 使用<form>创建表单
2023-02-06
开心( ◠‿◠ )

语法：
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
举例：
<form>
姓名：
<input type="text" name="myName">
<br/>
密码：
<input type="password" name="pass">
</form>

查看全部

0 采集收起来源：先来填用户名和密码 - 文本输入框、密码输入框
2023-02-06
开心( ◠‿◠ )

1、placeholder属性为输入框占位符,里面可以放提示的输入信息。
2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。
3、占位符内容不是输入框真正的内容。

查看全部

0 采集收起来源：给点提示呗 - placeholder属性的使用
2023-02-06
草越

第15章 css样式设置水平居中小技巧
1.定宽块状元素：块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的【设置margin="auto（默认值）"表示左右距离相等，自然就居中了】
2.行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
css代码：
<style>
.txtCenter{
text-align:center;
}
</style>
已知宽高实现盒子水平垂直居中（有宽高）
效果图
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：
3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。
宽高不定实现盒子水平垂直居中（无宽高）
transform转换，指的是改变所在元素的外观。例如：位移（水平方向，垂直方向）、旋转、缩放
位移的函数名translate，transform:translate();
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

查看全部

0 采集收起来源：水平居中设置-行内元素
2023-02-22
草越

第14章 flex弹性盒模型
flex属性
子选择器通过“>”连接两个选择器，前面选择器表示要匹配的父元素，后面选择器表示被包含的子元素
1、设置display: flex属性表示用于指定弹性盒的容器
当父元素.box的display设为flex后，子元素就会按照内容的实际宽度来显示，且子元素的高度会占满父元素的可用高度
默认值为inline
none表示此元素不会被显示
2、flex需要添加在父元素上，改变子元素的排列顺序。【只需要在父元素上添加，子元素便会自动排在一行】
3、默认为从左往右依次排列,且和父元素左边没有间隙。

----------排列方向
flex-direction：row默认值 row-reverse自右向左 column自上向下 column-reverse自下向上
----------单行或多行显示
flex-wrap：nowrap默认值，单行 wrap多行 wrap-reverse表示在wrap的基础上反向排列
----------排列顺序
order：可以调整其在伸缩盒中的排列顺序，属性值可以是正整数，负整数和0。值越大的伸缩项目在容器中越靠后
----------对齐方式
justify-content属性4个属性值【横轴】
flex-start：默认值 flex-end：右对齐 center：居中 space-between：两端对齐，项目之间的间隔都相等 space-around：表示平均分布
flex-start交叉轴的起点对齐
.box {
background: blue;
display: flex;【使三个区块在同一行】
justify-content: flex-start;【交叉轴的起点对齐】
}
flex-end右对齐
center居中
space-between两端对齐，项目之间的间隔都相等。
align-items属性【纵轴】
flex-start默认值，左对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐【三个盒子中的字体设置不同的大小】
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。【div未设置高度】

给子元素设置flex占比（设置子元素相对于父元素的占比）

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

.box2 {
flex: 3;
background: orange;
}

查看全部

0 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2023-04-14
草越

第十三章CSS3的布局模型
调整定位元素的层叠顺序z-index(属性指定一个元素的堆叠顺序)
z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下
auto:默认值。
number: 无单位的整数值，可为负数

绝对定位 position:absolute
宽高不定使用绝对定位居中，例：
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
相对定位 position:relative
固定定位 position:fixed
在网页中，元素有三种布局模型：
1、流动模型（Flow）
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行
2、浮动模型 (Float)
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
float:left【靠左】right【靠右】
3、层模型（Layer）

层模型有三种形式：
1、绝对定位(position: absolute)浏览器（body）
position:absolute【表绝对定位】例：left:100px意思左边距离窗口的距离
div元素相对于浏览器窗口向右移动100px，向下移动50px
div{
width:200px;
height:200px;
border:2px red solid; position:absolute;
left:100px;
top:50px;}
<div id="div1"></div>
2、相对定位(position: relative)
position:relative【表相对定位】
相对定位完成后，表示使此区域相对于原位置的距离
移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
3、固定定位(position: fixed)
position:fixed【表固定定位】
它不会随浏览器窗口的滚动条滚动而变化【滚动页面时，模型不动始终出现在页面窗口】
使用CSS3移动的方法与绝对定位相同

Relative与Absolute组合使用
position:relative设置在被参照定位的元素中
position:absolute设置在定位元素中
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1">
<div id="box2">相对参照元素进行定位</div>
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px; position:relative; }
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{ position:absolute;
top:20px;
left:30px; }

查看全部

0 采集收起来源：CSS3的布局 - css布局模型
2023-04-12