web前端
CodingAlarm
宁缺毋滥
展开
-
input标签file类型,去除不同浏览器“未选择文件”字样办法
之前的样式,这个“未选择文件”很想把它去掉吧?这段代码的运行结果,去掉了“未选择文件”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档#file{ width:226px; height:25px;原创 2015-07-20 15:04:21 · 27535 阅读 · 1 评论 -
超出的字用省略号来代替
a{ display : block; width : 95px; overflow : hidden; white-space : nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; background : url(../images/admin_ico.p原创 2016-07-16 10:29:02 · 931 阅读 · 0 评论 -
css实现滚动条效果
在div上添加overflow-y: scroll这个css样式,就能显示出一个滚动条,如果不指定是x或y轴,则水平和垂直都会出现滚动条。<style> div{ width:200px; height: 500px; overflow-y: scroll;}</style><div></div>原创 2016-07-16 09:42:04 · 2199 阅读 · 0 评论 -
css3设置textarea不可改变大小
resize : nonecss3新属性,设置为none用户不可以调节元素的宽和高,可以用在任意元素上,一般和textarea一起用,不让textarea可拉伸。 textarea{ width:400px; height:200px; resize:none;}原创 2016-07-16 09:35:55 · 10818 阅读 · 0 评论 -
label标签
通常它是和radio绑定到一起,起到的作用是点击这个label标签的文字,就可以触发它绑定的radio,label和span是没多大区别的,只不过是可以通过for指向某一个id,从而和该id的元素进行绑定。 通过for和id互相指向要绑定的元素<form> <label for="male">Male</label> <input type="radio" name="sex"原创 2016-07-16 09:01:45 · 931 阅读 · 0 评论 -
用CSS3实现旋转的CD
用到了css3的@keyframes规则 (http://www.w3school.com.cn/cssref/pr_keyframes.asp),通过@keyframes规则能够创建动画。CSS3是可以通过代码来创建动画的。用@keyframes定义规则后,就不用像之前先在元素定义执行几秒,运动样式,再在hover上定义旋转度数了。直接在规则中全部定义好,再在hover引用。用法 1. 定义一原创 2016-07-16 08:40:35 · 5101 阅读 · 0 评论 -
css旋转实例
原理:元素规定旋转的时间、效果(快慢) 元素Hover规定旋转完成后是个什么样子(转了多少度,宽延长到多长) 两个关键字:transition、transform,只用到了hover div{transition:2s linear} //在两秒内,相近的速度旋转 div:hover{transform:rotate(360deg);} //旋转个360度 *以上原创 2016-07-15 17:28:37 · 2608 阅读 · 0 评论 -
z-index不起作用
在该元素上加position:relative;要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。原创 2016-07-15 17:19:40 · 523 阅读 · 0 评论 -
元素设置成透明
通常 opacity:0; IE下 filter:alpha(opacity=0);火狐下 -moz-opacity:0;原创 2016-07-15 17:12:33 · 522 阅读 · 0 评论 -
用css代码制作三角型(border属性)
用border作三角型border4个边的颜色,一个有颜色,其它三个透明。border-color: transparent #f66 transparent transparent; border-style: solid; border-width: 4px;原创 2016-07-15 17:10:51 · 676 阅读 · 0 评论 -
行内块元素display:inline-block
举例: < a > 标签1< /a>< a >标签2< /a>< a >标签3< /a > a标签本来就是内联 这样写,他出来效果就是——–标签1标签2标签3 但如果你想要定义宽度,不加块状是起不来作用的,但是单单设置为块状(display:block),他又换行了,所以这时加display:inline-block 就起到很大作用,内联块状,宽度既能实现,又能不换行… a{width:1原创 2016-07-15 17:07:32 · 1320 阅读 · 0 评论 -
line-height和height的区别
line-heigth是行高的意思,它决定了元素中文本内容的高度,height则是定义元素自身的高度。如:<p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>假如定义p标签的行高为line-heigth:20px; 文字在浏览器中显示为一行时,这个p标签的高度会为20px,如果为两行,则p标签的高度为40px;行高20px; 行高变为40px;原创 2016-07-15 12:02:55 · 10253 阅读 · 0 评论 -
解决input的file类型各浏览器的样式兼容
我们都希望做出的上传图片可以是以下这种美观的,但是原生的input file类型,不仅不美观 ,而且各浏览器都显示不同,如何解决呢?美观的 chrome下 firefox下 IE下 一般来说,我们会用“模拟”的方式,先把原生的file类型设置为透明(不是dispaly:none),然后用其它元素模拟出它的样子,file覆盖在之上。“上传”按钮再提交到服务器。目的是叠加成这种样子,然后把fil原创 2016-07-14 17:40:55 · 10076 阅读 · 0 评论 -
配合字体图标的搜索框
一、配合字体图标的搜索框 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="iconfont/iconfont.css"/> <style> *{ margin:0px; padding原创 2016-07-14 10:44:23 · 1845 阅读 · 0 评论 -
解决chrom字体小于12号都显示为12号的办法
解决chrom字体小于12号都显示为12号的办法 把chrom设置为英文语言环境下即可,设置--语言和输入设置--添加英文语言,把英文托到最上面,一定要选择“以这种语言显示google chrome”,并且重启浏览器,不然不生效。这样设置完后,小于12号字的字号也能正常显示了(chrome只对中文下的环境进行了字号设置)。原创 2016-07-12 23:01:23 · 2714 阅读 · 0 评论 -
web前端页面命名参考
整理自网络 以下为页面模块的常用命名: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度: 左右中:left right ce转载 2015-07-20 13:02:45 · 3118 阅读 · 0 评论 -
注册表单
效果html代码 会员注册(带*号为必填项) 登录账号: * 登录密码: * 确认密码: * 邮 &nb原创 2015-07-20 14:31:58 · 934 阅读 · 0 评论 -
简单导航
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*基础样式*/ *{ margin: 0px; padding:0px;} body{font-family: "Microsoft YaHei" ;fo原创 2016-07-16 11:04:58 · 938 阅读 · 0 评论