文章目录
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: 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
属性怎么用