基本的web页面样式(就是一开始把所有的基础样式都规定好)

来源:互联网 发布:java后端是做什么的 编辑:程序博客网 时间:2024/05/21 19:50
body,
html,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
ol,
dl,
dt,
dd,
table,
button,
tr,
td,
form,
input,
textarea,
button,
th,
td,
img,
b,
a,
span {/*上面所有标签都设置没有边界,没有填充,即内外边界都是0*/
  margin: 0;
  padding: 0;
}
a {/*a标签不要文本修饰,下划线等等都不要*/
  text-decoration: none;
}
li {/*li列表项前没有什么修饰,圆、数字等都不要*/
  list-style: none;
}
img {/*没有边框*/
  border: none;
}
input,
textarea,
button {/*没有边框*/
  border: none;
}
i,
em {/*em给一个字体正常的样式*/
  font-style: normal;
}
/*  define自定义样式
------------------------------------------------------------------------------------------------------------------------------------*/
body {
  font-size: 14px;
  font-family: "微软雅黑";
  color: #999;
}
.zldx_fl {
  float: left;/*向左悬浮*/
}
.zldx_fr {
  float: right;/*向右悬浮*/
}
.zldx_wrap {
  width: 1200px;/*宽度1200px*/
  margin: 0 auto;
}
.zldx_clear {
  clear: both;/*清除所有的样式*/
}
.zldx_clearfix:after {
  content: "";
  height: 0;
  font-size: 0;
  overflow: hidden;
  display: block;
  clear: both;
  visibility: hidden;
}
.zldx_clearfix {
  *zoom: 1;/*缩放比例为1*/
}
/*  common公用样式
-------------------------------------------------------------------------------------------------------------------------------------*/
.zldx_header {
  height: 80px;/*高度*/
  background: #003e6e;
  color: #fff;
}
.zldx_header h1 {
  line-height: 80px;/*行高*/
  margin-left: 10px;
  font-size: 30px;
  font-weight: normal;
}
.zldx_header a > img {
  padding-top: 22px;/*a下的img的距上面的距离*/
}
.zldx_header ul {
  line-height: 80px;
  margin: 0 86px;
}
.zldx_header ul > li {
  float: left;
  font-size: 16px;
  margin-right: 30px;
}
.zldx_header ul > li > a {
  color: #fff;
}
.zldx_header .icon {
  color: #fff;
  font-size: 18px;
  line-height: 36px;
}
.zldx_header .icon i {
  margin-left: 8px;
}
.zldx_header form input {
  width: 180px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
}
.zldx_header form button {
  text-align: center;
  width: 40px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  background: #fff;
}
0 0
原创粉丝点击