C1-任务三-Web基础与布局
使用富文本编辑器
- 锐客网 table,tr,td{
border: solid 1px black;
border-collapse: collapse;
}
.text-p{
color: red;
}
.text-r{
background-color: #EBEBEB;
}
.left{
width: 30px;
}
.right{
width: 180px;
}
button{
margin-top: 20px;
}
CSDN能力认证中心
C1
见习工程师认证
C4
专项工程师认证
C5
全栈工程师认证
文章图片
文章图片
所见即所得式开发
- 简单标签介绍
【C1-任务三-Web基础与布局】
1. 段落标签
2.HTML 元素是 HTML 文档的顶级元素。此 HTML 标记是所有其他 HTML 元素（标记除外）的容器
`
3. 此标记用作元数据的容器：元数据是有关 HTML 文档的数据，例如文档标题、字符集、样式表、链接和脚本。
4. 所有 HTML 文档都必须以声明开头。这个标签告诉浏览器页面是用什么版本的 HTML 编写的。
5. 该 标签定义了将在您的网页上直接可见的 HTML 文档的主要内容。这个 body 标签 包含一个 HTML 文档的所有内容，例如标题、段落、图像、超链接、表格、列表等。
7. 此标签用于在整个网页中创建不同大小的部分标题。将通过 标签用于一个页面，上创建的标题是最大的，是最小的。
8. 此标记用于创建一组项目符号项。无序列表元素具有标记。这是无序列表的缩写。列表中的每一项都由一个列表项元素标记- 。
9. 此标签用于创建一组编号项目。有序列表元素具有标签。这是有序列表的缩写。列表中的每一项都由一个列表项元素标记- 。
10.此标签用于创建列表。list 标签必须包含在有序列表（带项目符号）或无序列表（带数字）中。
文章图片
当inspector右边显示on，则是打开状态，当鼠标在移动到右侧任意位置，即可突出那一部分代码
实际使用上
通过F12打开
文章图片
点击左上角按钮后，再点击页面任意位置，即可跳出该处代码
文章图片
使用段落标签
文章图片
修复代码
修复前
文章图片
这里第二句的p标签错误，修改后如下
文章图片
修改段落标签
修改前
文章图片
修改后
文章图片
编排文段
文章图片
修复图像
更改前
文章图片
更改后
文章图片
html文件和CSS文件连接方式
- RGB颜色
rgb(red, green, blue)
所有的颜色，不管它们有没有名字，都可以用不同水平的红、绿、蓝色的光混合起来显示。这叫做RGB值（这是Red-Green-Blue，也就是红-绿-蓝的简称）
用RGB大概能组合出一千六百万种不同的颜色
- 夏天的颜色
文章图片
自测
- 锐客网 *{border: solid 1px #969790;
background-color: #C5D08E;
}
html,body{border: none;
background-color: white;
}
.bgc{position: absolute;
background-color: #FCDD9C;
height: 500px;
width: 800px;
padding: 20px;
border: solid 4px #969790;
}
.d1{display: inline-block;
width: 260px;
background-color: #C5D08E;
height: 150px;
float: left;
}
.d2{display: inline-block;
width: 260px;
float: left;
height: 310px;
margin-top: -20px;
}
.d3{display: inline-block;
width: 510px;
height: 200px;
float: left;
margin-left: 20px;
}
.d4{position: absolute;
display: inline-block;
width: 245px;
height: 270px;
margin: 20px;
float: left;
left: 280px;
bottom: 0;
z-index: 5;
}
.d9{position: absolute;
display: inline-block;
width: 150px;
height: 130px;
background-color: #F3A464;
bottom: -60px;
left: 320px;
}
.d5,.d6{position: absolute;
display: inline-block;
width: 245px;
height: 125px;
margin-top: 20px;
right: 20px;
}
.d5{bottom: 170px;
}
.d6{bottom: 20px;
}
.d7{position: absolute;
display: inline-block;
width: 150px;
height: 100px;
background-color: #F3A464;
left: 320px;
top: 50px;
}
.d8{position: absolute;
display: inline-block;
width: 150px;
height: 100px;
background-color: #F3A464;
right: 40px;
top: -40px;
}
"bgc">
"d1">
"d3">
"d2">
"d4">
"d5">
"d6">
"d7">
"d8">
"d9">
为了方便测试中调整，没有采用浏览器本身大小，而是另外采用了一个div标签作为背景盒子
文章图片
文章图片
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 2018-02-06第三天|2018-02-06第三天 不能再了，反思到位就差改变
- 第三节|第三节 快乐和幸福（12）
- android第三方框架（五）ButterKnife
- 遇到一哭二闹三打滚的孩子，怎么办┃山伯教育
- 三十年后的广场舞大爷
- 一百二十三夜，请嫁给我
- 2018年9月5日，星期三，天气晴
- 即将到手三百万