html：
1<!DOCTYPEhtml>
2<htmllang="zh-CN">
3
4<head>
5<metacharset="utf-8">
6<metahttp-equiv="X-UA-Compatible"content="IE=edge">
7<metaname="viewport"content="width=device-width,initial-scale=1">
8<title>TYNAM-个人门户网站</title>
9<!--Bootstrap-->
10<linkhref="lib/bootstrap-3.3.7/css/bootstrap.css"rel="stylesheet">
11<linkrel="stylesheet"href="css/index.css">
12<!--站点log-->
13<linkrel="shortcuticon"href="imgs/log.ico"type="image/x-icon">
14</head>
15
16<body>
17<!--header-->
18<headerid="ty-header">
19<!--上半部分-->
20<divclass="hidden-smhidden-xstop-bar">
21<divclass="containertext-centertext-muted">
22<divclass="row">
23<divclass="top-bar-1col-md-2">
24<ahref=""class="text-muted">
25<iclass="icon-phone"></i>
26<span>关注微信号</span>
27<spanclass="caret"></span>
28<imgsrc="imgs/ty-weixin.jpg"alt="Tynam"style="width:160px">
29</a>
30</div>
31<divclass="top-bar-2col-md-5">
32<iclass="icon-tel"></i>
33<span>124-567-890（服务时间8:00-20:00）</span>
34</div>
35<divclass="top-bar-3col-md-2">
36<ahref=""class="text-muted">合作单位</a>
37<ahref=""class="text-muted">赞助商</a>
38</div>
39<divclass="top-bar-4col-md-3">
40<aclass="btnbtn-defaultbtn-smbtn-register"href="#"role="button">免费注册</a>
41<aclass="text-mutedsign"href="#"role="button"data-toggle="modal"data-target="#ty-login">立即登录</a>
42</div>
43</div>
44</div>
45</div>
46<navclass="navbarnavbar-defaultnavbar-static-topty-navbar">
47<divclass="container">
48<!--Brandandtogglegetgroupedforbettermobiledisplay-->
49<divclass="navbar-header">
50<buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"
51data-target="#ty-navbar"aria-expanded="false">
52<spanclass="sr-only">Togglenavigation</span>
53<spanclass="icon-bar"></span>
54<spanclass="icon-bar"></span>
55<spanclass="icon-bar"></span>
56</button>
57<aclass="navbar-brand"href="#">
58<imgsrc="imgs/log.png"alt="TYNAM-个人门户网站"style="width:90px">
59</a>
60</div>
61
62<divclass="collapsenavbar-collapse"id="ty-navbar">
63<ulclass="navnavbar-nav">
64<liclass="active"><ahref="#">课程介绍</a></li>
65<li><ahref="#">热门课程</a></li>
66<li><ahref="#">名师授课</a></li>
67<li><ahref="#">课堂互动</a></li>
68<li><ahref="#">联系我们</a></li>
69</ul>
70
71<ulclass="navnavbar-navnavbar-righthidden-smhidden-xs">
72<li><ahref="#">个人中心</a></li>
73</ul>
74</div><!--/.navbar-collapse-->
75</div><!--/.container-fluid-->
76</nav>
77</header>
78<!--header-->
79
80<!--banner-->
81<sectionid="ty-banner"class="carouselslide"data-ride="carousel">
82<!--指示器-->
83<olclass="carousel-indicators">
84<lidata-target="#ty-banner"data-slide-to="0"class="active"></li>
85<lidata-target="#ty-banner"data-slide-to="1"></li>
86<lidata-target="#ty-banner"data-slide-to="2"></li>
87<lidata-target="#ty-banner"data-slide-to="3"></li>
88</ol>
89
90<!--内容-->
91<divclass="carousel-inner"role="listbox">
92<divclass="itemactive"data-sm-mg="imgs/banner1-400x250.jpg"data-lg-mg="imgs/banner1.jpg"></div>
93<divclass="item"data-sm-mg="imgs/banner2-400x250.jpg"data-lg-mg="imgs/banner2.jpg"></div>
94<divclass="item"data-sm-mg="imgs/banner3-400x250.jpg"data-lg-mg="imgs/banner3.jpg"></div>
95<divclass="item"data-sm-mg="imgs/banner4-400x250.jpg"data-lg-mg="imgs/banner4.jpg"></div>
96</div>
97
98<!--Controls-->
99<aclass="leftcarousel-control"href="#ty-banner"role="button"data-slide="prev">
100<spanclass="glyphiconglyphicon-chevron-left"aria-hidden="true"></span>
101</a>
102<aclass="rightcarousel-control"href="#ty-banner"role="button"data-slide="next">
103<spanclass="glyphiconglyphicon-chevron-right"aria-hidden="true"></span>
104</a>
105</section>
106<!--banner-->
107
108<!--aboutme-->
109<sectionid="ty-abuout">
110<divclass="titletext-center">
111<h1><strong>关于我们</strong></h1>
112<imgsrc="imgs/star.png"alt=""class="img-responsive">
113</div>
114<divclass="container">
115<divclass="row">
116<divclass="col-md-8text-muted">
117<p>与此同时，和讯凭借金融投资顾问、基金代销等牌照优势，着力为用户提供基金、证券、期货、保险、信托、银行、外汇、互金等多品类全覆盖的金融交易场景。打造个人投资者一站式投资理财服务闭环，不断提升用户体验。
118</p>
119<p>近年，和讯对接数十家金融机构和交易平台，初步实现大数据算法推送对用户和金融机构的两端对接，已成为国内最大的深度理财社区。期间，未发生一起违约和刚性兑付事件。和讯成为互联网财富管理标杆公司和资本关注的焦点，和讯公司自身资本化进程亦在快速推进当中。
120</p>
121<p>我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。和讯愿与各大金融机构和交易平台通力合作，努力实现个人投资者、金融机构以及实体企业的多方共赢发展。
122</p>
123</div>
124<divclass="col-md-4"class="img-roundedimg-responsive">
125<imgsrc="imgs/team.jpeg"alt="核心团队">
126</div>
127</div>
128</div>
129</section>
130<!--aboutme-->
131
132<!--产品-->
133<sectionid="ty-product">
134<divclass="container">
135<divclass="row">
136<!--Navtabs-->
137<ulclass="navnav-tabs"role="tablist">
138<lirole="presentation"class="active"><ahref="#product1"aria-controls="home"role="tab"
139data-toggle="tab">在线大学</a></li>
140<lirole="presentation"><ahref="#product2"aria-controls="profile"role="tab"
141data-toggle="tab">会员专享</a></li>
142<lirole="presentation"><ahref="#product3"aria-controls="messages"role="tab"
143data-toggle="tab">优质视频</a></li>
144<liclass="pull-righthidden-smhidden-xs"><ahref="#product4"aria-controls="settings"role="tab"
145data-toggle="tab">更多</a></li>
146</ul>
147
148<!--Tabpanes-->
149<divclass="tab-content">
150<divrole="tabpanel"class="tab-panefadeinactive"id="product1">
151<divclass="container">
152<divclass="row">
153<divclass="col-md-8">
154<!--第一部分-->
155<divid="pd_one_1"class="media">
156<divclass="media-leftpd-left">
157<ahref="#">
158<imgclass="media-object"src="imgs/ty-weixin.jpg"alt="..."
159width="150px">
160</a>
161</div>
162<divclass="media-bodytext-muted"
163style="padding-top:150px;padding-left:10px">
164<h5class="media-heading">更多资讯欢迎</h4>
165<h5class="media-heading">欢迎关注我们</h4>
166</div>
167</div>
168<!--第二部分-->
169<olclass="breadcrumblead"id="pd_one_2">
170<li><ahref="#">HTML5+全栈</a></li>
171<li><ahref="#">Python+人工智能</a></li>
172<li><ahref="#">JavaEE</a></li>
173<li><ahref="#">Go语言+区块链</a></li>
174</ol>
175<!--第三部分-->
176<h1id="pd_one_3">欢迎来到这里
177<strongclass="text-danger"style="padding-left:15px">TYNAM个人门户</strong>
178</h1>
179<!--第四部分-->
180<divid="pd_one_4">
181<buttonclass="btnbtn-defaultbtn-primary"type="submit">课程咨询</button>
182<buttonclass="btnbtn-default"type="submit"
183style="margin-left:20px">了解更多</button>
184</div>
185</div>
186<divclass="col-md-4hidden-sxhidden-xs">
187<imgsrc="imgs/phone.png"alt=""height="500px">
188</div>
189</div>
190</div>
191</div>
192<divrole="tabpanel"class="tab-panefade"id="product2">
193<divclass="container">
194<divclass="row">
195<divclass="col-md-4hidden-sxhidden-xs"id="pd_two_1">
196<imgsrc="imgs/phone.png"alt=""height="500px">
197</div>
198<divclass="col-md-8"id="pd_two_2">
199<h1class="text-warning">TYNAM-会员</h1>
200<pclass="leadtext-muted">
201近年，和讯对接数十家金融机构和交易平台，初步实现大数据算法推送对用户和金融机构的两端对接，已成为国内最大的深度理财社区。期间，未发生一起违约和刚性兑付事件。和讯成为互联网财富管理标杆公司和资本关注的焦点，和讯公司自身资本化进程亦在快速推进当中。
202</p>
203</div>
204</div>
205</div>
206</div>
207<divrole="tabpanel"class="tab-panefade"id="product3">
208<divclass="container">
209<divclass="row">
210<divclass="col-md-6"id="pd_three_1">
211<h1class="text-warning">
212<strong>案例驱动·体系贯穿·全面系统</strong>
213</h1>
214<h3>10-15分钟视频
215<spanclass="text-warning">知识点拆分讲解</span>
216</h3>
217<h4class="text-muted">初步实现大数据算法推送对用户和金融机构的两端对接</h4>
218<divclass="badge"style="padding:15px10px;cursor:pointer;">
219已更新4000+视频|10,0000+阅读
220</div>
221</div>
222<divclass="col-md-6hidden-smhidden-xspd-left"id="pd_tree_2">
223<imgclass="img-responsive"src="imgs/PC.jpeg"alt="">
224</div>
225</div>
226</div>
227</div>
228<divrole="tabpanel"class="tab-panefade"id="product14">...</div>
229</div>
230</div>
231</div>
232</section>
233<!--产品-->
234
235<!--热门课程-->
236<sectionid="ty-hot">
237<divclass="titletext-center">
238<h1><strong>热门课程</strong></h1>
239<imgsrc="imgs/star.png"alt=""class="img-responsive">
240</div>
241<divclass="container">
242<divclass="row">
243<divclass="col-md-6lesson">
244<divclass="media">
245<divclass="media-left">
246<imgsrc="imgs/photo.jpeg"class="media-objectimg-responsiveimg-circleimg-thumbnail"
247alt=""width="100px">
248</div>
249<divclass="media-body">
250<h4class="media-heading">
251<spanclass="text-danger">【热】</span>
252从零玩转HTML5+跨平台
253</h4>
254<pclass="text-muted"style="margin-top:10px">
255我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>
256</div>
257<divclass="media-righttext-danger">
258246节课
259</div>
260</div>
261</div>
262<divclass="col-md-6lesson">
263<divclass="media">
264<divclass="media-left">
265<imgsrc="imgs/photo.jpeg"class="media-objectimg-responsiveimg-circleimg-thumbnail"
266alt=""width="100px">
267</div>
268<divclass="media-body">
269<h4class="media-heading">
270<spanclass="text-danger">【热】</span>
271从零玩转HTML5+跨平台
272</h4>
273<pclass="text-muted"style="margin-top:10px">
274我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>
275</div>
276<divclass="media-righttext-danger">
277246节课
278</div>
279</div>
280</div>
281<divclass="col-md-6lesson">
282<divclass="media">
283<divclass="media-left">
284<imgsrc="imgs/photo.jpeg"class="media-objectimg-responsiveimg-circleimg-thumbnail"
285alt=""width="100px">
286</div>
287<divclass="media-body">
288<h4class="media-heading">
289<spanclass="text-danger">【热】</span>
290从零玩转HTML5+跨平台
291</h4>
292<pclass="text-muted"style="margin-top:10px">
293我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>
294</div>
295<divclass="media-righttext-danger">
296246节课
297</div>
298</div>
299</div>
300<divclass="col-md-6lesson">
301<divclass="media">
302<divclass="media-left">
303<imgsrc="imgs/photo.jpeg"class="media-objectimg-responsiveimg-circleimg-thumbnail"
304alt=""width="100px">
305</div>
306<divclass="media-body">
307<h4class="media-heading">
308<spanclass="text-danger">【热】</span>
309从零玩转HTML5+跨平台
310</h4>
311<pclass="text-muted"style="margin-top:10px">
312我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>
313</div>
314<divclass="media-righttext-danger">
315246节课
316</div>
317</div>
318</div>
319<divclass="col-md-6lesson">
320<divclass="media">
321<divclass="media-left">
322<imgsrc="imgs/photo.jpeg"class="media-objectimg-responsiveimg-circleimg-thumbnail"
323alt=""width="100px">
324</div>
325<divclass="media-body">
326<h4class="media-heading">
327<spanclass="text-danger">【热】</span>
328从零玩转HTML5+跨平台
329</h4>
330<pclass="text-muted"style="margin-top:10px">
331我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>
332</div>
333<divclass="media-righttext-danger">
334246节课
335</div>
336</div>
337</div>
338<divclass="col-md-6lesson">
339<divclass="media">
340<divclass="media-left">
341<imgsrc="imgs/photo.jpeg"class="media-objectimg-responsiveimg-circleimg-thumbnail"
342alt=""width="100px">
343</div>
344<divclass="media-body">
345<h4class="media-heading">
346<spanclass="text-danger">【热】</span>
347从零玩转HTML5+跨平台
348</h4>
349<pclass="text-muted"style="margin-top:10px">
350我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>
351</div>
352<divclass="media-righttext-danger">
353246节课
354</div>
355</div>
356</div>
357</div>
358</div>
359</section>
360<!--热门课程-->
361
362<!--友情链接-->
363<sectionid="ty-link">
364<divclass="titletext-center">
365<h1><strong>友情链接</strong></h1>
366<imgsrc="imgs/star.png"alt=""class="img-responsive">
367</div>
368<ulclass="logs">
369<li><ahref=""><imgsrc="imgs/log-24.svg"alt=""></a></li>
370<li><ahref=""><imgsrc="imgs/log-Yh.svg"alt=""></a></li>
371<li><ahref=""><imgsrc="imgs/log-jucai.svg"alt=""></a></li>
372<li><ahref=""><imgsrc="imgs/log-qile.svg"alt=""></a></li>
373<li><ahref=""><imgsrc="imgs/log-tuorui.svg"alt=""></a></li>
374<li><ahref=""><imgsrc="imgs/log-xingyue.svg"alt=""></a></li>
375<li><ahref=""><imgsrc="imgs/log-yuecheng.svg"alt=""></a></li>
376</ul>
377</section>
378<!--友情链接-->
379
380<!--footer-->
381<footerid="ty-footer">
382<divclass="container">
383<divclass="row"style="padding-top:10px">
384<divclass="col-md-3col-md-offset-1one">
385<divclass="row">
386<ulclass="col-md-6">
387<li><ahref="">关于我们</a></li>
388<li><ahref="">课程介绍</a></li>
389<li><ahref="">热门课程</a></li>
390</ul>
391<ulclass="col-md-6">
392<li><ahref="">名师授课</a></li>
393<li><ahref="">课堂互动</a></li>
394<li><ahref="">联系我们</a></li>
395</ul>
396</div>
397</div>
398<divclass="col-md-4two">
399<h5>公司地址：广州市花都区贵丽北街16号</h5>
400<h5>联系电话：888-8888-8888</h5>
401<h5>联系邮箱：Tynam.yang@gmail.com</h5>
402</div>
403<divclass="col-md-3threecol-md-offset-1">
404<h5>联系我们：</h5>
405<ahref=""><imgsrc="imgs/log-xinlang.png"alt=""data-toggle="tooltip"data-placement="top"
406title="欢迎关注微信公众号"></a>
407<ahref=""><imgsrc="imgs/log-wechat.png"alt=""data-toggle="tooltip"data-placement="top"
408title="欢迎关注微博"></a>
409</div>
410</div>
411</div>
412</footer>
413<!--footer-->
414<!--登陆-->
415<divclass="modalfade"id="ty-login"tabindex="-1"role="dialog"aria-labelledby="myModalLabel">
416<divclass="modal-dialog"role="document">
417<divclass="modal-content">
418<divclass="modal-header">
419<buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><span
420aria-hidden="true">×</span></button>
421<h4class="modal-title"id="myModalLabel">登录</h4>
422</div>
423<divclass="modal-body">
424<div>手机号<inputtype="text"placeholder="请输入手机号"></div>
425<div>密码<inputtype="password"placeholder="请输入密码"></div>
426</div>
427<divclass="modal-footer">
428<buttontype="button"class="btnbtn-default"data-dismiss="modal">取消</button>
429<buttontype="button"class="btnbtn-primary">登录</button>
430</div>
431</div>
432</div>
433</div>
434
435<scriptsrc="lib/jquery/jquery-3.4.1.js"></script>
436<scriptsrc="lib/bootstrap-3.3.7/js/bootstrap.js"></script>
437<scriptsrc="js/index.js"></script>
438</body>
439
440</html>
css:
1/************************通用设置开始************************/
2body{
3font-family:'FranklinGothicMedium','ArialNarrow',Arial,sans-serif;
4color:#000;
5font-size:14px;
6}
7
8/*注册btn*/
9.btn-register{
10color:#ffffff;
11background-color:#0AB4f7;
12border-color:#F4F7F7;
13}
14
15.btn-register:hover,
16.btn-register:focus,
17.btn-register:active,
18.btn-register.active,
19.open.dropdown-toggle.btn-register{
20color:#ffffff;
21background-color:#086DF2;
22border-color:#F4F7F7;
23}
24
25.btn-register:active,
26.btn-register.active,
27.open.dropdown-toggle.btn-register{
28background-image:none;
29}
30
31.btn-register.disabled,
32.btn-register[disabled],
33fieldset[disabled].btn-register,
34.btn-register.disabled:hover,
35.btn-register[disabled]:hover,
36fieldset[disabled].btn-register:hover,
37.btn-register.disabled:focus,
38.btn-register[disabled]:focus,
39fieldset[disabled].btn-register:focus,
40.btn-register.disabled:active,
41.btn-register[disabled]:active,
42fieldset[disabled].btn-register:active,
43.btn-register.disabled.active,
44.btn-register[disabled].active,
45fieldset[disabled].btn-register.active{
46background-color:#0AB4F7;
47border-color:#F4F7F7;
48}
49
50.btn-register.badge{
51color:#0AB4F7;
52background-color:#ffffff;
53}
54
55@font-face{
56font-family:ty;
57src:url('../fonts/fonts/icomoon.woff')format('woff'),
58url('../lib/fonts/fonts/icomoon.ttf')format('truetype'),
59url('../lib/fonts/fonts/icomoon.svg')format('svg'),
60url('../lib/fonts/fonts/icomoon.eot')format('embedded-opentype');/*IE9*/
61}
62
63[class^='icon-'],
64[class*='icon-']{
65font-family:ty;
66font-style:normal;
67}
68
69/************************通用设置结束************************/
70
71/************************header开始************************/
72#ty-header{
73margin:0auto;
74height:40px;
75line-height:39px;
76}
77
78#ty-header.top-bar{
79border-bottom:1pxsolid#eee;
80}
81
82.top-bar-1a{
83position:relative;
84}
85
86.top-bar-1aimg{
87display:none;
88position:absolute;
89left:50%;
90margin-left:-80px;
91margin-top:-10px;
92z-index:9999;
93}
94
95.top-bar-1a:hoverimg{
96display:block;
97}
98
99#ty-header.top-bar.container.row.top-bar-4.sign{
100margin-left:10px;
101}
102
103#ty-header.top-bar.container.row>div+div{
104border-left:1pxsolid#eee;
105}
106
107.icon-phone::before{
108content:'\e958';
109font-size:14px;
110}
111
112.icon-tel::before{
113content:'\e942';
114font-size:14px;
115}
116
117/*navbar开始*/
118#ty-header.ty-navbar{
119background:#fff;
120
121}
122
123#ty-header.navbar-brand{
124height:70px;
125padding:5px15px;
126}
127
128#ty-header#ty-navbar>ul>li>a{
129height:70px;
130line-height:40px;
131}
132
133#ty-header#ty-navbarulli.activea,
134#ty-header#ty-navbarullia:hover
135{
136background-color:transparent;
137border-bottom:2pxsolid#0AB4f7;
138}
139
140#ty-header.ty-navbar.navbar-toggle{
141margin-top:18px;
142}
143/*navbar结束*/
144/************************header结束************************/
145
146/************************banner开始************************/
147#ty-banner{
148margin-top:70px;
149}
150
151#ty-banner.item{
152background:no-repeatcentercenter;
153-webkit-background-size:cover!important;
154background-size:cover!important;
155}
156
157@mediascreenand(min-width:500px){
158#ty-banner.item{
159height:600px;
160}
161}
162/************************banner结束************************/
163
164/************************产品特色开始************************/
165
166#ty-product{
167background:#f0f0f0;
168padding:30px0;
169}
170
171#ty-product.nav{
172font-size:18px;
173}
174
175#ty-product.nava{
176font-size:18px;
177color:#999;
178}
179
180#ty-product.navli.activea{
181background:none;
182border:none;
183border-bottom:2pxsolid#0AB4f7;
184color:#000;
185}
186
187#ty-product.container{
188padding-top:20px;
189}
190
191#ty-product.pd-left{
192padding:40px0;
193}
194
195#pd_one_1{
196margin:10px0;
197}
198
199#pd_one_2{
200background-color:transparent;
201}
202
203#pd_two_2,#pd_three_1{
204padding-top:90px;
205}
206/************************产品特色结束************************/
207
208
209/************************关于我们开始************************/
210
211
212#ty-abuout.title,
213#ty-hot.title,
214#ty-link.title
215{
216display:flex;
217flex-direction:column;
218justify-content:center;
219align-items:center;
220padding-bottom:10px;
221}
222
223#ty-abuout.titleimg,
224#ty-hot.titleimg,
225#ty-link.titleimg
226{
227height:20px;
228}
229
230#ty-abuout.rowp{
231line-height:30px;
232font-size:15px;
233}
234
235#ty-abuout.rowimg{
236height:300px;
237}
238/************************关于我们结束************************/
239
240/************************热门课程开始************************/
241#ty-hot.lesson{
242padding:15px10px;
243}
244
245#ty-hot.lesson.media-left{
246width:20%;
247}
248
249#ty-hot.lesson.media-body{
250width:60%;
251vertical-align:center;
252}
253
254#ty-hot.lesson.media-right{
255width:20%;
256font-size:16px;
257vertical-align:middle;
258}
259
260/************************热门课程结束************************/
261/************************友情链接开始************************/
262#ty-link.logs{
263list-style:none;
264text-align:center;
265}
266
267#ty-link.logsli{
268display:inline-block;
269padding:10px10px;
270}
271
272#ty-link.logsliaimg{
273height:110px;
274}
275/************************友情链接结束************************/
276
277/************************footer开始************************/
278#ty-footer{
279width:100%;
280height:200px;
281background:rgb(44,38,38);
282color:rgb(183,185,183);
283list-style:none;
284font-size:16px;
285}
286
287#ty-footerul{
288list-style:none;
289}
290
291#ty-footer.one,#ty-footer.two{
292padding:10px;
293border-right:1pxsolid#666;
294height:180px;
295
296display:flex;
297flex-direction:column;
298justify-content:center;
299align-items:center;
300}
301
302#ty-footer.oneli{
303line-height:40px;
304color:rgb(183,185,183);
305}
306
307#ty-footer.onelia{
308color:rgb(183,185,183);
309}
310
311#ty-footer.three{
312padding:30px10px;
313height:180px;
314}
315
316#ty-footer.threea{
317display:inline-block;
318}
319
320#ty-footer.threeaimg{
321width:50px;
322}
323/************************footer结束************************/
324
325/************************登录开始************************/
326#ty-loginbutton,#ty-logininput{
327outline:none;
328}
329
330#ty-login.modal-body>div{
331margin:15px20px;
332}
333
334#ty-login.modal-body>div>input{
335margin-left:15px;
336width:200px;
337}
338/************************登录结束************************/
JS:
1//轮播图
2$(function(){
3
4
5$(window).on('resize',function(){
6letclickWidth=$(window).width();
7letisBigImg=clickWidth>=500;
8let$allItems=$("#ty-banner.item");
9
10$allItems.each(function(index,item){
11letsrc=isBigImg?$(item).data("lg-mg"):$(item).data("sm-mg");
12letimgUrl="url('"+src+"')";
13
14$(item).css({
15background:imgUrl
16});
17
18if(!isBigImg){
19let$img="<imgsrc='"+src+"'>";
20$(item).empty().append($img);
21}else{
22$(item).empty();
23}
24});
25});
26
27
28//导航处理
29let$alllis=$("#ty-navbarli")
30
31$($alllis[1]).on('click',function(){
32$('html,body').animate({scrollTop:$("#ty-hot").offset().top});
33});
34
35$(window).trigger("resize");
36
37
38//tooltip
39$(function(){
40$('[data-toggle="tooltip"]').tooltip()
41});
42});
效果图：
学习叶建华亲授-从零玩转响应式开发-bootstrap打通前端+移动端后所作。感谢老师的公开视频
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54927.shtml
