第一阶段项目（2）
style里面属性
*{
margin: 0px;
padding: 0px;
}
.H1{
width: 100%;
}
.top-nav{
width: 1200px;
height: 65px;
/*background-color: #87CEFA;*/
margin: 0px auto;
}
.tn1{
width: 100px;
height: 62px;
/*background-color: black;*/
margin-left: 100px;
float: left;
}
.ykbz{
width: 80px;
height: 62px;
line-height: 62px;
text-align: center;
margin: 0px 0px 0px 650px;
float: left;
font-size: 14px;
color: black;
}
.ykbz:hover{
color: yellow;
}
.tn3{
width: 80px;
height: 62px;
line-height: 62px;
text-align: center;
margin: 0px 100px 0px 0px;
float: left;
font-size: 14px;
color: black;
}
.a1{
width: 1349px;
height: 40px;
line-height: 40px;
background-color: forestgreen;
}
/*ul {
list-style: none;
margin-left: 45px;
}*/
.A1{
width: 792px;
height: 40px;
margin: 0px 0px 0px 80px;
/*border: 1px solid black;*/
float: left;
}
.a11 {
/*display: inline-block;*/
float: left;
font-size: 16px;
color: white;
transition: all 0.3s linear 0s;
width: 88px;
text-align: center;
}
.a11:hover{
background-color: chocolate;
}
a{
text-decoration: none;
}
.a2{
width: 1200px;
height: 50px;
/*background-color: yellow;*/
margin: 0px auto;
}
.a2-1{
width: 75px;
height: 50px;
line-height: 50px;
font-size: 12px;
}
.a2-1a{
color: darkgrey;
font-size: 12px;
}
sub{
width: 12px;
height: 50px;
line-height: 50px;
color: #A9A9A9;
font-size: 15px;
}
span{
font-size: 12px;
}
.a3{
width: 1200px;
height: 135px;
/*background-color: rosybrown;*/
margin: 0px auto;
}
.a3-1{
width: 201px;
height: 45px;
/*background-color: #4169E1;*/
}
.a3-1a{
width: 120px;
height: 40px;
color: black;
font-size: 30px;
float: left;
}
.a3-1b{
width: 80px;
height: 40px;
color: #A9A9A9;
font-size: 20px;
float: left;
line-height: 40px;
text-align: center;
}
.a3-2{
width: 1200px;
height: 27px;
}
.a3-2a{
width: 130px;
height: 27px;
/*background-color: #CCCCCC;*/
color: #4169E1;
float: left;
}
.a3-2b{
width: 760px;
height: 27px;
/*background-color: aqua;*/
float: left;
}
.a3-2b-1{
font-family: "microsoft yahei";
font-size: 13px;
height: 27px;
line-height: 27px;
color: #CCCCCC;
}
.a3-3{
width: 1200px;
height: 43px;
/*background-color: #FF0000;*/
margin-top: 20px;
}
.a3-3a{
width: 130px;
height: 42px;
border: 0.5px solid #CCCCCC;
float: left;
text-align: center;
line-height: 43px;
color: #CCCCCC;
font-size: 18px;
}
.a3-3a:hover{
color: #228B22;
}
.a3-3a1{
width: 142px;
height: 42px;
border: 0.5px solid #CCCCCC;
float: left;
text-align: center;
line-height: 43px;
color: #CCCCCC;
font-size: 18px;
}
.a3-3a1:hover{
color: #228B22;
}
.fn-clear{
width: 1200px;
height: 2221px;
/*background-color: #A52A2A;*/
margin: 0px auto;
}
.fn-clear1{
width: 930px;
height: 2150px;
/*background-color: aqua;*/
/*position: absolute;*/
float: left;
}
.fn-clear1-a{
width: 890px;
height: 60px;
/*border: 1px solid #CCCCCC;*/
margin: 30px 10px 0px 0px;
}
.fn-clear1-a1{
width: 375px;
height: 40px;
/*border: 1px solid black;*/
/*line-height: 40px;*/
/*margin-bottom: 10px;*/
margin: 0px auto;
}
.shuzi{
width: 40px;
height: 40px;
line-height: 40px;
/*background-color: #A9A9A9;*/
float: left;
margin-left: 2px;
text-align: center;
border: 1px solid #CCCCCC;
font-size: 15px;
color: black;
font-family: "宋体";
}
.dian{
width: 15px;
height: 40px;
margin: 10px;
line-height: 40px;
float: left;
}
.shuzi:hover{
background-color: #228B22;
}
.next{
width: 72px;
height: 40px;
line-height: 40px;
font-family: "宋体";
color: black;
font-size: 15px;
text-align: center;
float: left;
border: 1px solid #CCCCCC;
}
.next:hover{
background-color: #228B22;
/*opacity: 0.3;*/
color: #000000;
}
.fn-clear2{
width: 268px;
height: 2221px;
float: left;
border: 1px solid #CCCCCC;
/*background-color: cadetblue;*/
}
.fn-clear2-1{
width: 270px;
height: 42.5px;
background-color: #A9A9A9;
margin-top: 20px;
}
.fn-clear2-2{
width: 270px;
height: 42.5px;
background-color: #A9A9A9;
margin-top: 20px;
}
strong{
left: 42.5px;
line-height: 42.5px;
font-family: "新宋体";
font-size: 14px;
margin-left: 8px;
}
.more{
font-size: 13px;
font-family: "宋体";
}
.more:hover{
color: darkorange;
}
.three{
width: 220px;
height: 81.5px;
border: 1px solid darkgrey;
text-align: center;
margin:0px auto;
}
.for{
width: 220px;
height: 45px;
border: 1px solid #CCCCCC;
/*text-align: center;*/
margin:0px auto;
font-size: 15px;
color: black;
line-height: 45px;
font-family: "宋体";
}
.for:hover{
color: chocolate;
}
.three1{
/*position: relative;*/
width: 80px;
height: 60px;
/*background-color: #DEB887;*/
/*margin-left: 10px;*/
margin: 10px 10px 0px 0px ;
line-height: 60px;
/*text-align: left;*/
}
.three2{
width: 130px;
height: 60px;
/*background-color: #A52A2A;*/
float: right;
/*line-height: 60.5px;*/
margin: -60px 0px 0px 0px;
border: 1px solid antiquewhite;
}
.p1{
font-size: 12px;
}
.p1:hover{
color: chocolate;
cursor: pointer;
}
.fn-clear-1{
width: 910px;
height: 51px;
/*float: left;*/
margin: 20px 0px 20px 0px;
/*background-color: burlywood;*/
/*border: 1px solid black;*/
position: relative;
/*float: right;*/
}
.fc1{
width: 85px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 15px;
font-family:/* "microsoft yahei",*/arial;
float: left;
margin-top: 10px;
color: black;
margin-left: 5px;
}
.fc2{
width: 44px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 12px;
font-family: "microsoft yahei",arial;
float: left;
background-color: #228B22;
margin-top: 10px;
margin-left: 5px;
}
.fc3{
width: 72px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 12px;
font-family: "microsoft yahei",arial;
float: left;
margin-top: 10px;
color: darkslategrey;
margin-left: 5px;
}
.fc3:hover{
color: #FF8C00;
}
.fist{
width: 890px;
height: 190px;
/*background-color: #4169E1;*/
border: 1px solid #CCCCCC;
/*position:absolute;*/
margin-top: 8px;
margin-left: 20px;
}
.first-1{
float: right;
width: 584px;
height: 92px;
/*background-color: yellow;*/
font-size: 13px;
font-family: "新宋体";
color: #A9A9A9;
}
.first-2{
float: right;
width: 310px;
height: 78px;
/*background-color: red;*/
/*position: relative;*/
}
.first-2-1{
float: right;
width: 86px;
height: 78px;
/*border: 1px solid black;*/
margin: 15px 0px 0px 0px;
}
b{
font-size: 17px;
color: red;
/*margin-right: 10px;*/
}
.btn{
width: 80px;
height: 34px;
background-color: #D2691E;
/*color: white;*/
font-size: 14px;
margin: 10px 10px 0px 0px ;
/*margin: 0px 5px 0px 0px ;*/
line-height: 34px;
/*border: 1px solid yellow;*/
text-align: center;
}
.btn2{
color: red;
font-size: 13px;
width: 20px;
height: 20px;
/*text-align: center;*/
background-color: white;
margin: 0px auto;
}
a{
color: white;
}
.btn:hover{
background-color: #D2691E;
color: white;
/*transition: 1.5s;*/
}
.price{
font-size: 12px;
color: #A9A9A9;
/*margin: 0px 0px 0px 0px;*/
/*margin-right: 10px;*/
/*border: 1px solid black;*/
}
.first-3{
float: right;
width: 270px;
height: 78px;
/*background-color: #A52A2A;*/
/*float: right;*/
/*border: 1px solid black;*/
position: relative;
}
.type{
width;268px
height: 78px;
/*border: 1px solid black;*/
margin-top: 10px;
}
dt{
float: left;
font-size: 12px;
font-weight: bold;
margin: 5px 0px 0px 0px;
}
dd{
float: left;
font-size: 12px;
color: #A9A9A9;
margin: 5px 0px 0px 0px;
}
.two{
width: 900px;
height: 1950px;
border: 1px solid #CCCCCC;
margin: 20px 0px 0px 20px;
}
.two-1{
width: 287px;
height: 300px;
float: left;
margin: 15px 0px 0px 6px;
}
.two2{
width: 287px;
height: 290px;
border: 1px solid #CCCCCC;
float: left;
margin: 15px 0px 0px 4px;
}
.two2:hover{
/*opacity: 0.8;*/
margin-top: 5px;
transition: 0.8s;
/*margin-bottom: 11px;*/
}
.two2-1{
width: 287px;
height: 95px;
/*background-color: #228B22;*/
font-size: 12px;
font-family: "新宋体";
color: black;
}
.num{
width: 265px;
height: 29.5px;
/*border: 1px solid #CCCCCC;*/
margin: 15px 0px 0px 8px;
}
.btn1{
width: 68px;
height: 26px;
background-color: #D2691E;
font-size: 14px;
margin: 2px 5px 0px 0px ;
line-height: 26px;
text-align: center;
float: right;
font-family: "新宋体";
}
.btn1:hover{
background-color: #FF8C00;
}
.aaa{
color: #00008B;
}
这边做了个指向图片跳动的小特效，明白了要在外面做个大div，这样不能对其他div有影响
