标签：service color height width 短板 li margin 补齐 css
---------------index.css 常用网站css样式属性 使用汇总1-------------
/* 先删除默认的内外边距 */
* {
margin: 0;
padding: 0;
}
body {
background-color: #fafafa;
height: 2000px;
}
li {
list-style: none; /* 取消li的符号 */
}
/* 顶部导航栏开始 */
.header {
height: 100px;
background-color: #fff;
}
.header-inner {
width: 1200px;
height: 100px;
margin: 0 auto;
/* background-color: pink; */
line-height: 100px; /* 行高会继承 */
}
.logo {
float: left;
height: 100px;
overflow: hidden; /* 图片溢出被隐藏*/
}
.logo img {
height: 100px;
}
.nav {
float: right;
}
.nav li {
float: left;
margin: 0 20px;
}
.nav li a {
color: #333;
text-decoration: none;
}
.nav li a:hover {
color: #2288f6;
}
/* banner 开始 */
.banner {
height: 620px;
background: url(../images/banner3.jpg) no-repeat;
width: 1160px;
margin: 0 auto;
}
/* service 开始 */
.service {
width: 1050px;
height: 660px;
/* background-color: pink; */
margin: 100px auto 0;
}
.service-hd {
border-top: 1px solid #ccc;
margin: 0 25px;
}
.service-hd h3 {
width: 158px;
height: 55px;
margin: -20px auto 0;
}
.service-hd p {
font-size: 14px;
color: #484848;
text-align: center;
width: 830px;
line-height: 28px;
margin: 15px auto 0;
}
.service-bd {
margin-top: 40px;
}
.service-bd li {
width: 318px;
height: 510px;
background-color: #fff;
float: left;
border: 1px solid #ccc;
border-radius: 3px;
}
.service-bd img {
margin: 40px 35px;
width: 248px;
height: 132px;
}
.service-bd h3 {
text-align: center;
color: #333;
font-weight: 400;
height: 40px;
font-size: 18px;
}
.service-bd p {
color: #666;
font-size: 14px;
width:238px;
line-height: 26px;
margin: 0 auto;
}
.service-bd a {
width: 148px;
height: 38px;
border: 1px solid #ff9421;
display: block;
text-align: center;
line-height: 38px;
font-size: 14px;
border-radius: 7px;
margin: 30px auto 0;
text-decoration: none;
color: #ff9421;
}
.service-bd a:hover {
background-color: #ff9421;
color: #fff;
}
.yingxiao {
margin: 0 45px;
}
---------------index2.css 常用网站css样式属性 使用汇总2-------------
/* 设置页面整体外边距，内边距为0 */
*{
margin: 0;
padding: 0;
}
/* 整体页面背景为白色 */
body{
background-color: #fafafa;
}
/* 顶部样式设置 */
.header{
width: 1200px;
height: 100px;
/* background-color: red; */
margin: 0 auto;
line-height: 100px;
}
.logon{
float: left;
height: 100px;
overflow: hidden;
}
.logon img{
height: 100px;
width: 300px;
}
.nav{
float: right;
}
ul li{
list-style: none;
}
.nav ul li{
float: left;
margin: 0 20px;
font-size: 18px;
font-weight: bold;
}
.nav li a{
color: #333;
text-decoration: none;
}
.nav li a:hover {
color: #e9900a;
}
/* banner 样式开始 */
.banner-img {
background: url("../images2/banner3.jpg") no-repeat;
height: 500px;
width: 1200px;
margin: 0 auto;
line-height: 500px; /* 行高会继承 */
}
.service {
width: 1000px;
height: 570px;
margin:70px auto 0;
text-align: center;
}
.service-text {
border-top: 1px solid #ccc;
}
.service-text h3 { # 将文本提到div 上边线上 覆盖
background-color: #fff;
width: 170px;
margin: -20px auto 0;
}
.service-hd{
border-top: 1px solid #ccc;
}
.service-hd h3{
margin-top: -20px;
}
.service-hd h4 {
color: #ccc;
}
.service-hd p {
margin: 20px 0;
line-height: 30px;
}
/* 服务内容样式 */
.service-bd {
margin-top: 10px;
}
.service-bd ul li{
float: left;
width: 240px;
border: 1px solid #ccc;
background-color: #fff;
padding: 40px 30px;
}
.service-bd li {
width: 330px;
background-color: #fff;
float: left;
border: 1px solid #ccc;
}
.service-bd li img {
height: 130px;
}
.service-bd li h3 {
font-weight: 700;
margin: 25px 0;
}
.service-bd li p {
color: #666;
line-height: 26px;
padding: 10px 40px;
}
.service-bd li a {
border: 1px solid #ff9421;
color: #ff9421;
border-radius: 7px;
text-decoration: none;
padding: 10px 25px;
display: block;
margin-top: 10px;
/* a 行级元素转快 设置宽，高 = padding: 10px 40 px */
/* display: block;
width: 160px;
height: 40px;
line-height: 40px; */
}
.service-bd li a:hover {
color: #fff;
background-color: #ff9421;
}
/* 给li添加左右外边距 */
.text-margin {
margin: 0 40px;
}
/* 我的产品 */
.products {
width: 1000px;
height: 530px;
margin:20px auto 0;
text-align: center;
}
/* 我的产品 2*/
.products2 {
width: 1000px;
height: 530px;
margin:50px auto 0;
text-align: center;
}
/* 底部样式 */
.bottom {
width: 1200px;
margin: 10px auto;
/* background: #333; */
/* background-color:#c9c2c2; */
background-color: #fff;
height: 150px;
color: black;
border-radius: 5px;
border: 1px solid #ccc;
}
.leftlink {
float: left;
padding-left: 10px;
width:750px;
}
.leftlink ul {
margin: 0 10px;
}
.leftlink li {
margin: 10px 40px;
float: left;
}
.leftlink h4 {
font-weight: 700;
margin: 15px auto;
}
.leftlink li a{
text-decoration: none;
color: #0a0a0a;
display: block;
padding: 1px 0px;
}
.leftlink li a:hover {
color: #e9900a;
}
.rightIcon {
float: left;
margin-left: 10px;
width: 370px;
}
.rightIcon ul {
border: 0px solid #ccc;
background-color: #fff;
padding: 20px auto;
}
.rightIcon li{
float: left;
padding: 20px 10px;
text-decoration: none;
}
.rightIcon li img{
width: 130px;
height: 85px;
margin-top: 10px;
}
.rightIcon h4 {
font-weight: 700;
padding-left: 12px;
}
标签：service,
color,
height,
width,
短板,
li,
margin,
补齐,
css
From： https://www.cnblogs.com/chenshaojun2008/p/18059140