head样式 
 1 body{
 2     margin: 0;
 3 }
 4 .head{
 5     background-color: #222;
 6 }
 7 .head ul{
 8     padding-left: 0;
 9 }
10 .head ul li{
11     display: inline-block;
12 }
13 .head a{
14     text-decoration: none;
15     color: white;
16     /* 将a标签改成块标签 */
17     display: block;
18 }
19 .head .line1{
20     background-color: #111;
21     display: flex;
22     justify-content: space-between;
23     /* 垂直居中 */
24     align-items: center;
25 }
26 .head .line1 .logo{
27     margin-left: 100px;
28 }
29 
30 .head .line1 ul{
31     margin-right: 140px;
32 }
33 .head .line1 li{
34     width: 100px;
35     border-right: 1px solid #999999;
36     text-align: center;
37 }
38 .head .line1 li a{
39     color: #CCCCCC;
40 }
41 .head .line1 li:last-child{
42     border: none;
43 }
44 .head .line2{
45     width: 1000px;
46     margin: 0 auto;
47     display: flex;
48     justify-content: space-between;
49     align-items: center;
50 }
51 .head .line2 div{
52     position: relative;
53 }
54 .head .line2 .search{
55     display: inline-block;
56     /* background-color: #CCCCCC; */
57     width: 434px;
58     height: 40px;
59     border: none;
60     background: url(../img/icon/search_icon.png);
61     background-position: 0 -43px;
62     /* text-align: right; */
63     outline: none;
64     color: #FFFFFF;
65     font-size: 16px;
66     padding-left: 16px;
67     
68 }
69 .head .line2 .btn{
70     display: inline-block;
71     width: 32px;
72     height: 40px;
73     background-color: #FFFFFF;
74     position: absolute;
75     background: url(../img/icon/search_icon.png);
76     background-position: -454px 0px;
77     right: 10px;
78 }

 

posted on 2021-10-28 19:35  于凡芮  阅读(40)  评论(0)    收藏  举报