「前端基础」HTML & CSS 入门（画太极）

1. 学前端要「学以致用」

• CRM学习法
  1. Copy - 抄
  2. Run - 运行
  3. Modify - 修改

2. 你的第一个页面

2.1 如何使的vscode自动保存并格式化

1. setting中搜索format
   
2. 然后搜索auto save
   

2.2 id是可以中文

2.3 div画圆

			border: 1px solid red;
			width: 400px;
			height: 400px;
			border-radius: 200px;

2.4 div+div

div+div然后再按tab可以生产两个div

2.5 如何分别对div控制

		#八卦>div:first-child {
		     border: 1px solid green;
		 }
		
		 #八卦>div:nth-child(2) {
		     border: 1px solid blue;
		 }

问题:CSS盒模型

为什么这里宽度都是50%, 然后这里还是有重合部分?

2.6 box-sizing: border-box

居中问题

下图部分不能用left:25%, 而是要用left:50% 和 margin-left:-100px实现.
因为此处红框宽度刚好是#八卦的一半.

2.7 overflow:hidden

2.8 position:absolute

absolute浮起来

2.9 bottom和top

bottom从底部开始
top从顶部开始

3. 使用CSS3加动画

3.1 animation

/* 动画x的定义 */
		@keyframes x {
		    from {
		        transform: rotate(0deg)
		    }
		
		    to {
		        transform: rotate(360deg)
		    }
		}
		
		#八卦 {
		    position: relative;
		    width: 400px;
		    height: 400px;
		    border-radius: 200px;
		    overflow: hidden;
		    /* 添加动画x 时长10秒 无限循环播放 线性播放 */
		    animation: x 10s infinite linear;
		}

3.2 水平垂直居中

        #八卦-wrapper {
            /* viewpoint height */
            height: 100vh;

            /* 水平垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;

            /* 竖向排列 */
            flex-direction: column;
        }

3.3 1em

3.4 box-shadow

box-shadow在线生成器

			/* 美化样式 */
            box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.75);

4. 你的第一个手机页面

使用媒体查询让绝对单位的都除以一半

        @media (max-width:500px) {
            #八卦 {
                width: 200px;
                height: 200px;
            }
        }

5. 部署:让全世界看到你的网页

github创建项目后进入项目setting

然后选择master branch

最后编辑description和manage topics

6. 总结

• 不要用Chrome直接预览HTML
  1. 会有很多的bug
  2. 推荐使用http-server/parcel等工具
• 有问题,搜MDN
  1. HTML标签怎么用
  2. CSS属性怎么用

7.1 第二次模糊点

2.6

2.7

3

4