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 }