↓跳到主要内容

切图过程中一些Css样式总结

·1806 字·4 分钟
UI CSS 切图

切图过程中一些CSS样式总结

1.div水平居中显示 #

使用margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out-div{
            width: 1200px;
            height: 600px;
            background-color: red;
        }
        .in-div{
            width: 600px;
            height: 300px;
            background-color: green;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div class="out-div">
    <div class="in-div"></div>
</div>

</body>
</html>

2.div水平垂直居中 #

水平居中，垂直居中，水平垂直居中都可以使用flex布局，即display:flex;

如图所示，使用开发者工具在外层div选择flex即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out-div{
            width: 1200px;
            height: 600px;
            background-color: red;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
        }
        .in-div{
            width: 600px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>

<div class="out-div">
    <div class="in-div"></div>
</div>

</body>
</html>

3.超出的部分用’…‘表示，并且鼠标悬浮在上面可以显示全部 #

（1）white-space: nowrap;：规定段落中的文本不进行换行

（2）overflow: hidden;：溢出隐藏

（3）text-overflow: ellipsis;：单行，多行文本溢出显示…

（4）添加title属性可以使鼠标悬浮在上面显示对应title内容

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 176px;
            height: 20px;
            border: 1px red solid;
        }
        span{
            display: block;
            font-size: 15px;
            line-height: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <span title="这是一个测试超出长度的省略功能">
            这是一个测试超出长度的省略功能
        </span>
    </div>

</body>
</html>

4.锚点的使用，以及使用position:fixed;之后锚点定位偏移问题解决 #

自己开发过程中常用到的锚点一般有两种：

1.用a标签的href属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>link</title>
    <style>
        .link{
            float: left;
        }
        .target{
            float: left;
        }
        .target ul li{
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="link">
        <a href="#JAMES">1</a>
        <a href="#PAUL">2</a>
        <a href="#HARDEN">3</a>
    </div>
    <div class="target">
        <ul>
            <li id="JAMES">JAMES</li>
            <li id="PAUL">PAUL</li>
            <li id="HARDEN">HARDEN</li>
        </ul>
    </div>
</body>

</html>

但是使用这种方法，如果头部有使用position:fixed固定的话，锚点定位就会有便宜，不是很好修改。就像下图：

可以使用下面方法来纠正因为position:fixed固定位置导致的偏移量。

2.JQuery animate方法定位页面具体位置

//将要定位到的位置的id选择器传入
scrollOffset($("#id").offset();

// jQuery 定位让body的scrollTop等于pos的top，实现滚动
//90指的是向上纠正的偏移量，可以根据实际大小进行调整
//0指的是滑动延迟，0表示直接到达，数值越大越慢，可以看下图0与1000对比
function scrollOffset(scroll_offset) {
    $("body,html").animate({
        scrollTop: scroll_offset.top - 90
    }, 0);
}

5.点击tab页切换样式：active、hover #

效果：

代码：

<div class="div-trial-title">
        <div id="caseinfo_div" onclick="clickTab('0')" class="div-trial-title-tab">
            <div class="div-trial-title-tab-content">
                <div class="div-trial-title-tab-title ">
                    案件信息
                </div>
            </div>
        </div>
        <div id="questionnaire_div" onclick="clickTab('1')" class="div-trial-title-tab">
            <div class="div-trial-title-tab-content">
                <div class="div-trial-title-tab-title1 ">
                    问题单
                </div>
            </div>
        </div>
        <div id="proof_div" onclick="clickTab('2')" class="div-trial-title-tab">
            <div class="div-trial-title-tab-content">
                <div class="div-trial-title-tab-title2  ">
                    举证质证
                </div>
            </div>
        </div>
        <div id="doclist_div" onclick="clickTab('3')" class="div-trial-title-tab">
            <div class="div-trial-title-tab-content">
                <div class="div-trial-title-tab-title3 ">
                    文书列表
                </div>
            </div>
        </div>
        <div id="chat_div" onclick="clickTab('4')" class="div-trial-title-tab">
            <div class="div-trial-title-tab-content">
                <div class="div-trial-title-tab-title4 ">
                    我的群聊
                </div>
            </div>
        </div>
        <button type="button" onclick="endCase()">结束案例</button>
    </div>

.div-trial-title{
    background: #fff;
    margin: auto;
    margin-top:15px;
    width: 97%;
    height: 68px;
    box-shadow: 0px 2px 7px 2px #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
}
.div-trial-title > button{
    width: 80px;
    height: 35px;
    border: none;
    color: #fff;
    float: right;
    border-radius: 5px;
    background: #0a7df3;
}
.div-trial-title-tab{
    width: 17%;
    float: left;
    height: 68px;
    position: relative;
}
.active{
    width: 17%;
    float: left;
    height: 68px;
    position: relative;
    border-bottom:solid 2px ;
    border-color:#0254a0;
    color:#0254a0;
    font-weight: bold;
    /*background-color: #b8daff;*/
}
.div-trial-title-tab:hover{
    width: 17%;
    float: left;
    height: 68px;
    position: relative;
    background-color: #b8daff;
}
.div-trial-title-tab-content{
    cursor: pointer;
    text-align: center;
}
.div-trial-title-tab-img{
    width: 68px;
    height: 68px;
    position: absolute;
    top: 10px;
    left: 60px;
}
.div-trial-title-tab-title{
    width: 100%;
    line-height: 30px;
    height: 30px;
    font-size: 19px;
    text-align: center;
    position: absolute;
    top: 20px;
    left: -10px;
}
.div-trial-title-tab-title:before {
    content:url("../../../images/business/asynTrial/case.png");
    margin-right:10px;
    vertical-align: middle;
}
.active .div-trial-title-tab-title:before {
    content:url("../../../images/business/asynTrial/case-sel.png");
    margin-right:10px;
    vertical-align: middle;
}

/*第二个*/
.div-trial-title-tab-title1{
    width: 100%;
    line-height: 30px;
    height: 30px;
    font-size: 19px;
    /*color: #000000;*/
    text-align: center;
    position: absolute;
    top: 20px;
    left: -10px;
}
.div-trial-title-tab-title1:before {
    content:url("../../../images/business/asynTrial/issue.png");
    margin-right:10px;
    vertical-align: middle;
}
.active .div-trial-title-tab-title1:before {
    content:url("../../../images/business/asynTrial/issue-sel.png");
    margin-right:10px;
    vertical-align: middle;
}
/*第3个*/
.div-trial-title-tab-title2{
    width: 100%;
    line-height: 30px;
    height: 30px;
    font-size: 19px;
    /*color: #000000;*/
    text-align: center;
    position: absolute;
    top: 20px;
    left: -10px;
}
.div-trial-title-tab-title2:before {
    content:url("../../../images/business/asynTrial/proof.png");
    margin-right:10px;
    vertical-align: middle;
}
.active .div-trial-title-tab-title2:before {
    content:url("../../../images/business/asynTrial/proof-sel.png");
    margin-right:10px;
    vertical-align: middle;
}
/*第4个*/
.div-trial-title-tab-title3{
    width: 100%;
    line-height: 30px;
    height: 30px;
    font-size: 19px;
    /*color: #000000;*/
    text-align: center;
    position: absolute;
    top: 20px;
    left: -10px;
}
.div-trial-title-tab-title3:before {
    content:url("../../../images/business/asynTrial/material.png");
    margin-right:10px;
    vertical-align: middle;
}
.active .div-trial-title-tab-title3:before {
    content:url("../../../images/business/asynTrial/material-sel.png");
    margin-right:10px;
    vertical-align: middle;
}
/*第5个*/
.div-trial-title-tab-title4{
    width: 100%;
    line-height: 30px;
    height: 30px;
    font-size: 19px;
    /*color: #000000;*/
    text-align: center;
    position: absolute;
    top: 20px;
    left: -10px;
}
.div-trial-title-tab-title4:before {
    content:url("../../../images/business/asynTrial/chat.png");
    margin-right:10px;
    vertical-align: middle;
}
.active .div-trial-title-tab-title4:before {
    content:url("../../../images/business/asynTrial/chat-sel.png");
    margin-right:10px;
    vertical-align: middle;
}
.div-trial-content{
    width: 100%;
    height: 100%;
    margin-top: 10px;
}

function clickTab(index) {
    var userId = AW.url.getUrlParam("userId");
    var userName = AW.url.getUrlParam("userName");
    if (index == '0') {
        $("#caseinfo_div").addClass("active");
        $("#questionnaire_div").removeClass("active");
        $("#proof_div").removeClass("active");
        $("#doclist_div").removeClass("active");
        $("#chat_div").removeClass("active");
        $("#caseinfo_iframe").css('display', 'block');
        $("#questionnaire_iframe").css('display', 'none');
        $("#proof_iframe").css('display', 'none');
        $("#doclist_iframe").css('display', 'none');
        $("#chat_iframe").css('display', 'none');
        $('#caseinfo_iframe').attr('src', '../../business/syncase/casequery.html?trialId=' + trialId+"&userId="+userId+"&userName="+userName)
    } else if (index == '1') {
        $("#caseinfo_div").removeClass("active");
        $("#questionnaire_div").addClass("active");
        $("#proof_div").removeClass("active");
        $("#doclist_div").removeClass("active");
        $("#chat_div").removeClass("active");
        $("#caseinfo_iframe").css('display', 'none');
        $("#questionnaire_iframe").css('display', 'block');
        $("#proof_iframe").css('display', 'none');
        $("#doclist_iframe").css('display', 'none');
        $("#chat_iframe").css('display', 'none');

        $('#questionnaire_iframe').attr('src', '../../business/issuedetail/issuedetail.html?trialId=' + trialId+"&userId="+userId+"&userName="+userName)
    } else if (index == '2') {
        $("#caseinfo_div").removeClass("active");
        $("#questionnaire_div").removeClass("active");
        $("#proof_div").addClass("active");
        $("#doclist_div").removeClass("active");
        $("#chat_div").removeClass("active");
        $("#caseinfo_iframe").css('display', 'none');
        $("#questionnaire_iframe").css('display', 'none');
        $("#proof_iframe").css('display', 'block');
        $("#doclist_iframe").css('display', 'none');
        $("#chat_iframe").css('display', 'none');

        $('#proof_iframe').attr('src', '../../business/proof/proof.html?trialId=' + trialId)
    } else if (index == '3') {
        $("#caseinfo_div").removeClass("active");
        $("#questionnaire_div").removeClass("active");
        $("#proof_div").removeClass("active");
        $("#doclist_div").addClass("active");
        $("#chat_div").removeClass("active");
        $("#caseinfo_iframe").css('display', 'none');
        $("#questionnaire_iframe").css('display', 'none');
        $("#proof_iframe").css('display', 'none');
        $("#doclist_iframe").css('display', 'block');
        $("#chat_iframe").css('display', 'none');
        $('#doclist_iframe').attr('src', '../../business/synsign/synsign.html?trialid=' + trialId+"&userId="+userId+"&userName="+userName)
    } else if (index == '4') {
        $("#caseinfo_div").removeClass("active");
        $("#questionnaire_div").removeClass("active");
        $("#proof_div").removeClass("active");
        $("#doclist_div").removeClass("active");
        $("#chat_div").addClass("active");
        $("#caseinfo_iframe").css('display', 'none');
        $("#questionnaire_iframe").css('display', 'none');
        $("#proof_iframe").css('display', 'none');
        $("#doclist_iframe").css('display', 'none');
        $("#chat_iframe").css('display', 'block');
        $('#chat_iframe').attr('src', '../../business/synchat/synchat.html?trialid=' + trialId+"&userId="+userId+"&userName="+userName)
    }
}

如果样式一致，可以不挨个写，如下：

<div class="sidebar-inner" id="sidebar_list">
    <div id="div-sidebar-title-0" onclick="clickSiderbar('0')" class="div-sidebar-title">
        <div title="基本事实要素问题" class="div-sidebar-title-text">
            <a id="div-sidebar-a-0" href="#858d9d4f5121e606f248de349f6089c9">基本事实要素问题</a>
        </div>
    </div>
    <div id="div-sidebar-title-1" onclick="clickSiderbar('1')" class="div-sidebar-title">
        <div title="工资支付" class="div-sidebar-title-text">
            <a id="div-sidebar-a-1" href="#858d9d4f5121e606f248de349f6089c2">工资支付</a>
        </div>
    </div>
</div>

.sidebar-inner{
    position: fixed;
    left: 50px;
    z-index: 99;
    border-right: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.div-sidebar-title-text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width: 100%;
    text-align: right;
}
.div-sidebar-title{
    font-size: 16px;
    color: #999999;
    height: 35px;
    width: 100%;
    line-height: 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 8%;
    color: black;
}
.active{
    border-right: solid 4px;
    border-color: #0254a0;
    color: #0254a0;
    font-weight: bold;
}
.div-sidebar-title:hover{
    border-right: solid 4px;
    border-color: #0254a0;
    color: #0254a0;
    font-weight: bold;
    cursor: pointer;
}

function clickSiderbar (index,id) {
    //必须先removeClass再addClass，不然添加不上
    $(".div-sidebar-title").removeClass("active");
    $(".sidebar-inner>div>div>a").removeClass("font_black");
    $(".sidebar-inner>div>div>a").removeClass("font_blue");
    $(".sidebar-inner>div>div>a").addClass("font_black");
    $("#div-sidebar-title-"+index).addClass("active");
    $("#div-sidebar-a-"+index).removeClass("font_black");
    $("#div-sidebar-a-"+index).addClass("font_blue");
}