计算机小白的第一个小作品（HTML4+CSS3）

  本文是作者看教学视频后学习制作的第一个网站（0基础，本科不是it专业）。本文目的是记录学习的一些内容，方便复习总结。

制作过程

先放上成品图,由于还没有学习怎么生产链接，只能放上静图：

成图（静态）

（里面是有动画的，可以360°连续旋转，10s一周）

步骤：

1、输入“！”，出现提示后按“tab”，就会自动编辑出格式。第二行language可以调语言，系统默认为“en”，就是英语。要改为中文只需要吧其改为“zh”。

2、首先在需要建立一个区域，在body下面建立一个“div id=八卦”。然后需要对这个区域进行命令，在head里面建立style，style的解释是：The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user. 意思就是说style元素允许作者在文档中嵌入样式信息。接着在style里面建立对“八卦”的修饰，这时候用#八卦{}，代表的就是[id=八卦]，#就是id的符号。然后必须对八卦进行修饰了，输入基本的h与w后，会得到一个矩形。这时候必须输入border-radius：50%，这时候正方形就会变成圆形，长方形会变成椭圆。这里那些基本的参数我就直接上图，最重要的一点是记得做border，也就是边界，不然很难看出你的内容在哪，特别是对新手，border是很重要的。

代码图1

过程图1

3、现在我们有个圆形了，首先要把它分为两边，一边黑一边白。八卦的黑白分割线是“S”型的，很难一下子画出来，因此先用一条直线将其平均分割。在八卦的div里面在新创建两个div，然后在style里面修饰。直接上图

代码图2

过程图2

>是包含的意思，指的是这个子div是指“八卦”这个div里面的。要注意position的问题。这时候边框还不重合，这是因为系统内置的问题，这时候在style创建一个*{ box-sizing: border-box}指令（*的意思是所有），这时候border就会重合。

4、接下来给两个半圆填色，很简单的指令，在两个子div分别输入background-color，一个黑一个白，然后再把超过圆圈的部分隐藏起来，在#八股出输入overflow：hidden。再把所有的border删除，然后调一下背景颜色，在style中输入body{}，然后输入背景颜色。我选定的是浅白色#eee。这时候八卦还差两个突出的黑白半圆形，很简单，在建立两个div，并移动到相应的位置即可。最后再加上两个圆形，步骤基本相似。直接上代码图：

代码图3

代码图4

过程图3

5、这时候八卦已经基本的成型，但是他在左上角，我们需要把他移动到中间。这时候需要创建一个wrapper把它包装起来。在body段，创建div id=“八卦-wrapper”，然后在style里面对其进行修饰。记得消除系统自带的内边距与外边距，在*里面输入  margin: 0px； padding: 0px。然后再在下面加入文字，这需要在body段继续创建一个div，包含在“八卦-wrapper”里面，但与“八卦”平行。记得在“八卦-wrapper”里面设置排列顺序，输入flex-flow: column;字体就会在图形下面。具体如图。

代码图5

过程图4

6、这时候已经基本成型了，但是还差几个点。首先没有立体感，这很好解决，只要在style中的“#八卦”阵输入box-shadow：，然后再google中搜索box-shadow generator，调到你喜欢的样式，直接copy就行了，在这里我用的是: 0px 0px 5px 5px rgba(0,0,0,0.75); 其次他的字体距图案太近了，这也很好解决。只要在那个文字的div给他加个id=“八卦-文字”，然后在style中的新建#八卦-文字{}，在里面输入 margin-top: 1em;即可。这时候的图如下：

代码图6

过程图5

7、到这时就差最后加动画了。在style的“#八卦”里面加入animation：x 10s linear infinite。x是指令，还需要继续命令。因此在style里面输入@keyframes x{}，具体如图：

代码图7

至此，就已经完成了所有的代码，附上总的代码图

总图1

总图2

总图3

总图4

总图5