发表于： 2020-07-27 22:19:29
1 1112
20\07\27
今日完成内容：
一、查看学习资料并学习：
《HTML<!DOCTYPE>标签》：是一个声明标签，必须位于<html>标签之前；用于告知Web浏览器页面使用了哪一种HTML版本。
《html标签图解》：html是超文本标记语言，包含一系列的标签（排版、字体、超链接、图片、列表、表格等），不同的标签有着自己的属性，有着自己的书写规范。
《CSS概念》：层叠样式表，用于表现html文件样式的计算机语言，对网页中的各种元素进行精确控制，不仅可以静态修饰页面，也可以配合脚本语言对网页各元素进行格式化。
《盒子模型》：由内容区（content）、填充（padding）、边框（border）、空白边（margin）组成。是css中常用的一种思维模型。
content这个css属性被用于before和after这两个伪元素去产生放在元素内的内容。而所有元素都可以用content这个属性的url()值和其他的图片值用于替换元素本身的内容。用content属性被插入的对象是匿名的替换对象。
margin属性设置所有外边距，可以有1到4个值。1个值时设置四个边距；2个值时先设置上下再设置左右；3个值时先设置上再设左右在设置下边距；4个值时顺序为上右下左。且当相邻元素间合并时margin取最大值而非相加。
padding简写属性在一个声明中设置所有填充属性。也可以有1到4个值，顺序与margin属性一样。
border属性设置一个什么中所有的边框属性，顺序为：border-width,border-style,border-color。缺少值也是允许的。
《CSS浮动——float》：用于设置标签对象的浮动布局。
二、开始编辑项目《九宫格》
1.创建文件test1.html和test1.css并在html文件<head>标签中用link标签链接。
2.在test1.html文件body标签下完成布局：一个大<div>下包含9个<div>
3.设置css样式，组合成九宫格：
固定外层div的宽高；设置背景色；设置小格子背景色为#FFAA00；固定小格子的宽高；设置float：left左浮；使之横三竖三排列形成九宫格；设置margin将小格子隔开；设置border-radius将小格子四个角成为圆角；
效果：
4.修改css样式，实现网页自适应：
将外层div的宽高取消，设置text-align：center元素居中对齐；取消小格子的固定宽高，用百分比实现自适应（在实际操作过程中发现，当宽与高同时用百分比时，无法显示内容，经过搜索在文章https://www.cnblogs.com/lst619247/p/8074724.html中找到解决方法。设置padding-bottom百分比实现自适应）；更改margin为百分比。
效果：
5.在test1.html中<head>标签下添加<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=2.0, minmum-scale=0.5" />适配移动设备。
6.将代码文件上传阿里云，通过ip地址进行访问。
7.完成任务。
三、明日计划
1.继续学习html标签和css样式内容，多敲代码，多练习。
2.熟悉开发工具、Nginx环境还有学习使用GitHub。
3.熟悉chrome开发者工具。
4.开启下一个任务。
返回列表
评论