css 特殊使用技巧

1  border颜色设置

border-color: transparent black black black;   分别设置四条边框的颜色  上边transparent 透明无色

2  阴影

text-shadow: 1px1px5pxrgba(187,187,97,0.71);

text-shadow:[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)],[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)]...

 

3  input focus状态输入框变大

#main-nav .search input:focus {

outline: none;

-webkit-transition:-webkit-transform .15s ease ;

        transition: -webkit-transform .15s ease;

                        transition: transform .15s ease;

                        transition: transform .15s ease, -webkit-transform .15s ease;

                            -webkit-transform: scale(1.1);

                                    transform: scale(1.1);

}

white-space: nowrap;   /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/

text-overflow: ellipsis;    /* 文字溢出神略号显示*/

 

4  在网页头部显示icon 

<link rel="shortcut icon" href="img/favicon.ico"/>

5 alt

<img src="img/logo.png" alt="" />  <!--alt增加页面在搜索引擎中的搜索排名 为视觉智障人士提供智能提示-->

6: 设置height:100%有效果

body,html {

width: 100%;

height: 100%;

}

7 图片在div中水平居中

在html中:

<div align="center" class="logo"><img class="logo_image" src="img/menuImages/logo.png" /> </div>

css中: 

<div align="center"><img class="logo_image" src="img/menuImages/logo.png" /> </div>

.logo {

width: 100%;

height: 16.9%;

text-align: center;

}

8 : 动态修改images的src

 $("img.arrow").attr("src","img/menuImages/right_arrow.png");

9 : 判断当前选中的是否是某个元素

var $orderManager = $(".orderManage li:first-child");

if($(this).is($orderManager)) {

alert("订单管理");

}

10 : 有这样的一个元素

<li><a href=""><img src="indeximage/shiyongyanshi.gif"/><span> 使用演示</span></a></li>

设置整个区域都可以点击

.side_left .orderManage li a {

display: block;

width: 100%;

height: 60px;

}

demo

<script type="text/javascript">

$(document).ready(function(){

var flag = true;

var headerFalg = true;

// var $orderManagerFirst = $(".orderManage li:first-child");

// var $orderManagerSecond = $(".orderManage li:nth-child(2)");

$(".liClick a").click(function(){

$(this).css({"background-color":"#37a0c9","color":"#fff"});

$(this).parent().siblings().children().css({"background-color":"#1f2d38","color":"#a2b7c8"});

// if($(this).is($orderManagerFirst)) {

// alert("订单管理");

// } else if($(this).is($orderManagerSecond)) {

// window.location.href = "in_houseOrder.html"

// alert("入库管理");

// }

});

11: 下拉菜单样式修改

.status_AWB {

border: 1px solid #e5e5e5;

width: 14.458%;

height: 40px;

margin-left: 14px;

/*清除默认的select选择框样式清除*/

appearance: none;

-moz-appearance: none;

-webkit-appearance: none;

background: url(../img/menuImages/arrow_down_gray.png) no-repeat center ;

background-position-x: 90%;/*背景图片的位置*/

padding-right: 14px;

padding-left: 8px;

}

12 : 圆角

border-radius: 5px;

13: 图片上添加文字

1 代码如下:

 

<div style="background:url('img.jpg') no-repeat;width:100px;height:50px">添加文字</div> 

2 加<span>标签，设置css样式，你加入的代码是： 

 

复制代码

代码如下:

 

<div style="position: relative; width: 170px; height: 89px;"> 

<img src="图片地址" width="170" height="89" alt=""> 

<span style="position: absolute; top: 0; left: 0;">添加文字...添加文字...添加文字...</span> 

 

</div> 

 

 

html js 定位 点击按钮 跳到页面某个位置

原理：页面各元素赋予唯一ID，js通过ID转到该元素

代码：

<script>

function onTopClick() {  

        window.location.hash = "#abc";   

 } 

</script>

<input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />

<div id="abc">跳转到的位置</div>

14   table 点击tr跳转页面

 <tr class="tr" onclick="location.href='orderDetail.html'">

 

15  等比例放大背景图片

.gc {height: 485px; border: 1px solid #fff;border-bottom: none;border-top: none;background: url(img/2.jpg) no-repeat;background-size: cover;}

background-size: cover;    //背景尺寸等比例放大 直到小的尺寸和盒子尺寸一样