5、border-style
边框样式
该属性指定了元素边界所有四面的线式。它分别是顶部、右、下和左边框风格的速记。指定一个值时,它适用于所有四个方面相同的边框样式。border-style:solid
, dashed
, dotted
, double
, groove
, etc.
语法:
border-style: value;
举例:
虚拟边框
为元素的所有四个方面设置一个虚线边界。
h1 {
border-style: dashed;
}
不同的边框样式
在元素的每一侧设置不同的边框。
h1 {
border-style: dotted solid dashed double;
}
6、border-color
边框颜色
该属性指定元素的四个边框的颜色。它是同时选择顶部、右侧、底部和左边框颜色的速记。指定一个值时,它适用于所有四个方面相同的颜色。
语法:
border-color: value;
举例:
红色边框
将元素的所有四个边框设置为红色。
h1{
border-style: solid;
border-color: red;
}
不同的边框颜色
将元素的四个边框设置为不同的颜色。
h1{
border-style: solid;
border-color: red green blue purple;
}
7、border-radius
边框半径
性指定元素的角的半径:它允许您添加圆角元素。此属性可以具有从一到四个值。每个半径的四个值按顺序给出。指定一个值时,它将相同的半径应用于所有四个角。
border-radius:
top-left
top-right
bottom-right
bottom-left
语法:
border-radius: value
举例:
像素中的圆角
以像素设置圆角以表示元素。
h1 {
border: 2px solid red;
border-radius: 25px;
}
圆角占百分比
将圆角设置为元素的百分比。<h1>
h1 {
border: 2px solid red;
border-radius: 20%;
}
8、backgroud-color
背景颜色
属性指定元素的背景颜色。颜色值可以用 HEX、RGB 或颜色名称进行定义。
语法:
background-color: value;
举例:
设置具有 HEX 值的背景颜色。
body {
background-color: #92a8d1;
}
设置带有颜色名称的背景。
body {
background-color: blue;
}
设置具有 RGB 值的背景颜色。
body {
background-color: rgb(100, 70, 200);
}
- 默认背景颜色是透明的。
- 元素的背景是元素的总大小,包括衬垫和边框(但不是边距)。
- 使用背景颜色和文本颜色,使文本可读。
9、float
浮动
该属性将元素放置在屏幕的左侧或右侧,并允许文本和其他元素环绕它。
语法:
float: value;
举例:
img {
float: right;
}
- 浮动的默认值为(无浮动):该元素将遵循页面的正常流。
none
- 浮动属性可用于网页布局和环绕图像的文本。
10、更改背景图像
元素的背景可以设置为任何您希望的图像!就像插入照片时一样,您可以使用图像的网址名称。
举例:
body {
background-image: url("cumulus.jpg");
}
3-12 你的网站
课程说明:
当天的问题:我们需要做些什么来准备构建我们的网页?** 在这节课中,学生通过决定网页将包含哪些元素和风格,进入解决问题过程的"准备"阶段。他们审查不同的HTML,CSS和数字公民准则,然后设计和规划他们的页面,以及下载和记录他们需要的图像。之后,他们反思他们的计划将如何确保网站做它所设计的事情。
3-13 项目个人网站
课程说明:
**当天的问题:当我们编写网页代码时,哪些技能和做法有帮助?** 在快速查看调试过程后,该类将联机创建他们在以前课程中计划好的页面,并以项目指南作为参考。之后,他们在进行任何最终更新之前,会进行结构化的反射和反馈过程。
3-14 有功能的网站
课程说明:
**当天的问题:人们制作网站的不同原因是什么?在集思广益后,他们访问网站的各种原因,他们调查样本网站已经创建,以解决一个特定的问题,并决定哪些不同的目的,这些网站可能为创建者服务。然后,该类会考虑他们可能想通过自己的网站解决的问题。
3-17 CSS类
课程说明:
**当天的问题:我们如何为同一类型的元素创建不同的样式?** 本课程引入了CSS类,允许 Web 开发人员以不同于同类型其他元素的方式对待他们想要的元素组。学生首先在不同的页面上调查和修改课程,然后创建自己的课程,并使用它们更好地控制页面的外观。然后,团队会思考如何利用此技能来改进他们的网站。
Class 在程序中称“类”,同时在CSS中也书面语也叫“类”。css中id和class即id选择器和类选择器。
下面我们来看一下这两种选择器的区别:
区别 1:id选择器只能在文档中使用一次,而类可以使用多次。
与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。
区别 2:不能使用ID词列表
不同于类选择器,ID选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。
区别 3:ID能包含更多含义
类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。
例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。
3-19 网页链接
1、Hyperlink
超链接
此标记用于向您的网页添加超链接。链接标签<a>既用于链接到外部网页,也用于链接到同一网站上的单个 HTML 文档。此链接需要一个属性:* href
告诉浏览器应导航到何处。
语法:
<a></a>
举例:
外部网站
用于链接到外部网页。<a>
<a href="https://code.org/">Visit Code.org!</a>
同一网站上的页面
用于链接同一网站上的单个HTML文档<a>
<a href="books.html">Books</a>
链接作为参考
使用链接访问外部来源以获取更多信息
- 更改文件名称和链接属性,以便它们遵循良好的命名惯例,例如:
href
- 避免特殊字符,如
&、?、
%、
/
。等&?
%
/
- 确保名称具有特定的含义,帮助您了解图像是什么。
- 使用破折号 —— 或下划线 _ 代替空格。
-
_
- 尽可能缩短名称,并且仍然具有明确的含义。
- 避免特殊字符,如
3-20 项目-做一个有目的的网站
课程说明:
**当天的问题:哪些技能和实践将帮助我们共同努力,使一个伟大的网站?使用项目指南,团队协同工作并单独编写所有页面的代码,然后将所有工作拼凑到一个站点中。
主界面HTML代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 >涂山小红娘</h1>
<img src="background.jpg" alt="Image description" />
<div class="ts18 bold"> 狐妖小红娘动漫简介</div>
<p>《狐妖小红娘》(日语:縁結びの妖狐ちゃん,英语:Fox Spirit Matchmaker)是庹小新编绘,盘丝大仙上色的一部漫画作品。连载于腾讯动漫,现成为腾讯动漫独家版权动漫之一。漫画版每周三更,动画版每周五更。其在2015年6月26日推出动画,并在腾讯动漫第2届PV大赛中通过小组赛并在决赛中以35838票赢得第一,获得长篇化名额。故事讲述了以红娘为职业的狐妖,在为各路转世恋人牵红线的爱情故事。这里会介绍动漫《狐妖小红娘》的人物大全。希望大家喜欢。
<br>本网站收录有关狐妖小红娘人物介绍大全,含角色头像图片资料,大家可以为喜欢的动漫人物点赞支持及留言。以下是详细的人物角色列表。</p>
<a href="baiyuechu.html"><h3>东方月初</h3></a>
<a href="tushansusu.html"><h3>涂山苏苏</h3></a>
<a href="tushanrongrong.html"><h3>涂山容容</h3></a>
<a href="pingqiuyuechu.html"><h3>平丘月初</h3></a>
<a href="huanduluolan.html"><h3>欢都落兰</h3></a>
</body>
</html>
主页面CSS代码:
body{
background:lightgreen;
}
p{
color:cornflowerblue;
font-size:3px;
}
h1{
text-align: center;
}
h3{
text-align: center;
color:dodgerblue;
}
img{
width:150px;
height:200px;
border-style:groove;
border-color:aquamarine;
float:left;
}
.ts18{
color:darkseagreen;
}
最终效果:
四、思考总结
本次学习的两个任务,完成周期已经较长了。一来是最近考试复习居多,搁置下了;二来这个任务涉及的学习任务较重,任务量较大。任务一只是初步涉及到HTML的使用,其中功能扩展的较少;但任务二的完成就要先学完整个课程了。当然对于任务二,我并没有将所有完成过程全部写在博客上,主要是摘录了一些新的知识点总结放在上面,有部分任务,我觉得完成的挺有意思的也会写在博客上。总的导致,这个任务要写两个博客来完成了,而且这还只完成了初级任务,还有一个扩展任务和自测还没有完成。不过前端学习的好处是所见即所得,你写出来的东西立马就能看到效果了,这样一步步完成的喜悦是后端难以感受到的。