-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (193 loc) · 12.1 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
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bass.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/changebutton.js"></script>
<title>X乎,与世界分享你刚编的故事</title>
</head>
<body>
<!-- 头部导航栏 -->
<header class="table-bordered" style=" background-color: #d6e2de;">
<div class="h container row ">
<a href="./index.html"><img src="./images/logo.png" alt="" width="80px" height="40px" class="col-sm-1 "></a>
<div class="container col-sm-9 ">
<ul class="headlist col-sm-4 row-no-gutters">
<li class="col-sm-3"><a href="./index.html" style="font-weight: 700;">首页</a></li>
<li class="col-sm-3"><a href="#">会员</a></li>
<li class="col-sm-3"><a href="#">发现</a></li>
<li class="col-sm-3"><a href="./create.html">等你来编</a></li>
</ul>
<div class="col-sm-7 col-sm-offset-1 row-no-gutters">
<input type="search" placeholder="想看谁吹牛逼呢?" class="col-sm-8" style="padding-left: 10px;">
<button type="button" class="btn btn-success col-sm-1"><i></i></button>
<button type="button" class="btn btn-success col-sm-2 col-sm-offset-1">提问</button>
</div>
</div>
<div class=" col-sm-2 login">
<a href="#" class="col-sm-3" title="信息"><i></i></a>
<a href="./login.html" class="col-sm-6"><img src="./images/admin.png" alt="登入" title="登入"
height="40px"></a>
</div>
</div>
</header>
<!-- 主体部分 -->
<div class="index">
<div class="container setable">
<div class="main-table col-sm-8 container">
<ul class="nav table-bordered">
<li><a href="#">关注</a></li>
<li><a href="#">推荐</a></li>
<li><a href="#">热榜</a></li>
<li><a href="#">视频</a></li>
</ul>
<div class="articles">
<h4><a href="#">你见过最好看的风景是什么?</a></h4>
<video controls width="740px" autoplay>
<source src="https://vod-progressive.akamaized.net/exp=1632045469~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F4699%2F22%2F573496156%2F2709808401.mp4~hmac=b8f80031e76f5e2e9e4343ecc0b3fd684abb4905263d7cb2da8d2e101e43ea99/vimeo-prod-skyfire-std-us/01/4699/22/573496156/2709808401.mp4?filename=Skyscrapers+-+80724.mp4" type="video/mp4">
视频跑掉了呢
</video>
<div class="jj mess">
<a href="#">
<img src="./images/admin1.jpg" width="30px" height="30px"> 精神小伙
</a>,青龙山在逃,摄影只是爱好
<div class="personal-information">
<div class="pitop">
<img src="./images/admin1.jpg" alt="">
<div>精神小伙</div>
<div class="cnmd">青龙山在逃,摄影只是爱好.</div>
</div>
<div class="pibottom">
<ul>
<li>回答</li>
<li style="left:50%">文章</li>
<li style="left: 90%;"> 关注者</li>
</ul>
<ul class="shuju">
<li>1234</li>
<li style="left: 99px;"> 22 </li>
<li style="left:183px;">13,001</li>
</ul>
<ul>
<button
style="top: 155px; left: 30px; background-color: #82c782; color: rgb(255, 255, 255);"><i>
</i> 关注他</button>
<button style="top: 155px; left: 250px;"><i></i> 发私信</button>
</ul>
</div>
</div>
</div>
<div class="function-as">
<ul>
<li><a href="#"><i> 56条评论</i></a></li>
<li><a href="#"><i> 分享</i></a></li>
<li><a href="#"><i> 收藏</i></a></li>
<li><a href="#"><i> 喜欢</i></a></li>
<li><a href="#"><i>...</i></a></li>
</ul>
<button type="button" onclick="touchdown(6)" id="6"><i></i></button>
<button type="button" onclick="touchup(1)" id="1"><i> 赞同 233</i></button>
</div>
</div>
<div class="articles" style="height:154px;">
<h4 style="float: left;"><a href="./article.html">如何评价百度贴吧将“傻逼”一词自动替换为图片?</a></h4>
<p>匿名用户:
更新出这个傻宝功能的14号晚间到15号，贴吧广告哥数量锐减。
一众广告发帖工具阵亡。
因为百度的迷之设定，导致客户端涉及到“...<a href="./article.html">查看全部 <i></i></a></p>
<div class="function-as">
<ul>
<li><a href="#"><i> 46条评论</i></a></li>
<li><a href="#"><i> 分享</i></a></li>
<li><a href="#"><i> 收藏</i></a></li>
<li><a href="#"><i> 喜欢</i></a></li>
<li><a href="#"><i>...</i></a></li>
</ul>
<button type="button" onclick="touchdown(7)" id="7"><i></i></button>
<button type="button" onclick="touchup(2)" id="2"><i> 赞同 233</i></button>
</div>
</div>
<div class="articles" style="height:287px;">
<h4 style="float: left;overflow: hidden;"><a href="#">社交网络事业群（SNG）在腾讯内部是一个什么样的角色定位?</a></h4>
<p>匿名用户:
各个BG眼中的彼此，出处见右下角水印。 名词解释： MIG 移动互联网事业群 SNG 社交网络事业群 WXG 微信事业群 IEG 互动娱乐事业群（游戏） OMG 网络媒体事业群 TEG
技术工程事业群 CDG 企业发展事业群 S线
职能系统...<a href="#">查看全部 <i></i></a></p>
<img src="./images/a1.jpg" alt="" style="transform: translateX(133%)">
<div class="function-as">
<ul>
<li><a href="#"><i> 96条评论</i></a></li>
<li><a href="#"><i> 分享</i></a></li>
<li><a href="#"><i> 收藏</i></a></li>
<li><a href="#"><i> 喜欢</i></a></li>
<li><a href="#"><i>...</i></a></li>
</ul>
<button type="button" onclick="touchdown(8)" id="8"><i></i></button>
<button type="button" onclick="touchup(3)" id="3"><i> 赞同 233</i></button>
</div>
</div>
<div class="articles" style="height:287px;">
<h4 style="float: left;overflow: hidden;"><a href="#">如何评价电视剧《亮剑》？</a></h4>
<p>李云龙:
众所周知，我国的电视剧作品中，抗战剧总是会被扣上“神剧”之名等一系列帽子遭到批判，但凡事不能过于偏见，必须要用客观的眼睛来分析事物、国产抗战剧中不乏《亮剑》、《历史的天空》、《我的团长我的团》等一系列佳作，今天就从《亮剑》说起，解读其独特的人物塑造手法...
<a href="#">查看全部 <i></i></a>
</p>
<img src="./images/a2.jpg" alt="" style="transform: translateX(133%)">
<div class="function-as">
<ul>
<li><a href="#"><i> 66条评论</i></a></li>
<li><a href="#"><i> 分享</i></a></li>
<li><a href="#"><i> 收藏</i></a></li>
<li><a href="#"><i> 喜欢</i></a></li>
<li><a href="#"><i>...</i></a></li>
</ul>
<button type="button" onclick="touchdown(9)" id="9"><i></i></button>
<button type="button" onclick="touchup(4)" id="4"><i> 赞同 233</i></button>
</div>
</div>
</div>
<!-- 扩展模块 -->
<div class="col-sm-3 expand ">
<div class="block-"><img src="./images/czzx.png" width="292px" alt="" usemap="#create">
<map id="create" name="create">
<area shape="rect" coords="0,0,120,50" title="创作中心" href="#">
<area shape="rect" coords="185,0,310,50" title="草稿箱" href="#">
<area shape="rect" coords="0,240,310,300" title="开始你的创作" href="./create.html">
<area shape="circle" coords="42.8,77.8,40" title="回答问题" href="#">
<area shape="circle" coords="115.8,77.8,40" title="发视频" href="#">
<area shape="circle" coords="188.8,77.8,40" title="写文章" href="#">
<area shape="circle" coords="261.8,77.8,40" title="写想法" href="#">
</map>
</div>
<div class="block-">
<img src="./images/ad.jpg" alt="" width="292px">
</div>
<div class="block-">
<ul>
<li><a href="#"><i> 我的收藏</i></a></li>
<li><a href="#"><i> 我的关注</i></a></li>
<li><a href="#"><i> 我的好友</i></a></li>
<li><a href="#"><i> 我的申请</i></a></li>
</ul>
</div>
<div class="block- bq"
style="background-color: #f6f6f6; color: #8690a6;font-size: 14px; box-shadow: none;">
<p><a href="#">魏 - </a><a href="#">X乎指南 - </a><a href="#">X乎协议 - </a><a href="#">不知道是个啥</a></p>
<p style="font-size: 16px;">以下省略各种版权信息及备案号</p>
</div>
</div>
</div>
</div>
</body>
</html>