clearfix + 原始标签（*，a, i，ol, ul，ul li ）样式修改

* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
margin: 0 auto;
}

a,
i {
font-style: normal;
text-decoration: none;
}

ol,
ul {
list-style: none;
}

ul li {
display: inline-block;
}

.clearfix::before,
.clearfix::after {
content: '';
display: table;
}

.clearfix::after {
clear: both;
}

.top {
width: 1423px;
height: 40px;
background: black;
}

.top_left {
margin-left: 97px;
float: left;
}

/*总体的行级块级标签*/

ul li {
display: inline-block;
}

.top_left ul li a {
display: block;
font-size: 12px;
color: #D8D8D8;
text-align: center;
line-height: 40px;
}

.top_left ul li a:hover {
color: white;
}

/*------------------购物车的样式------------*/

.buy_car {
float: right;
display: inline-block;
width: 70px;
height: 40px;
color: #D8D8D8;
font-size: 12px;
text-align: center;
line-height: 40px;
}

.buy_car:hover {
background: white;
color: orange;
}

/*--------------------------------------------*/

.top_right {
margin-right: 107px;
}

.top_right ul li {
margin-left: 15px;
float: right;
}

.top_right ul li a {
display: inline-block;
/* width: 51px;*/
font-size: 12px;
color: #D8D8D8;
text-align: center;
line-height: 40px;
}

.top_right ul li a:hover {
color: white;
}

/*头部的文件-------------------*/

.header {
width: 1226px;
margin: 0 auto;
}

.header_top {
width: 1226px;
margin: 0 auto;
height: 100px;
}

/*------------------------------*/

/*a:link:表示为超链接设置未访问的样式*/

.header_top img {
padding: 22.5px 0 22.5px 0;
float: left;
line-height: 100px;
text-align: center;
}

/*设置盒子的宽度*/

.h-tleft {
padding-left: 240px;
}

.header_top ul li {
padding-left: 15px;
float: left;
list-style-type: none;
}

.header_top ul li a {
/*width:85px; */
display: inline-block;
font-size: 14px/1.5;
text-align: center;
line-height: 100px;
color: black;
}

.header_top ul li a:hover {
color: orange;
}

/*商品搜索框*/

.search {
margin-left: 20px;
float: right;
line-height: 100px;
text-align: center;
}

.search1 {
width: 220px;
height: 54.5px;
}

.search2 {
width: 55px;
height: 55px;
border: 1px gray;
cursor: pointer;
}

.search2:hover {
color: white;
}

/*头部文件的轮播图*/

.header-zong {
width: 1226px;
}

.header-image {
width: 1226px;
height: 460px;
position: relative;
margin: 0 auto;
}

/*--下面的为导航条--*/

.a1 {
display: block;
width: 1226px;
height: 460px;
float: left;
}

.header-nav {
padding-top: 20px;
position: absolute;
width: 234px;
height: 440px;
background: #1A191E;
z-index: 999;
float: left;
}

.nav-style1 {
display: block;
padding-left: 30px;
height: 42px;
line-height: 42px;
}

.nav-style1 a {
color: white;
font-size: 14px;
}

.nav-style1:hover {
background: orange;
}

/*这里写单独的产品块*/

.header-body {
margin: 15px 0 auto;
height: 170px;
}

.hf-left {
height: 170px;
width: 234px;
float: left;
}

.hf-right {
margin-left: 14px;
height: 170px;
width: 978px;
float: left;
}

.hf-right img {
height: 170px;
width: 316px;
}

.hf-style1 {
height: 170px;
width: 316px;
float: left;
}

.hf-style2 {
height: 170px;
width: 316px;
margin-left: 15px;
float: left;
}

.hf-style3 {
margin-left: 15px;
float: left;
}

/*明星产品----------------------*/

.header-footer {
margin: 25px 0 auto;
}

.superstar {
height: 58px;
line-height: 58px;
font-family: '华文新魏';
}

/*明星产品的样式布局==========*/

.stargoods {
height: 340px;
}

.stargoods ul {
width: 1240px;
}

.stargoods ul li {
float: left;
width: 234px;
margin-right: 14px;
}

.goods {
padding-top: 39px;
border-top-width: 1px;
border-top-style: solid;
background: #fafafa;
height: 300px;
width: 234px;
}

.goods a {
display: block;
width: 160px;
height: 160px;
margin: 0 auto;
}

.goods img {
width: 160px;
height: 160px;
}

/*============产品名称，描述，价格==================*/

.goodsname a {
padding-top: 25px;
font-size: 14px;
color: black;
display: block;
width: 100px;
height: 16px;
text-align: center;
}

.goodsdec p {
padding-top: 10px;
font-size: 12px;
margin: 0 20px 12px;
overflow: hidden;
width: 194px;
height: 18px;
color: gray;
text-align: center;
}

.goodprice p {
color: orange;
font-size: 14px;
width: 234px;
height: 21px;
text-align: center;
}

/*------下面为产品展示的部分-----*/

.main {
margin-top: 40px;
background: #f5f5f5;
/*height: 4164px;*/
width: 100%;
}

/*-------------智能配件------------*/

.main-top {
margin-top: 60px;
}

.main-nav1 {
width: 1226px;
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
margin: 0 auto;
}

/*===========================================*/

.main-product,
.mh-product {
width: 1226px;
margin: 0 auto;
}

/*=====第一个商品列表======*/

.mp-left,
.mhp-left {
height: 614px;
width: 234px;
float: left;
}

/*=====第一个商品列表======*/

.mhp-left img {
height: 300px;
width: 234px;
}

.distance1 {
margin-bottom: 10px;
}

/*==================================*/

/*产品的编辑*/

.mp-right,
.mhp-right {
float: left;
}

.mp-right ul,
.mhp-right ul {
width: 992px;
}

.mp-right ul li,
.mhp-right ul li {
float: left;
text-align: center;
}

.mp-goods {
background: white;
padding: 20px 0;
width: 234px;
height: 260px;
margin-left: 14px;
margin-bottom: 14px;
}

.mp-goods img {
width: 160px;
height: 160px;
}

.mp-title {
font-size: 14px;
font-weight: 400;
width: 214px;
height: 21px;
line-height: 21px;
margin: 10px 10px 2px;
text-align: center;
}

.mp-title a {
color: black;
}

.mp-desc {
margin: 0 10px 10px;
height: 18px;
font-size: 12px;
text-align: center;
color: gray;
}

.mp-price {
margin: 0 10px 14px;
text-align: center;
color: orange;
}

/*===================配件=======================*/

.main-header {
margin-top: 10px;
}

.main-tn {
margin: 0 auto;
}

.main-nav2 {
margin-top: 20px;
width: 1226px;
line-height: 58px;
font-size: 22px;
font-weight: 200;
color: #333;
margin: 0 auto;
}

.main-tnav1 {
float: right;
}

.main-tnav1 ul li a {
margin: 0 0 0 30px;
padding: 16px 0 0;
font-size: 16px;
color: black;
}

.main-tnav1 ul li a:hover {
color: #ff6700;
border-bottom: 2px solid #ff6700;
}

.main-tnav1 ul li .fixed1 {
color: #ff6700;
border-bottom: 2px solid #ff6700;
}

/*=======下面为盒子的浮动的效果的总体布局=======*/

.main-footer {
margin-top: 20px;
}

.main-footer p {
width: 1226px;
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
margin: 0 auto;
}

/*===========浮动的效果=========*/

.mf-p {
width: 1240px;
float: left;
/*用来设置总体盒子得高度*/
height: 475px;
}

.mf-p ul li {
float: left;
text-align: center;
}

.mf-goods {
background: white;
width: 296px;
height: 415px;
margin-right: 14px;
margin-bottom: 14px;
/*margin-top: 3px;*/
/*盒子浮动1*/
transition: box-shadow 1s;
float: left;
}

.mf-goods:hover {
/*margin-top: 0px;*/
/*盒子浮动2*/
box-shadow: 0px 0px 5px 0px #333;
}

.mf-p ul li {
text-align: center;
}

.mf-goods img {
width: 296px;
height: 220px;
}

.font-position {
padding: 15px 0 0 28px;
height: 72px;
width: 240px;
float: left;
}

.font-style {
text-align: left;
color: black;
display: block;
font-size: 14px;
line-height: 24px;
font-weight: 400;
}

.pj {
font-size: 12px;
color: gray;
margin: 0 28px 8px;
padding: 20px 10px 0 0;
height: 18px;
width: 240px;
text-align: left;
float: left;
}

.pj-title {
padding-top: 12px;
padding-left: 28px;
font-size: 14px;
color: gray;
text-align: left;
float: left;
}

.sep {
float: left;
padding-top: 12px;
padding-left: 8px;
font-size: 12px;
}

.pj-p {
float: left;
padding-top: 12px;
padding-left: 8px;
font-size: 15px;
color: orange;
}

/*==========下面的是底部的代码============*/

/*========总体盒子的大小==================*/

.footer {
width: 1423px;
}

.f-top {
height: 272px;
}

.footer-server {
width: 1226px;
height: 25px;
margin: 0 auto;
padding: 27px 0;
border-bottom: 1px solid #e0e0e0;
}

.footer-server span {
color: gray;
height: 26px;
}

.footer-server ul {
text-align: center;
}

.footer-server ul li {
padding-left: 60px;
}

.footer-server a {
color: #616161;
font-size: 16px;
line-height: 24px;
font-weight: 400;
}

.footer-server a:hover {
color: #ff6700;
}

/*=========一大串的服务信息========*/

.footer-links {
width: 1226px;
height: 112px;
margin: 0 auto;
padding: 40px 0;
}

.col-links {
width: 160px;
height: 112px;
float: left;
}

.col-links dt {
margin: -1px 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}

.col-links dd {
margin: 9px 0 0;
font-size: 12px;
width: 160px;
height: 18px;
line-height: 18px;
}

.col-links dd a {
color: gray;
}

.col-links dd a:hover {
color: orange;
}

.f-l-right {
float: right;
width: 251px;
height: 112px;
border-left: 1px solid #e0e0e0;
text-align: center;
color: #616161;
}

.phone {
margin: 0 0 5px;
font-size: 22px;
line-height: 1;
color: #ff6700;
}

.f-l-right span {
font-size: 12px;
text-align: center;
color: #616161;
margin: 0 0 16px;
}

.online {
margin: 10px 0 auto;
}

.f-l-right a {
border-color: #ff6700;
background: #fff;
color: #ff6700;
width: 118px;
height: 28px;
font-size: 12px;
line-height: 28px;
border: 1px solid #ff6700;
}

.f-l-right a:hover {
border: 1px solid #ff6700;
background: #ff6700;
color: white;
}

/*=====最后部分=======*/

.footer-last {
width: 1423px;
height: 106px;
padding: 30px 0;
font-size: 12px;
background: #fafafa;
}

.fl-bottom {
width: 1226px;
height: 106px;
margin: 0 auto;
}

.fl-left {
/*
width: 716px;*/
height: 106px;
margin-left: 57px;
float: left;
}

.fl-l-top ul {
width: 716px;
height: 18px;
float: left;
}

.fl-l-top a {
line-height: 18px;
color: black;
font-size: 12px;
font-family: '楷体';
}

.sec1 {
width: 17px;
color: gray;
}

.fl-l-top a:hover {
color: orange;
}

.fl-l-bottom p {
color: gray;
font-size: 12px;
}

.fl-right {
float: left;
margin-left: 57px;
}

.fl-right img {
width: 83px;
height: 28px;
margin-left: 7px;
}

clearfix + 原始标签（*，a, i，ol, ul，ul li ）样式修改

猜你喜欢