发表于: 2018-07-26 23:29:18

1 624


任务总结一:

先上官方脑图,

再上自己的脑图。


先说说自己做项目的感觉,再写深度思考内容:

刚开始很多命令不理解,慢慢用着,也就会了。最重要的几点:

1.position是不占用文档流的。

2.float也是不占用文档流的。

3.display:inline-block。意思是同行的块元素。如果是inline的话,没办法显示出来,即便给了宽高也没用。

4.id只能用一次,class可以重复使用。


下面是深度思考内容:

1.HTML文件里开头的Doctype有什么作用

答:

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。


2.如何理解盒模型及其content、padding、border、margin?

答:盒模型,相当于你做的任何元素的声明都看作盒子。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

content是实际内容;

padding是内边距,算在总宽度之内,比如盒子宽度是100,内边框是10,实际宽度只有80;

border是边框,可以有宽度,也可以设置颜色,甚至border-style:none;

margin是外边距,不计算再盒子宽度之内。


3.常见的inline元素、block元素、inline-block元素有哪些?它们之间有什么区别

答:常见的inline元素有a,span,br,i,em,strong,label,q,var,cite,code。

常见的块元素有div、p、h1...h6、ol、ul、dl、table、address、blockquote、form。

常见的inline-block元素有:img,input。

区别主要是三个方面:一是排列方式,二是宽高边距设置,三是默认宽度。

(1)块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。

(2)块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。

(3)块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。


4.如何使用浏览器的F12调试页面?

答:这个。。。熟能生巧,可以添加style。

可以选定某块区域

可以看手机显示

可以取消增加选项看效果


5.九宫格的布局你还能想到哪些办法实现?它们各自的优势劣势是什么?

答:两种,一种div+float。一种ul+li+display:inline-block。

第一个代码量少,

第二个不用考虑浮动问题。


6.IDE是什么?它和文本编辑器相比有什么优缺点?

答:比如我们用的webstorm。

有点是提示比较多,还能上传github,关联文件也多,还能报错提示。

缺点是太重,打开很慢。


7.加和不加meta的viewport有什么区别?

答:

viewport特性,一个移动专属的Meta值,用于定义视口的各种行为。

用于解决移动端的页面展示问题。

用户并不能很好地通过手机等设备访问网页,因为屏幕太小。

加上之后,可以按照比例缩放。


今天完成的事情:

1.任务七没找到头绪

2.做了任务一的总结

明天计划的事情:

1.任务七做一半

2.完成任务二的总结

遇到的问题:

头部本来做好了,结果一加上main,就往下掉,怎么办。

加上main之后:


很奇怪,因为我头部做了好几次了,不会这样子啊。

.mains {
margin-top: 60px;
   width: 100%;
   background: #b9e9f5;
}

.header {
width: 100%;
   height: 60px;
   line-height: 60px;
  position: absolute;
}

.headers {
text-align: center;
   font-size: 22px;
   color: white;
   margin-top: -6px;
}

<header class="header">
<div class="headers">
投票
   </div>
<div class="headersImg">
<img src="media/chahao.png" width="25px" height="25px">
</div>
<div class="headersImage">
<img src="media/mulubiao.png" width="25px" height="25px">
</div>
</header>
<main>
<div class="mains">
发言讨论结束,大家请投票
   </div>
</main>

不知道是什么原因,以前也是这样写,没有什么问题啊。

收获:

1.学会了在页面点击图片播放音乐,用的<audio>标签

<audio id="music" src="media/freedom.mp3" loop="loop" autoplay></audio>
<img id="musicImg" src="media/three.png" onClick="play()" alt="musicImg"/>

点击页面,可以播放声音。

2.画了一个三角形

<div class="triangle">
</div>
.triangle {
width: 0;
   height: 0;
   border-left: 10px solid transparent;
   /*border-top: 10px solid #5851c3;*/
   border-right: 10px solid transparent;
   border-bottom: 10px solid #4ed621;
   box-sizing: border-box;
   /*border-color:transparent;*/
}


进度:CSS任务七
任务开始时间:2018.07.26
预计demo时间:2018.07.28
是否有延期风险:
                            
任务代码地址:




返回列表 返回列表
评论

    分享到