发表于: 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;
}
收获
了解了    等几个空格的区别,之前基本上都用 ,但它差生的字符宽度很多时候和想要的并不一样,之后尽量用 
用栅格布局实现不同分辨率页面的自适应:
<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>
评论