慕课网

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

最热最新

weixin_慕娘5021171

标签的用途：明白每个标签的用途（在什么情况下使用此标签合理）

查看全部

0 采集收起来源：语义化，让你的网页更好的被搜索引擎理解
2023-04-16
weixin_慕娘5021171

代码注释

查看全部

0 采集收起来源：解释不等于掩饰- html文件注释
2023-04-16
weixin_慕娘5021171

页面内容一定要放在<body>标签中

查看全部

0 采集收起来源：你就是馋人家的身子 - 认识body标签
2023-04-16
weixin_慕娘5021171

<head>标签表示头部标签通常用来嵌套<meta>、<title>、<style>等标签。
<title>标签在<title>和</title>标签之间的文字内容是网页的标题信息
<meta charset="UTF-8">设置当前文件字符编码
<style>标签：双标签中设置当前文件样式

查看全部

0 采集收起来源：小哥,做头么? - 认识head标签
2023-04-16
weixin_慕娘5021171

<!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。
<!DOCTYPE> 声明必须是 HTML 文档的第一行

<html></html>标签  位于HTML文档的最前面和最后面，用来标识HTML文档的开始和结束；

<head></head>标签  包含有关HTML文档的信息但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。
可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等

<body></body>标签  是HTML文档的主体部分
可以包含<p><h1><br>等众多标签
<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。

查看全部

0 采集收起来源：听说有新版本了? - html5文档结构
2023-04-16
weixin_慕娘5021171

html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个" / "。
标签与标签之间是可以嵌套的，但先后顺序必须保持一致
如：<div>或<h1>里嵌套<p>，那么</p>必须放在</div>或</h1>的前面。

查看全部

0 采集收起来源：使用说明书 - 标签的语法
2023-04-16
weixin_慕娘5021171

font-size:12px; 文字大小
color:#930; 文字颜色
text-align:center; 文字位置居中

查看全部

0 采集收起来源：佛靠金装，人靠衣装 - html和css的关系
2023-04-16
weixin_慕后端4113073

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

查看全部

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

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

查看全部

0 采集收起来源：CSS3的布局 - css布局模型
2023-04-13
开心( ◠‿◠ )

使用margin为盒子设置外边距（边界）
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
效果：

也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。

查看全部

0 采集收起来源：距离产生美 - 使用margin为盒子设置外边距（边界）
2023-04-13
开心( ◠‿◠ )

使用padding为盒子设置内边距（填充）
元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}
效果：

顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}

查看全部

0 采集收起来源：宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）
2023-04-13
开心( ◠‿◠ )

使用border-radius设置圆角
元素边框的圆角效果可以使用border-radius属性来设置。圆角可分为左上、右上、右下、左下。如下代码：
div{border-radius: 20px 10px 15px 30px;}
效果：

也可以分开写：
div{
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 30px;
}
如果四个圆角都为10px;可以这么写：
div{ border-radius:10px;}
如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：
div{ border-radius:10px 20px;}
需要特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。例如：
div {
width: 200px;
height: 200px;
border: 5px solid red;
border-radius: 100px;
}
效果
也可以写为百分比50%
div {
width: 200px;
height: 200px;
border: 5px solid red;
border-radius: 100px;
}

查看全部

0 采集收起来源：加个圆角 - 使用border-radius设置圆角
2023-04-13
开心( ◠‿◠ )

css 样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;

查看全部

0 采集收起来源：我想脚下踩条线 - 使用border为盒子添加边框（二）
2023-04-13
开心( ◠‿◠ )
下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
```
div{
    border:2px  solid  red;
}
```
上面是 border 代码的缩写形式，可以分开写：
```
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
```
注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
```
border-color:#888;//前面的井号不要忘掉。
```
查看全部

0 采集收起来源：画个圈圈 - 使用border为盒子添加边框（一）
2023-04-13
月夕花晨

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>使用thead、tbody、tfoot标签</title>
</head>
<style>
table {
border:2px solid black;
}
thead {
border:2px solid black;
}
tr {
border:2px solid black;

}
th {
border:2px solid black;
}
td {
border:2px solid black;
}
span {
color:red;
}
</style>
<body>
<h3>成绩表</h3>
<hr>
<table>
<thead>
<tr>
<th><span>科目</span></th>
<th><span>分数</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<td>159</td>
</tr>
</tfoot>
</table>
</body>

</html>

查看全部

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

首页上一页 43 44 45 46 47 48 49 下一页尾页

0/150

提交

取消

开始学习

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

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