慕课网

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

初识HTML(5)+CSS(3)

最热最新

weixin_慕侠3595967

弹性盒模型：
1、块级元素需要放在同一个父元素里
2、在父元素中设置dispaly:flex属性，改变元素的排列顺序
3、默认从左到右依次排列，和父元素左边没有间隙
.box{
dispaly:flex;
}
.box1{
}
.box2{
}

<body>
<div class="box">
<div class="box1"> </div>
<div class="box2"> </div>
</div>
</body>

查看全部

0 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2022-07-27
weixin_精慕门3431660

font-variant：是否设置大小写
值
描述
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。

查看全部

0 采集收起来源：偷个懒 - font样式的简写方式
2022-07-27
慕雪7059796

空格会作用于所有的后代元素，就是all。但是>只会作用于直接的第一代元素

查看全部

0 采集收起来源：这么快就当爷爷了? - 后代选择器
2022-07-26
慕雪7059796

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
注意关键词，第一代元素
就是只会添加第一个识别到的

查看全部

0 采集收起来源：捡了一个儿子 - 子选择器
2022-07-26
慕圣5255105

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置

查看全部

0 采集收起来源：偷个懒 - font样式的简写方式
2022-07-26
weixin_慕侠3595967

加边框
div{
border:2px solid red;
}
表示宽度2像素，样式为实心，颜色为红色。
1、其中border-style常见样式：dashed(虚线)、dotted(点线)、solid(实线)
2、border-color可设置十六进制颜色 #888
3、border-width: thin|medium|thick（不常用）

查看全部

0 采集收起来源：画个圈圈 - 使用border为盒子添加边框（一）
2022-07-26
何介涵

a:hover{color:red;}
即设置后，鼠标划过，a标签内的文本等发生相应变化，也可是其他标签如p等

查看全部

0 采集收起来源：伪装者 - 伪类选择器
2022-07-26
何介涵

* {color:red;}
即可以控制所有完整标签的样式

查看全部

0 采集收起来源：我全都要 - 通用选择器
2022-07-26
何介涵

有>号的作用范围仅包括第一级标签（如果一个标签内存在一样的标签，如表格）
无>号的作用范围在所有选择的标签样式上

查看全部

0 采集收起来源：这么快就当爷爷了? - 后代选择器
2022-07-26
何介涵

.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
改变的样式范围在<li>...</li>标签内，也可为其他标签如span等

查看全部

0 采集收起来源：捡了一个儿子 - 子选择器
2022-07-26
慕雪7059796

<!DOCTYPE html>
<html>

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

<body>
<table border="5">

<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>

创建表格的四个元素：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家庭为网页添加表格
2022-07-25
慕雪7059796

使用type=reset可让选项重置

查看全部

0 采集收起来源：使用重置按钮，重置表单信息
2022-07-25
慕雪7059796

type=submit时，为按钮，可提交表单

查看全部

0 采集收起来源：填完就可以提交咯 - 提交按钮
2022-07-25
慕雪7059796

使用selected=selected可实现默认下拉框

查看全部

0 采集收起来源：使用select、option标签创建下拉菜单
2022-07-25
weixin_慕侠3595967

文本对齐
h1{
text-align:center;
}

查看全部

0 采集收起来源：换个排列方式 - 使用text-align设置文本对齐方式
2022-07-25

首页上一页 81 82 83 84 85 86 87 下一页尾页

0/150

提交

取消

开始学习

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

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