html css 7小时,index7.html

测试界面7

body {

/* 去除间隙 */

margin: 0;

}

ul {

/* 去除间隙 */

margin: 0;

/* 去除标点 */

list-style-type: none;

}

ul li {

float: left;

/* 增加元素内边距，遵循上/右/下/左原则 */

padding: 0 8px 0 8px;

color: #999;

/* 当鼠标触控到区域时自动变化为手指图标 */

cursor: pointer;

}

/* 当鼠标放置在该元素上边时使用如下设定的样式 */

ul li:hover {

color: #e33333;

}

.pg-head {

height: 44px;

background-color: #e3e4e5;

/* 让标签内的元素按照这个高度进行居中 */

line-height: 44px;

}

.w {

width: 980px;

background-color: #7FFFD4;

/* 让布局自动居中 */

margin: 0 auto;

}

.pg-body {

/* div标签设置边框后，会包裹整行，所以需要将其设置为inline-bloack标签才能包裹内容 */

border: 1px solid gray;

/* 设置为inline-block后，子标签元素之间会存在默认的三像素间隙，需要在子元素里边设置为漂浮 */

display: inline-block;

}

.inp {

border: 0;

border-left: 1px solid gray;

border-right: 1px solid gray;

height: 25px;

width: 40px;

/* 由于父元素标签采用的display是inline-block，则会存在默认的三像素空隙，因此设置为向左漂浮即可去除该三像素 */

float: left;

padding-left: 5px;

}

.sp {

display: inline-block;

height: 25px;

width: 25px;

text-align: center;

line-height: 25px;

/* 由于父元素标签采用的display是inline-block，则会存在默认的三像素空隙，因此设置为向左漂浮即可去除该三像素 */

float: left;

}

.left {

float: left;

}

.clearfx::after {

content: '.';

clear: both;

display: block;

visibility: hidden;

height: 0;

}

• 标题1
• 标题2
• 标题3
• 标题4

-

+

1

2

一键复制

编辑

Web IDE

原始数据

按行查看

历史