发表于： 2018-11-26 15:53:20
4 849
今天完成的事情
任务1九宫格——用html+css制作一个网页
1.html框架
在sublime新建html，输入html:5后，按Tab键后，自动生成的代码如下：
1. <!DOCTYPE html> //html5的文档头声明
2. <html lang="en"> //当前文档显示的语言
3. <head>
4. <meta charset="UTF-8"> //字符集头标签
5. <title>Document</title> //网页标题
6. </head>
7. <body>
8.
9. </body>
10. </html>
2.新建div
在body中写入
1. <div class="box"></div>
2. <div class="box"></div>
3. <div class="box"></div>
4. <div class="box"></div>
5. <div class="box"></div>
6. <div class="box"></div>
7. <div class="box"></div>
8. <div class="box"></div>
9. <div class="box"></div>
3.为新建的div添加样式
在head中添加
1. <meta name="viewport" content="width=device-width, initial-scale=1.0">//viewport是网页默认的宽度和高度，设置网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
2. <style type="text/css">
3. div.box
4. {
5. margin:1.66%;
6. padding:15%;
7. background-color:orange;
8. float:left;
9. border-radius:20% //向 div 元素添加圆角边框
10. }
margin是外边距，padding为内边距，该div无内容，因此由内边距填充起来（设置width属性不知道如何使高度也为30%）
知识点
1.自适应布局的网页一般需要设置<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.<div>不设置浮动的时候会独占一行，且自动设置内容宽度以填充行
3.margin及padding
padding 内边距表示（顺时针）
padding:10px 5px 15px 20px;（上 右 下 左）
padding:10px 5px 15px;（上 左右 下）
padding:10px 5px;（上下 左右）
padding:10px;（上下左右）
明天计划的事情
任务1-深度思考
遇到的问题
<div>不设置浮动的时会独占一行，为什么内容宽度自动设置，宽度从哪来？
收获：
初步了解盒子模型、浮动、内外边距以及css简单样式
返回列表
评论