发表于： 2018-11-04 21:27:42
1 753
今天完成的事情：今天继续修改昨天的任务，已经修改成功，并且尝试把任务7的登陆页面和获胜页面给做出来了
明天计划的事情：明天了解下任务7的游戏界面，争取把中间的游戏界面给做出来
遇到的问题：
1，首先还是昨天所遇到的问题，关于下拉框一直显示透明的问题，今天把昨天写的代码一点一点复制拆开到一个新的html文件里，然后发现了问题。这个所需要做的就是页头和页脚固定，中间部分随着屏幕滚动，但是我在写屏幕中间哪一部分的时候，有几行代码写错了，代码如图所示，
main{
position:fixed;
overflow:auto;
top:60px;
bottom:80px;
width:100%
}
这几行代码中是做之前任务的时候在我哪个是哪个所找到的，目的就是中间的页面可以随屏幕滚动，其中的top,bottom分别代表页头和页脚固定部分的值。这行代码当时并不解其意直接就用户是哪个了，所以才会产生这样的结果
2，今天在做任务7的登陆页面的时候，
按照任务的验收标准是相对与下面整个白框所居中的，考虑到这一方面，我刚开是想到的是既然要求箭头在中间了并且左边留的也有空白，那就把左边也放上个空的div，利用flex布局中
align-items: center;
justify-content: space-between;
这两个属性，把左边空的div和右面包含图片的div做的小一点，至于上面的捉鬼游戏那一部分到时候再放个空的div把它顶下来，但是再最后写代码的时候发现利用这种写出来的首先是代码的内容变的很冗余繁杂，而且排版方面也存在一定的问题，比较乱。后来的话经过向师兄请教，我又换了一种布局方式，先把上面的捉鬼游戏写出来，在写下面的，图片那一部分设置个内边距撑开就行，图片的话利用绝对定位来解决，达到居中的效果，最后解决了这个问题
收获：通过今天的学习，对于自己写代码过程中的不经常用到的决定定位又重新学习了一边，加深了印象。另外就是通过解决昨天所遇到的问题，以后自己代码再次出现问题的时候自己具备了一定的解决能力。对与以后的学习和帮助还是比较大的
关于任务 4 的总结
任务耗时一天
任务总结：通过对任务4的学习，首先是对于input这个属性自己了解了，这个也算作是 比较简单的交互了。另外就是在进行输入内容进行交互的时候，知道了是通过什么属性来进行限制输入最大字符长度的，包括对输入的内容是怎样就行隐藏的
深度思考
1，position 定位有哪几种？各有什么特点
定位的话一种是相对定位，一种是绝对定位，
相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。
绝对定位：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了 position 属性。从最近的父元素开始找，直到找到 body 位置为止。
特点的话就是相对定位更容易学习，而且灵活性也比较高，绝对定位1. 绝对定位会找到与自己最近的父类来定位，不是自己的父类与自己无关。 2. 绝对定位找到了自己的父类之后，要看这个父类是否进行了相对定位，没有相对定位的话就不会找这个父类来定位。
2. 哪些 css 属性可以设置百分比，其计算原则是什么？
定位属性：top,right,bottom,left;
盒模型属性：height,width,margin,padding;
背景属性：background-position;
文本属性：text-indent,line-height,vertical-align;
字体属性：font-size.
都可以设置百分比，计算原则是
height：基于包含它的块级对象的百分比高度。width：基于包含它的块级对象的百分比宽度。
margin,padding：百分数是相对于父元素的 width 计算的。
图像中描述为 50% 50% 的点（中心点）; 如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角; 如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。
background-position 的默认值是 0% 0%，在功能上相当于 top left。
text-indent 定义基于父元素宽度的百分比的缩进
浏览器默认字体大小为 16px, 我们一般默认 font-size=62.5%，但也可以根据浏览器窗口大小利用媒体查询进行适当调整
3. 常见的表单元素有哪些？各有什么属性？。
表单标志的主要元素、属性如下：
<form></form > 创建表单
<select multiple name="name" size=""></select > 创建滚动菜单, size 设置在需要滚动前可以看到的表单项数目
<option> 设置每个表单项的内容
<select name="name"></select > 创建下拉菜单
<option> 设置每个菜单项的内容
<textarea name="name" cols=40 rows=8></textarea > 创建一个文本框区域, 列的数目设置宽度, 行的数目设置高度
<input type="checkbox" name="name"> 创建一个复选框, 文字在标签后面
<input type="radio" name="name" value=""> 创建一个单选框, 文字在标志后面
<input type=text name="foo" size=20> 创建一个单行文本输入区域, size 设置为字符串的宽度
<input type="submit" value="name"> 创建提交 (submit) 按钮
<input type="image" border=0 name="name" src="name.gif"> 创建一个使用图像的提交 (submit) 按钮
<input type="reset"> 创建重置 (reset) 按钮
4. 如何理解 HTML 结构的语义化？
（1）、为了在没有 css 代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂一二。
（2）、提高用户体验，比如：title，alt 用于解释名词和图片信息。
（3）、利于 SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
（4）、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
（5）、便于团队开发和维护，语义化更具可读性，如果遵循 W3C 标准的团队都遵循这个标准，可以减少差异化，利于规范化。
其实我的理解就是一种规范吧，我感觉就是维护方便，自己写的代码自己可以看懂，别人也可以看懂。
5. 使用 fixed 的时候，在手机上查看是否会有问题，怎么解决？
电脑上在position: fixed;bottom: 0;就行设置时，浏览的话没有问题
但是这种设置在手机上浏览时，如果向下滚动视口，就会发现 fixed 的 div 并没有固定在底部，而是随着视口向上滚动了，这时就可以使用如下的解决办法：
在 head 中加这么一个声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no">
6. 常见的移动端登录页 header 有哪些实现方式？
我自己常用的就是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="winer.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
返回列表
评论