CSS常用的一些设置小技巧
几乎经常用到
一、特殊情况下position的定义
比如这个例子,背景是张图片,输入框,提交按钮、以及下边的六个按钮的单击事件都是固定在图片之上的。
(图1) (图2)
设置技巧:
1) 背景用的是background:url();链接的图片
2) 将背景设置position:relative; 背景之上的元素设置position:absolute;并设置相应的left,top值;
3) 一般弹窗都会使元素上下、左右都居中显示,这时position属性应定义为fixed;
★ 解决定位问题——>>见图1
<span style="font-size:18px;color:#333333;"><div class="back-box">
<div class="six-wrap">
<a class="six first" οnclick="show(1)"></a>
<a class="six second" οnclick="show(2)"></a>
<a class="six third" οnclick="show(3)"></a>
<a class="six forth" οnclick="show(4)"></a>
<a class="six firth" οnclick="show(5)"></a>
<a class="six sixth" οnclick="show(6)"></a>
</div>
</div></span>
<span style="font-size:18px;color:#333333;">.back-box{<span style="color:#ff0000;"><strong>position:relative;</strong></span>width:640px;height:1703px;background:url(img/back.jpg) no-repeat 0 0;-webkit-background-size:640px auto;overflow:hidden}
.six-wrap{width:514px;height:380px;<span style="color:#ff0000;"><strong>position:absolute;</strong></span>left:64px;bottom:65px}
.six{cursor:pointer;<span style="color:#ff0000;"><strong>position:absolute;</strong></span>width:140px;height:156px;top:0;left:0}</span><span style="font-size:14px;">
</span>
★ 解决弹窗定位问题——>>见图2
<span style="font-size:18px;color:#333333;"><div class="wrapper">
<div class="one six-wrap"><h3 class="six-title">1</h3></div>
<div class="two six-wrap"><h3 class="six-title">2</h3></div>
<div class="three six-wrap"><h3 class="six-title">3</h3></div>
<div class="four six-wrap"><h3 class="six-title">4</h3></div>
<div class="five six-wrap"><h3 class="six-title">5</h3></div>
<div class="six six-wrap"><h3 class="six-title">6</h3></div>
</div></span>
<span style="font-size:18px;color:#333333;"><pre name="code" class="css">
</span>
<span style="font-size:18px;color:#333333;">.wrapper{width:526px;height:650px;top:85%;left:50%;margin-left:-282px;margin-top:-677px;padding:20px;</span>
<span style="font-size:18px;color:#333333;">color:#fff;background:#549DFC;overflow:hidden;
<span style="color:#ff0000;"><strong>position:fixed;</strong></span>border:solid 3px #0f5ec8;border-radius:10px;z-index:100}
.six-wrap{line-height:37px;padding:15px;text-align:justify;z-index:100}</span>
</pre><p></p><pre>
备注:针对要弹出的窗口使用position:fixed;属性,此时的fixed属性比position:absolute;要管用的多,为了兼容移动端各尺寸,用fixed只设置top,left,即可兼容,如果使用absolute,则兼容性不如fixed好调一些。
二、background:url();<img>标签分别在什么时候使用
背景图片一般用background:url();像上边的例子背景就用的background设置兼容性更好些,加载图片时也具有整体性(图3)。
装饰图片一般用<img>标签,上图中提交按钮,就可以用img标签设置(图4)。
(图3, 图4)
三、巧用伪类
1) 下边的例子中,文字下边的红色下划线用:after伪元素就实现的比较好。
<span style="font-size:18px;color:#333333;">.underline:after {
content: " ";
position: absolute;
background-color: #ffdcfd;
left: 0;
bottom: -2px;
height: 7px;
width: 100%;
z-index: -1;
}</span>
2) 下边这种,左右箭头<>,用:after,:before实现起来比较方便。
<span style="font-size:18px;color:#333333;">.duotive-modal .pp_arrow_previous:before {
content: " ";
width: 15px;
height: 17px;
top: 32px;
bottom: 0;
margin-right: 18px;
background: url(../img/left-arrow.png) no-repeat center center;
background-size: 75%;
display: inline-block;
}
.duotive-modal .pp_arrow_next:after {
content: " ";
width: 15px;
height: 17px;
top: 32px;
margin-left: 18px;
background: url(../img/right-arrow.png) no-repeat center center;
background-size: 75%;
display: inline-block;
}</span>
3) 特殊情况下,hover和伪类一起使用 .div a:hover::after{}
一般导航条hover时用这种伪类结合伪元素用的较多
<span style="font-size:18px;color:#333333;">li.menu-item a::after{
content: " ";
position: absolute;
display: block;
width: 0;
left: 50%;
bottom: 0;
border-bottom: solid 2px #FF9800;
opacity: 0;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
}
li.menu-item a:hover::after{
opacity: 1;
left:0;width:100%;
}</span>
四、flex布局在什么时候用最合适
推荐大家一个flex效果现成的网站,根据想要的效果,直接生成代码。
http://flexboxin5.com/
大概说下flex的常用功能吧,如下:
<span style="font-size:18px;color:#333333;"><div class="flex-container">
<div class="flex-items-default flex-item-1"></div>
<div class="flex-items-default flex-item-2"></div>
<div class="flex-items-default flex-item-3"></div>
<div class="flex-items-default flex-item-4"></div>
<div class="flex-items-default flex-item-5"></div>
</div></span>
<span style="font-size:18px;color:#333333;">.flex-container{
display: flex;
/*flex容器方向主要有水平和纵向两种,纵向显示为column*/
flex-direction: row;
/*flex项目在容器中按一行或多行排列,多行wrap,一行nowrap*/
flex-wrap:wrap;
/*flex项目在容器水平方向显示的对齐方式。
flex-start,flex-end,center,space-between,space-around*/
justify-content: center;
/*flex项目在容器垂直方向显示的对齐方式。
flex-start,flex-end,center,space-between,space-around,stretch*/
align-content: center;
/*flex项目在容器垂直方向显示的对齐方式。
flex-start,flex-end,center,baseline,stretch*/
align-items: center;
}
.flex-items-default{
width:300px;
height:250px;
}</span>
不适合用flex布局的页面:
请仔细对比下,上下两张图片的区别,flex布局,适合单行应用,如果多行,上下左右都居中,且多行item是左对齐,向下边这种,左右,上下距离相等,且每小项换行时都是居左的,flex就做不到这种布局。
这时就要利用@media兼容不同尺寸的分辨率了。
这里简单列举下几个pc端常用的尺寸设置:
<span style="font-size:14px;"> </span><span style="font-size:18px;color:#333333;"> ol.layouts {
padding:0;
max-width: 2000px;
margin: 0 auto
}
@media screen and (max-width: 2059px) {
ol.layouts {
max-width: 1750px
}
}
@media screen and (max-width: 1809px) {
ol.layouts {
max-width: 1500px
}
}
@media screen and (max-width: 1559px) {
ol.layouts {
max-width: 1250px
}
}
@media screen and (max-width: 1309px) {
ol.layouts {
max-width: 1000px
}
}
@media screen and (max-width: 1059px) {
ol.layouts {
max-width: 750px
}
}
@media screen and (max-width: 809px) {
ol.layouts {
max-width: 500px
}
}
@media only screen and (max-width: 870px) {
.wrap-inner {
padding:15px;background:none;
}
}
@media screen and (max-width: 520px){
ol.layouts li.group{
width:47.5%;
margin:0 5% 5% 0;
}
ol.layouts li.group:nth-of-type(2n){
margin-right:0;
}
ol.layouts li ul.tools{display: none;}
}</span>
备注:根据不同的@media宽度,设置内容的最大宽度,max-width值。