最近在用css布局设置一个页面,现在分享在设计过程中遇到一些问题的解决方法:
1、有的时候,只要外层的元素设为display:block,里面嵌套的inline元素可以不用设置display:block,就可以设置高度和宽度例如:
<div style="display:block">
<input style="height:50px;width:50px">
</div>
这样就可以了,要是input在设置一个display:block反而达不到设置宽度的目的。
2、有时候,在调试时发现,有部分元素在当窗口缩小到一定大小的时候有跳动,此时一般会和设置的margin和bottom有关。一般当窗口缩小到一定大小的时候,margin和 padding的大小会变化。
3、有的时候代码感觉没错,比如
<form class="form1">
<input type="text" placeholder="hello" class="input1">
</form>
在页面调试的时候,发现类form一直没有加进来,但是类input1却加进来,这时候可能是<form>元素以上代码的书写不规范,比如多了符号{、}、;等等
4、在引用bootstrap定义好的一些属性的时候,我们经常要写一些自己想要的属性,但是发现写好的属性在调试器中虽然看起来起作用,但是实际上并没有起作用。这时候可能就是css的优先级问题了,也就是说自己定义的属性
没有覆盖原先.less中的属性。此时可以将.less影响的属性给重写,例如下面的例子:<button>
.btn-primary {
background-color: #59B3C9;
}
本来要重新改成上面这种颜色,结果还是默认为.less中设置的颜色
问题所在:.btn-primary {
background-image: -webkit-linear-gradient(top,#337ab7 0,#265a88 100%);
background-image: -o-linear-gradient(top,#337ab7 0,#265a88 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#265a88));
/* background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%); */
这是.less文件中定义的。一般background-image设置的属性会在background-color的上面,所以此时,可以
将background-image属性重写为我们想要的属性,如改成下面代码:
.btn-primary{
background-color: #59B3C9;
background-image: -webkit-gradient(linear,left top,left bottom,from(#59b3c9),to(#59b3c9));
}
5、最近在做一个动画效果:就是让按钮竖直向上移动,最后停在最后运行到的地方
问题:用css3做动画效果,发现效果执行完之后,他又变成刚开始的属性。如下代码所示
.create_activity{
position:relative;
z-index:1000;
animation: myfirst 3s;
-moz-animation:myfirst 3s; /* Firefox */
/*-webkit-animation:myfirst 3s; /* Safari and Chrome */*/
-o-animation:myfirst 3s; /* Opera */
}
@keyframes myfirst{
0% { top: 20px; left:-13px; opacity:0;}
100% { top: -250px; left:-13px; opacity:1;}
}
/* Safari and Chrome */
@-webkit-keyframes myfirst{
0% { top: 20px; left:-13px; opacity:0;}
100% { top: -250px; left:-13px; opacity:1;}
}
以上是部分css代码
<a href="#" target="_parent" class="create_activity"><button class="btn btn-primary btn1 ">创建活动</button></a>
这是要实现效果的对象。
显示的效果是:"创建活动"这个按钮执行完动作后,又回到原来的位置,没有达到自己想要的功能
解决方法:用js实现动画效果。用js实现的动画,对象完成动作后,对象的属性就是最后的属性。
结论:用css设置的动画,在动画执行完之后,又变回刚开始的属性;而用js编写,则可以保留最后的动画效果。
6、如需对位置进行操作比如改变他的top、left、right、bottom的值:要记得首先把元素的 CSS position
属性设置为 relative、fixed 或 absolute!
relative:是相对于这个对象最近的父元素,不管这个父元素有没有设置position;保留原先所占的位置;意思
就是原先定义好的结构不会随着有动画的对象的位置改变而变化
absolute:是针对与对象最近的父元素,并且该父元素设置了Position为absolute 或者relative.不保留原先位置
fixed:是针对浏览器窗口进行定位
注意:static是默认值,没有定位,元素出现在正常位置进行定位
7、当自己写的动画样式没有达到自己的目的的时候,要重新看教程。没显示的时候再回去看看教程,教程可以教你怎么用规则。
8、用的最多的伪类就是超链接a的伪类,有:link,:visited,:hover,:active,而且需要按照这个顺序设置
9、在设置导航条的时候,我们希望给导航条一个固定宽度值,然后达到导航元素格式不会随着窗口大小的变化而变化.设备不同,导航条的固定宽度值也不同。此时解决办法用@media来判断设备的宽度值。
@media (min-width: 1371px){
.navbar {
width: 1950px;
}
}
即当窗口的大小大于1370px时,让导航条的宽度为1371px;