yjxf8285@qq.com

HTML/CSS

HTML标签-英文全称对照表

Posted By 刘晓帆 | 98 views

HTML标签
英文全称
中文释义

a
Anchor

abbr
Abbreviation
缩写词

acronym
Acronym
取首字母的缩写词

address
Address
地址

dfn
Defines a Definition Term
定义定义条目

kbd
Keyboard
键盘(文本)

samp
Sample
示例(文本

Read More

HTML/CSS

CSS3 点击放大动画实例

Posted By 刘晓帆 | 1,475 views

需求:点击商品图片右上的收藏按钮触发放大动画;
技术重点css3:@keyframes animation

<!DOCTYPE html>
<head>
<style type="text/css">
@keyframes myfirst {
0% {

Read More

HTML/CSS

css框架

Posted By 刘晓帆 | 994 views

HTML/CSS

阻止浏览器内鼠标多次点击选中文本

Posted By 刘晓帆 | 619 views

<em class=”subtraction-btn” onselectstart=”return false” style=”-moz-user-select:none;”>

Read More
  • 阻止浏览器内鼠标多次点击选中文本已关闭评论
  • over 2 years ago

HTML/CSS

Firefox(火狐) 下 text-overflow:ellipsis 的省略号会浮动在上面

Posted By 刘晓帆 | 910 views

text-overflow:ellipsis 属性通常用于隐藏超出长度的文本,并在文本最后面增加省略号。
如果在网页的交互等过程中,出现一个新层(例如鼠标移动到下拉菜单,弹出下拉菜单内容),在 Firefox 下,文本内容当然会被新弹出内容遮住,但是省略号并不会。它会出现在新层的上面。
如果你也遇到了这个问题,解决方法很简单,只需要为新弹出的覆盖层的 z-index 属性赋值为 >1 的数值即可,这样就可以解决了。你可以在上面的 Demo 中,使用 Firebug 增加一下。

Read More
  • Firefox(火狐) 下 text-overflow:ellipsis 的省略号会浮动在上面已关闭评论
  • over 2 years ago

HTML/CSS

cursor — 定义鼠标样式

Posted By 刘晓帆 | 486 views

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit

[<uri> ,]*:

Read More

HTML/CSS

CSS3的响应式布局

Posted By 刘晓帆 | 1,424 views

做手机端网页需要用到响应式布局,首先需要再HTML文件头声明一下:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no” />
主要目的是宽度控制和禁止用户缩放,具体参数自己GOOGLE一下。
下面是CSS判断是PC端还是移动端
其实很简单,用CSS3的媒体查询就可以非常方便去实现,不需要用userAgent神马的那么麻烦。
/*最小宽度800就是PC端*/
@media all and (min-width: 800px) {
#nav {
width: 300px;
float: left;
margin-right: 20px;
}

Read More

HTML/CSS

chorme的input兼容方式

Posted By 刘晓帆 | 779 views

/**
* 兼容chorme
* 输入框光标位置和黄色边框
* 这段放到最后面
* Class名称要保持一致才会重置到样式
**/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.exmails-form .form-input-text {
line-height: 15px;

Read More

HTML/CSS

ie6的max-width问题解决方案

Posted By 刘晓帆 | 783 views

最大宽度对页面布局来说在很多情况下会经常用到,但是万恶的IE6是不支持的,如果非要兼容IE6的话 没有什么办法只能靠JS解决了,用expression方法直接把JS代码写在CSS里面还是比较方便的,下面是完整的代码。
[css].mydiv{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;}[/css]

Read More

HTML/CSS

给TR加边框的问题

Posted By 刘晓帆 | 3,190 views

遇到需要给TR加边框的需求,一定很头疼,因为目前还没发现有什么完美的方法解决这个问题,为了兼容性最后我只能选择给TD上下加边框,然后用JS判断第一个TD和最后一个TD的左右边框。
如果不考虑IE6和IE7的话用下面的最简单方法也可以,只是谷歌和火狐有点区别,还有一点小闪动现象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给tr加边框</title>
<style type="text/css">
body{ padding: 10px; }
.tablewarp{ border:solid 1px #ccc;padding: 2px; }
.otable{ width: 100%; border:none; border-collapse:collapse; }
.otable tr{border-top:solid 1px transparent; }
.otable tr:hover{ border:solid 1px blue; background: #eee; }
.otable tr td{ border:none;

Read More