文章目录

1. 学前端要「学以致用」2. 你的第一个页面2.1 如何使的vscode自动保存并格式化2.2 id是可以中文2.3 div画圆2.4 div+div2.5 如何分别对div控制问题:CSS盒模型2.6 box-sizing: border-box居中问题2.7 overflow:hidden2.8 position:absolute2.9 bottom和top 3. 使用CSS3加动画3.1 animation3.2 水平垂直居中3.3 1em3.4 box-shadow 4. 你的第一个手机页面5. 部署:让全世界看到你的网页6. 总结7.1 第二次模糊点2.62.7 34

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

CRM学习法 Copy - 抄Run - 运行Modify - 修改

2. 你的第一个页面

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

setting中搜索format 然后搜索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 会有很多的bug推荐使用http-server/parcel等工具 有问题,搜MDN HTML标签怎么用CSS属性怎么用

7.1 第二次模糊点

2.6

2.7

3

4