发表于: 2018-09-02 21:15:36
4 835
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
今天学习了:
1.HTML的标签
2.CSS是什么
3.添加了几个元素设定了css样式
4.盒子模型
5.float浮动
6.理解了任务
7.写出了一个无法自适应的九宫格
8.学习Chrome开发者工具
9.float布局组成了九宫格
明天计划的事情:
明天打算将viewport搞清楚,并测试移动端
遇到的问题:
float自适应布局无法在屏幕变小时还成3x3的布局,每行最后一个会在窗口缩小后跑到新的一行。
用padding撑开容器后,如果在元素内添加内容,那容器会变形,无法维持正方形。
flex布局时,如果margin的值给大了,也会导致3x3无法成立。
收获:
1.通过学习资料学习到了HTML的标签内容,具体学到的知识如下(原先就对HTML有过学习,下列的内容都是新学内容,以前学习过的就没列出了):
HTML是一种描述的标记语言,非编程语言,负责描述文档的语义。
目前常用已经不是XHTML了,而是HTML5。
中文能使用的两种字符集是UTF-8和GBK两种,meta申明与文件编码类型必须一致。
GBK比UTF-8显示更快,但如果追求大而全的话还是选择UTF-8更合适。
颜色可以通过单词、十进制、十六进制来表示。
meta标签有一个跳转功能,可在指定间隔后跳转到指定页面。
meta能通过定义关键字来提高搜索命中率。
列表的type属性能定义原点效果,li标签也能通过type修改。
无需列表可使用的场景有导航条、购物网站的搜索列表
2.Chrome开发者工具:
elements工具可完整的查看整个HTML文件,并能通过右击节点进行各种操作,能通过下方状态栏查看节点路径。能通过右边侧栏查看元素样式。
通过侧栏可添加新的css样式,并直接反应在网页中,即做即得,适合微调样式。通过模型图能直接修改边距。
通过Network工具可以查看网络资源加载情况,来分析网页加载的速度,优化网站。
剩下的工具对目前学习暂时没有帮助,现在放置等用到了再学。
3.九宫格布局
查找资料过程中,学会了CSS3的子选择器 .a > .b 可选择a下面的第一级子元素b,而不会多选择别的元素。
学会了vw和vh的使用方法,学会了flex布局的使用方法,学会了padding来撑开容器
inline、block、inline-block的显示方法。
最终用flex来创建了九宫格布局。
评论