feat:首页的编写
Showing
4 changed files
with
135 additions
and
20 deletions
... | @@ -30,24 +30,56 @@ div.subject { | ... | @@ -30,24 +30,56 @@ div.subject { |
30 | /*新闻 */ | 30 | /*新闻 */ |
31 | div.top-logo { | 31 | div.top-logo { |
32 | width: 1200px; | 32 | width: 1200px; |
33 | height: 70px; | ||
34 | padding-top: 20px; | ||
35 | } | ||
36 | |||
37 | div.top-logo ::-webkit-input-placeholder { /* WebKit browsers */ | ||
38 | font-size: 13px; | ||
39 | } | ||
40 | |||
41 | div.top-logo ::-moz-placeholder { /* Mozilla Firefox 19+ */ | ||
42 | font-size: 13px; | ||
43 | } | ||
44 | |||
45 | div.top-logo :-ms-input-placeholder { /* Internet Explorer 10+ */ | ||
46 | font-size: 13px; | ||
47 | } | ||
48 | .top_logo_content { | ||
49 | height: 40px; | ||
50 | width: 100%; | ||
51 | margin: 0 auto; | ||
33 | } | 52 | } |
53 | div.top-logo .top_logo_search { | ||
54 | float: left; | ||
55 | width: 350px; | ||
56 | position: relative; | ||
57 | margin-left: 400px; | ||
58 | } | ||
59 | div.top-logo .top_logo_search input { | ||
60 | border-radius: 50px; | ||
61 | } | ||
62 | div.top-logo .login { | ||
63 | float: right; | ||
64 | margin-top: 8px; | ||
65 | } | ||
66 | div.top-logo .top_logo_search i { | ||
67 | position: absolute; | ||
68 | right: 10px; | ||
69 | top: 11px; | ||
70 | cursor: pointer; | ||
71 | } | ||
72 | |||
34 | /*end*/ | 73 | /*end*/ |
35 | 74 | ||
36 | .top-logo h1 { | 75 | .top-logo h1 { |
37 | display: inline-block; | 76 | display: inline-block; |
38 | padding: 21px 0; | 77 | float: left; |
39 | } | ||
40 | |||
41 | .top-logo ul { | ||
42 | list-style: none; | ||
43 | float: right; | ||
44 | clear: right; | ||
45 | margin-top: 33px; | ||
46 | } | 78 | } |
47 | /*------------------首页 end------------*/ | 79 | /*------------------首页 end------------*/ |
48 | 80 | ||
49 | .top-logo ul li { | 81 | .top-logo ul li { |
50 | float: left; | 82 | display: inline-block; |
51 | padding: 0 8px; | 83 | padding: 0 8px; |
52 | } | 84 | } |
53 | 85 | ||
... | @@ -55,16 +87,25 @@ div.top-logo { | ... | @@ -55,16 +87,25 @@ div.top-logo { |
55 | border-right: 1px solid grey; | 87 | border-right: 1px solid grey; |
56 | } | 88 | } |
57 | 89 | ||
58 | div.nav { | 90 | div.navigation { |
59 | width: 100%; | ||
60 | background: #006cff; | ||
61 | text-align: center; | 91 | text-align: center; |
62 | } | 92 | } |
93 | .navigation .layui-nav-item { | ||
94 | width: 100px; | ||
95 | position: relative; | ||
96 | margin: 0 22px; | ||
97 | } | ||
98 | .layui-bg-blue { | ||
99 | background-color: #006CFF!important; | ||
100 | } | ||
63 | 101 | ||
64 | div.nav ul { | 102 | .layui-nav-item:not(:first-child)::before { |
65 | list-style: none; | 103 | content: ''; |
66 | width: 1200px; | 104 | position: absolute; |
67 | display: inline-block; | 105 | height: 22px; |
106 | border-left: 1px solid #ccc; | ||
107 | top: 21px; | ||
108 | left: -20px; | ||
68 | } | 109 | } |
69 | 110 | ||
70 | div.nav ul li { | 111 | div.nav ul li { |
... | @@ -72,6 +113,7 @@ div.nav ul li { | ... | @@ -72,6 +113,7 @@ div.nav ul li { |
72 | margin: 21px auto; | 113 | margin: 21px auto; |
73 | width: 149px; | 114 | width: 149px; |
74 | border-left: 1px solid #3389ff; | 115 | border-left: 1px solid #3389ff; |
116 | cursor: pointer; | ||
75 | } | 117 | } |
76 | 118 | ||
77 | div.nav ul li:first-child { | 119 | div.nav ul li:first-child { |
... | @@ -93,18 +135,32 @@ div.banner, div.c_one, div.c_two, div.c_three, div.c_four, div.c_five, div.foote | ... | @@ -93,18 +135,32 @@ div.banner, div.c_one, div.c_two, div.c_three, div.c_four, div.c_five, div.foote |
93 | } | 135 | } |
94 | 136 | ||
95 | div.banner { | 137 | div.banner { |
96 | background: yellow; | ||
97 | height: 500px; | 138 | height: 500px; |
139 | background-color: #7ed74e; | ||
140 | position: relative; | ||
141 | } | ||
142 | |||
143 | .banner .swiper_img { | ||
144 | width: 100%; | ||
145 | height: 100%; | ||
146 | } | ||
147 | |||
148 | .banner .banner_title { | ||
149 | position: absolute; | ||
150 | left: 0; | ||
151 | right: 0; | ||
152 | bottom: 50px; | ||
153 | margin: auto; | ||
98 | } | 154 | } |
99 | 155 | ||
100 | div.banner ul { | 156 | div.banner .banner_title { |
101 | list-style: none; | 157 | list-style: none; |
102 | width: 1200px; | 158 | width: 1200px; |
103 | display: inline-block; | 159 | display: inline-block; |
104 | margin-top: 350px; | 160 | margin-top: 350px; |
105 | } | 161 | } |
106 | 162 | ||
107 | div.banner ul li { | 163 | div.banner .banner_title li { |
108 | width: 250px; | 164 | width: 250px; |
109 | height: 100px; | 165 | height: 100px; |
110 | background-color: #ffffff; | 166 | background-color: #ffffff; |
... | @@ -123,7 +179,47 @@ div.banner ul li a { | ... | @@ -123,7 +179,47 @@ div.banner ul li a { |
123 | cursor: pointer; | 179 | cursor: pointer; |
124 | } | 180 | } |
125 | 181 | ||
182 | /* ---------------法律法规 start----------------------- */ | ||
183 | .laws_regulations { | ||
184 | width: 1200px; | ||
185 | margin: 0 auto; | ||
186 | padding: 60px 0; | ||
187 | } | ||
188 | .laws_regulations .regulations, .policy { | ||
189 | border-radius: 2px; | ||
190 | width: 48%; | ||
191 | height: 370px; | ||
192 | border: 1px solid #DEDEDE; | ||
193 | } | ||
194 | .laws_regulations .policy{ | ||
195 | float: right; | ||
196 | padding-right: 5px; | ||
197 | } | ||
198 | |||
199 | .laws_regulations .regulations{ | ||
200 | float: left; | ||
201 | padding-left: 5px; | ||
202 | } | ||
203 | .laws_regulations .regulations h2 a{ | ||
204 | display: block; | ||
205 | padding: 20px; | ||
206 | box-sizing: border-box; | ||
207 | border-bottom: 1px solid #E6E6E6; | ||
208 | } | ||
209 | .laws_regulations .regulations h2 a p{ | ||
210 | font-weight: 600; | ||
211 | color: #4A4A4A; | ||
212 | line-height: 20px; | ||
213 | } | ||
214 | .laws_regulations .regulations h2 i{ | ||
215 | font-style: normal; | ||
216 | float: right; | ||
217 | font-size: 14px; | ||
218 | color: #9B9B9B; | ||
219 | line-height: 14px; | ||
220 | } | ||
126 | 221 | ||
222 | /* ---------------end----------------------- */ | ||
127 | div.c_one { | 223 | div.c_one { |
128 | } | 224 | } |
129 | 225 | ||
... | @@ -267,7 +363,7 @@ div.c_two ul li { | ... | @@ -267,7 +363,7 @@ div.c_two ul li { |
267 | overflow: hidden; | 363 | overflow: hidden; |
268 | margin-left: 2.88%; | 364 | margin-left: 2.88%; |
269 | padding: 40px 36px; | 365 | padding: 40px 36px; |
270 | border: 2px solid #e3e3e3; | 366 | border: 1px solid #E6E6E6; |
271 | } | 367 | } |
272 | 368 | ||
273 | div.c_two ul li:first-child { | 369 | div.c_two ul li:first-child { | ... | ... |
images/banner.jpg
0 → 100644

19.7 KB
This diff is collapsed.
Click to expand it.
... | @@ -28,6 +28,15 @@ | ... | @@ -28,6 +28,15 @@ |
28 | <div>条目5</div> | 28 | <div>条目5</div> |
29 | </div> | 29 | </div> |
30 | </div> | 30 | </div> |
31 | <div class="layui-carousel" id="test1"> | ||
32 | <div carousel-item> | ||
33 | <div>条目1</div> | ||
34 | <div>条目2</div> | ||
35 | <div>条目3</div> | ||
36 | <div>条目4</div> | ||
37 | <div>条目5</div> | ||
38 | </div> | ||
39 | </div> | ||
31 | <div id="test1"></div> | 40 | <div id="test1"></div> |
32 | <button type="button" class="layui-btn">一个标准的按钮</button> | 41 | <button type="button" class="layui-btn">一个标准的按钮</button> |
33 | </div> | 42 | </div> |
... | @@ -63,4 +72,14 @@ | ... | @@ -63,4 +72,14 @@ |
63 | , count: 50 //数据总数,从服务端得到 | 72 | , count: 50 //数据总数,从服务端得到 |
64 | }); | 73 | }); |
65 | }); | 74 | }); |
75 | layui.use('carousel', function () { | ||
76 | var carousel = layui.carousel; | ||
77 | //建造实例 | ||
78 | carousel.render({ | ||
79 | elem: '#test1' | ||
80 | , width: '100%' //设置容器宽度 | ||
81 | , arrow: 'always' //始终显示箭头 | ||
82 | //,anim: 'updown' //切换动画方式 | ||
83 | }); | ||
84 | }); | ||
66 | </script> | 85 | </script> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment