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; //背景尺寸等比例放大 直到小的尺寸和盒子尺寸一样