-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
196 lines (184 loc) · 9.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宠物那点事儿</title>
<link rel="stylesheet" href="//cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="header">
<div class="top-r">
<ul>
<li><a href="#">帮助</a></li>
<li><a href="#">设为主页</a></li>
<li><a href="#">加入收藏</a></li>
<li><a href="#">English</a></li>
<li><a href="#" class="login">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
<!--header书写完毕-->
<div class="wrap">
<div class="logo">
<div class="logo-l">
<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490894618017&di=618a25ce0ea9dd3d9dbe34592588f0e0&imgtype=0&src=http%3A%2F%2Fimg01.taopic.com%2F160119%2F235070-160119150I693.jpg" width="200px" height="90px"></a>
</div>
<!--logo部分-->
<div class="logo-r">
<div class="tel">24小时热线：0571-1234567</div>
</div>
<!--电话号码部分-->
</div>
<!--logo部分完成-->
<div class="nav">
<div class="nav-all">
<ul>
<li><a href="http://www.jq-school.com/">首页</a></li>
<li><a href="#">关于宠物儿</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">专题</a></li>
<li><a href="#">窝窝主</a></li>
<li><a href="#">爱心</a></li>
<li><a href="#">脚印</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</div>
</div>
<!--导航结束-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490895287576&di=ac2eb6fb137a86dc1f841d8892498d16&imgtype=0&src=http%3A%2F%2Fa.36krcnd.com%2Fphoto%2F2014%2F20193c5b8742fec8fc560fa23523141e.jpg" width="1000px" height="300px"></div>
<div class="swiper-slide"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490895375430&di=4cc75163970d7b1a0fcc29fe4a9c0acb&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F468805.jpg" width="1000px" height="300px"></div>
<div class="swiper-slide"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490895463760&di=c043f5d8dee6ba27a8228091089f3e7b&imgtype=0&src=http%3A%2F%2Fwww.xiaoxue123.com%2Fzuowen%2Fdiary%2FUploadFiles_6907%2F200806%2F20080610212750724.jpg" width="1000px" height="300px"></div>
</div>
<!-- <div class="swiper-pagination"></div> -->
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<!-- 幻灯片后续用jq，这里先结束-->
<div class="main">
<!-- main分3部分：宠物资讯、宠物秀、精华导读-->
<div class="news">
<!-- 宠物资讯-->
<div class="news-title">
<h3 class="news-title-left">新闻中心</h3>
<span class="news-title-right"><a href="#">More>></a></span>
</div>
<!--标题结束-->
<div class="news-big">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490895577354&di=081e0c1e07eec5dd1e8a3ae63ec0ce89&imgtype=0&src=http%3A%2F%2Fwww.66868.com%2Fuploads%2F2016%2F1116%2F20161116102348811.jpg" width="120px" height="100px" class="news-big-img">
<h4><a href="#" class="news-big-head">握爪—开启萌宠全新体验</a></h4>
<p class="news-big-content">上线时间：2016年3月28日<br>
活动针对人群：爱宠者<br>
优惠力度：APP免费下载，充100送10，持续5天
<a href="#">点击更多</a>
</p>
</div>
<div class="news-list">
<ul>
<li><span>2016-01-06</span><a href="#">[快讯]2016年第三届亚洲宠物水族博览...</a></li>
<li><span>2016-01-06</span><a href="#">[养护]怎样给宠物接疫苗？</a></li>
<li><span>2016-01-06</span><a href="#">[焦点]伦敦地铁一小猫求被摸！</a></li>
<li><span>2016-01-06</span><a href="#">[专题]宠物的幸福生活^_^</a></li>
<li><span>2016-01-06</span><a href="#">[有奖]谁是最可爱的窝窝达人！</a></li>
</ul>
</div>
</div>
<!--资讯结束，宠物秀开始-->
<div class="show">
<!--宠物秀开始-->
<div class="show-title">
<h3 class="show-title-left">宠物秀</h3>
<span class="show-title-right"><a href="#">More>></a></span>
</div>
<div class="show-img">
<div class="imgimg">
<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490895686805&di=aac524607c0939e8cce2dfeee87cc43c&imgtype=0&src=http%3A%2F%2Fpic34.nipic.com%2F20131026%2F9422601_213613258000_2.jpg" width="80px" height="80px" class="img"></a>
<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490895801558&di=4c7f21311f328004a4117c2438faf23c&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F17%2F95%2F48%2F158PICK58PICrNB_1024.jpg" width="80px" height="80px" class="img"></a>
<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490895863265&di=f56d382e516bb7583582313702764054&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F110423%2F8886-11042319364135.jpg" width="80px" height="80px" class="img"></a>
</div>
</div>
<!--宠物完毕-->
<!--开始账户咯-->
<div class="account">
<div class="account-all">
<ul>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>
<!--狗带-->
<div class="reader">
<div class="reader-title">
<h3 class="reader-title-left">精华导读</h3>
<span class="reader-title-right"><a href="#">More>></a></span>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-up">
<ul>
<li class="footer-up-one">关于
<ul>
<li>公司简介</li>
<li>爱宠故事</li>
<li>公司地址</li>
<li>宠物保护</li>
</ul>
</li>
<li class="footer-up-one">专题报告
<ul>
<li>专题日志</li>
<li>专题相册</li>
<li>专题视频</li>
<li>专题爱宠</li>
</ul>
</li>
<li class="footer-up-one">留言专栏
<ul>
<li>意见反馈</li>
<li>问题留言</li>
<li>媒体联络</li>
<li>在线客服</li>
</ul>
</li>
<li class="four">关注我们
<ul class="code">
<li><span>官方网站</span><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491531731&di=98bbc65c3f6d700d8b23fc5085bd4be7&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.ldpower.com.cn%2Ftemplate%2Fimages%2Fwx.jpg" width="50px" height="50px"></li>
<li><span>手机网站</span><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491531866&di=a1d7af509e0995ac48d4bfe8c16b583b&imgtype=jpg&er=1&src=http%3A%2F%2F863cn.com%2FImages%2FqrCode_863cncom.jpg" width="50px" height="50px"></li>
<li><span>APP下载</span><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491531978&di=45b91ee29f19db4580425895718589f3&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F12%2F25%2F02%2F53358PICxrd.jpg" width="50px" height="50px"></li>
</ul>
</li>
</ul>
</div>
<div class="foot-down">
<div class="foot-down-down">
<div class="btn">
<a href="#">关于我们</a>-<a href="#">广告合作</a>-<a href="#"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=286893302,2793357700&fm=23&gp=0.jpg" width="15px" height="15px">联系我们</a>-<a href="#">小黑屋</a>-<a href="#">版权说明</a>-<a href="#">广告合作</a>-<a href="#">友情链接</a>-<a href="#">群众调查</a>-<a href="#">投诉转移</a>
</div>
<div class="copyright">
copyright@2012-2020 commpany INC. GMT+8, 2016-1-6 14:22 , Processed in 0.073486 second(s).
</div>
</div>
</div>
</div>
<script src="//cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
<!-- <script src="swiper-3.4.2.jquery.min.js"></script> -->
<script>
var mySwiper=new Swiper('.swiper-container',{
direction: 'horizontal',
loop: true,
autoplay: 2000,
speed: 2000,
effect: 'cobe',
});
</script>
</body>
</html>