发表于： 2017-03-14 23:32:47
4 695
今天完成的事情：
1、看师兄回复（学习思考）；
2、复习以前学的，背了几个常用单词；
3、系统的看了W3school html基础教程目前从html样式看到html链接；
4、继续按照引导进行任务1:九宫格——用html+css制作一个网页；
查看学习资料《浮动——float详解》，《css中float left与float right的使用说明》,《chrome开发者工具——chrome开发者工具》……；
以float浮动的方式布局，组合九宫格；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九字真言</title>
<style type="text/css";>
.wrap{width:366px;
height:366px;
background-color:gray;
border:0px solid red;
margin:0px;
padding:0px;}
.box{width:100px;
height:100px;
padding:5px;
background-color:yellow;
border:2px solid black;
margin:9px;
padding:0px;
float:left;}
div{
color: blue;
text-align: center;
font-size:85px;}
</style>
</head>
<font face="楷体">
<div class="wrap">
<div class="box">临</div>
<div class="box">兵</div>
<div class="box">斗</div>
<div class="box">者</div>
<div class="box">皆</div>
<div class="box">阵</div>
<div class="box">列</div>
<div class="box">前</div>
<div class="box">行</div>
</div>
<body>
<h4 style="color: red;">《凡人修仙传003章——修真院九字真言》</h4>
</body>
</font>
</html>
6、写日报；
明天计划的事情：
1、看师兄回复；
2、复习以前学的；
3、继续系统学习html（W3school html基础教程）；
4、继续进行九宫格剩余任务， 边学边做；
5、写日报；
6、继续改进学习方法。
遇到的问题：
（1）第16步，在上面代码中加了
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width; ">
，调试如下图
下面标题在模拟手机屏幕上在左边排列（看上去有问题），怎么修改看着不别扭？
收获：
进一步熟悉修真院学习流程，了解单位em和px的区别，px像素（Pixel），相对长度单位，像素px是相对于显示器屏幕分辨率而言的。使用float方式布局做了一个九宫格，继续学习html基础，完成任务一第（13-17）步。
请师兄指点！
返回列表
评论