医院实战总结_医院聊天实战-优快云博客

css

background
background-position
知道了position的用法。
background-img不占容器的内容。直接用padding 即可。

.content-close .list,
.content-news .list{
    padding: 15px 20px 13px 35px;
    line-height: 29px;
    background:url(../img/list-yellow.jpg) 17px 20px no-repeat;/*第一个数值是左右第二个是上下*/
}

像input、button不想要有border：

select,input{
    border: none;
    outline: none;
}

如果在一张图片想要只显示一部分内容：

background-position: 0 -23px;

float:left之后，第二的倍数的item要加margin-left.

.block-content .block-text-list .item:nth-child(2n){
    margin-left: 13px;
}

JQ插件模式开发UI组件：

开发方法：

通过$.extend()来扩展jQuery
通过$.fn向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建。

$.extend({
    sayHello:function(){
        console.log('hello!');
}
})

$.sayHello();

$.fn.blue=function(){
    this.css('background-color','blue');
}

$('div').blue();
$('body').blue();

$(function(){
    alert(1);
})

alert(2);

//$(function(){
//
//})
//上面的代码会在页面全部加载完才执行。所以先执行alert(2);再执行alert(1);

在每个a标签后加|

.ui-menu-item-detail-group-list a:after{
    content: ' |';
    color: #ddd;
}

点击前是一个图片点击后是另一个图片

.ui-menu-item-department:before{
    content: ' ';
    display: block;
    width: 22px;
    height: 21px;
    position: absolute;
    left: 0;
    top: 1px;
    background: url("../img/icon-menu.jpg") -22px 0 no-repeat;
}
.ui-menu-item:hover .ui-menu-item-department:before{
    /*background: url("../img/icon-menu.jpg") 0 0 no-repeat;*/
    /*background-position: 0 0;*/
    background-position-x: 0;
}

.ui-menu-item:nth-child(2) .ui-menu-item-department:before{
    background-position-y: -22px;
}
.ui-menu-item:nth-child(3) .ui-menu-item-department:before{
    background-position-y: -44px;
}