发表于: 2017-03-08 22:57:58

2 794


今天完成的事情:

看了下任务9,发现是任务8的自适应,所以直接把任务8和9放一起做了。今天主要是在做任务8的自适应,header涉及2个隐藏和变换,比较难搞,晚上才弄完。


明天计划的事情:

完成任务8第1页的自适应,完成第2页。


遇到的问题:

开始不知道怎么在屏幕分辨率不同的情况下进行页面元素的隐藏和变换,后来经过查找,用hidden-xs和visible-xs进行了实现,如下:

<div class="container-fluid hidden-xs">
<div class="container-fluid visible-xs login">


中间遇到两个元素之间有一个空白的高度,但一直取消不了,也找不出是哪儿的原因,经过让其他同学帮忙,才找出是<p>默认的margin-top的问题,通过设置进行了取消。

顺便也看了相关的文章,知道了html各个标签的默认样式,发现有很多默认的参数,一不小心就会出来捣乱。最简便的方法就是直接设置margin和padding都为0:

*{
margin:0;
padding:0;
}


收获

了解了&nbsp; &ensp; &emsp;等几个空格的区别,之前基本上都用&nbsp;,但它差生的字符宽度很多时候和想要的并不一样,之后尽量用&emsp;

&nbsp;         
它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了&nbsp;,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,该空格占据宽度受字体影响明显而强烈。
 
&ensp;        
它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。
 
&emsp;         
它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。


用栅格布局实现不同分辨率页面的自适应:

<div class="arrow col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h5>1</h5>
<p>匹配你现在的个人情况寻找适合自己的岗位</p>
<img src="images/arrow.png">
</div>
<div class="arrow col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h5>2</h5>
<p>了解职业前景薪金待遇、竞争压力等</p>
<img src="images/arrow.png">
</div>




返回列表 返回列表
评论

    分享到