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; //背景尺寸等比例放大 直到小的尺寸和盒子尺寸一样
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 第八十四节,css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- 《CSS动画实用技巧》课程笔记
概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- 10个CSS简写/优化技巧-摘自网友
10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CS ...
- Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧
<!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...
- CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
- DIV+CSS一些小小的技巧
DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...
- DIV+css排版问题技巧总结---v客学院技术分享
DIV+css排版问题技巧总结 一.排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...
随机推荐
- Oracle性能优化5-索引的不足
索引的不足 1.索引开销 a.访问开销 反问集中导致热块的竞争(对最新数据的查询) 回表性能取决聚合因子 索引的访问开销,返回几条数据快,但是返回大量的数据很慢 全表扫描与全扫描 ...
- .net如何处理高并发socket,建立高性能健壮的socket服务
看到一个问题,说如何保持5000-10000+的健壮的socket服务. 初学者肯定是会把每个连接都开一个线程来监听.这很浪费资源 通常只会(动态地)占用几个线程就能保持3000个长连接会话了.“为每 ...
- (转)OOP(面向对象编程)的几大原则
文章转载自:http://blog.csdn.net/anders_zhuo/article/details/8949566 设计模式遵循的一般原则: 1.开-闭原则(Open-Closed Prin ...
- C&Cpp.CallGraph
1. CodeViz http://www.skynet.ie/~mel/projects/codeviz/ 2. http://my.oschina.net/zmlblog/blog/186308
- c# 反编译后窗口控件在vs中打不开的修改方法
DialogResult.Cancel System.Windows.Forms.DialogResult.Cancel DialogResult.OK System.Windows.Forms.Di ...
- 第二周java学习收获
JAVA学习第二周总结 教材学习内容总结 第二章:讲了标识符与关键字,以及基本数据类型:逻辑类型.整数类型.字符类型.浮点类型. 输入输出,System.in,System.out和数组. 第三章:运 ...
- 视频基础知识:浅谈视频会议中H.264编码标准的技术发展
浅谈视频会议中H.264编码标准的技术发展 浅谈视频会议中H.264编码标准的技术发展 数字视频技术广泛应用于通信.计算机.广播电视等领域,带来了会议电视.可视电话及数字电视.媒体存储等一系列应用,促 ...
- [C#.Net]判断文件是否被占用的两种方法
今天开发产线测试Tool时发现日志文件会几率性的被占用,上网浏览找到最简单的代码(API或者FileStream),在这里抛砖引玉下. 第一种方法:API using System.IO; using ...
- NOIP2017普及组T1题解
神奇的链接 上面时题目. 其实不得不说,这一题很水,比2015年的第一题水多了. 直接按题目套公式就行了,当然你也可以像我一样化简一下. 直接看代码: #include<cstdio> # ...
- keras框架的CNN手写数字识别MNIST
参考:林大贵.TensorFlow+Keras深度学习人工智能实践应用[M].北京:清华大学出版社,2018. 首先在命令行中写入 activate tensorflow和jupyter notebo ...