web.html.css案例

   

 

 

 1）表格整体长度：<div class="class1"><div>: width: 960px; 

font-size: 14px;
overflow: hidden;
width: 960px;
float: left;

 

 

 1）首先看到整体向👉移动了20px；<ul class="class1"></ul

height: 50px;
line-height: 50px;
background-color: #a6a6ef;
color: #923d3d;
text-align: center;

position: relative;
padding-left: 20px;
padding-right: 50px;

2）方格的颜色、高宽；边框的颜色；中间文字内容的偏移定位、颜色、大小；<li class="class1">X</li> 或者 <div class="class1">X</div>

    #定位方法1
　　float: left;
    width: 50%; #这里用的是是<div></div>中设置的长度的百分比
    position: center;
    white-space: normal;
    background-color: #74d4b5;
    border: black 1px solid;
　　#定位方法2：
　　position: absolute;
　　top: 0;
　　right: 0;
　　width: 120px;
　　text-align: left; #这里width是文本的起点位置；如果设置了左对齐，文字会靠边对齐；从右开始偏移；

 3）去掉这个点

ol, ul {
    list-style: none
}

4）去掉表格上面的空白

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0
}

5）选择器的交集；

    <div class="pagebar">
    {% if pageInfo.has_previous %}
        <a href="{% url 'pagination' pageInfo.previous_page_number %}" class="prev"><i></i>上一页</a>
    {% endif %}
    {% for num in pageInfo.paginator.page_range %}
        {% if num == pageInfo.number %}
            <span class="sel">{{ pageInfo.number }}</span>
        {% else %}
            <a href="{% url 'pagination' num %}" target="_self">{{num}}</a>
        {% endif %}
    {% endfor %}
    {% if pageInfo.has_next %}
        <a href="{% url 'pagination' pageInfo.next_page_number %}" class="next">下一页<i></i></a>
    {% endif %}
    </div>

.pagebar {
    padding: 0 0 40px;
    font-size: 14px;
    font-family: arial;
    line-height: 34px;
    text-align: center;
}
#下面就是交集的用法
.pagebar span.sel {
    font-family: Calibri;
}
.pagebar .span.sel, .pagebar a {
#.pagebar .sel, .pagebar a {
    display: inline-block;
    border: 1px solid black;
    padding: 0 7px;
    height: 34px;
    min-width: 20px;
    white-space: nowrap;
    margin: 0 3px 0 2px;
    vertical-align: top;
    text-align: left;
}
.pagebar a {
    color: #8924e2
}
#这里是鼠标移动到该位置，颜色变化
.pagebar .sel, .pagebar a:hover {
    background: #30C37E;
    color: #fff;
    border-color: #30C37E
}