C1任务03 Web的世界（下）

最新推荐文章于 2024-08-21 22:36:29 发布

王山之

最新推荐文章于 2024-08-21 22:36:29 发布

阅读量218

点赞数 1

分类专栏：计算机C1认证文章标签： html css javascript

本文链接：https://blog.csdn.net/luck_gid/article/details/117093730

版权

计算机C1认证专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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的使用，其中功能扩展的较少；但任务二的完成就要先学完整个课程了。当然对于任务二，我并没有将所有完成过程全部写在博客上，主要是摘录了一些新的知识点总结放在上面，有部分任务，我觉得完成的挺有意思的也会写在博客上。总的导致，这个任务要写两个博客来完成了，而且这还只完成了初级任务，还有一个扩展任务和自测还没有完成。不过前端学习的好处是所见即所得，你写出来的东西立马就能看到效果了，这样一步步完成的喜悦是后端难以感受到的。

王山之

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
C1任务03 Web的世界（下）

5、border-style边框样式该属性指定了元素边界所有四面的线式。它分别是顶部、右、下和左边框风格的速记。指定一个值时，它适用于所有四个方面相同的边框样式。border-style:solid,dashed,dotted,double,groove, etc.语法：border-style: value;举例：虚拟边框为元素的所有四个方面设置一个虚线边界。h1 { border-style: dashed;}不同的边框样式在元素的每一侧设置不同的边...
复制链接

扫一扫