first commit

kayson666 · May 22, 2019 · 42f5c39 · 42f5c39
commit 42f5c39
Show file tree

Hide file tree

Showing 29 changed files with 7,501 additions and 0 deletions.
diff --git a/css/bootstrap.css b/css/bootstrap.css
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,139 @@
+body { padding-top: 70px; }
+a:hover {
+	text-decoration: none;
+}
+img {
+	display: block;
+	max-width: 100%;
+	vertical-align: middle;
+}
+img,
+.side-bar .list-group-item,
+.side-bar-card {
+	      border-radius: 3px;
+}
+.navbar-brand {
+	background: url("../img/logo.png") no-repeat center center;
+	background-size: 75%;
+	width: 50px;
+}
+.side-bar {
+	border: 0;
+}
+.side-bar .list-group-item.active {
+	background-color: #ea0c3c;
+}
+
+.news-list-item {
+	      margin-top: 10px;
+	      padding-bottom: 10px;
+	      border-bottom: 1px solid #eee;
+}
+.news-list .news-list-item:first-child {
+	      margin-top: 0;
+}
+.news-list-item:last-child {
+	      border-bottom: 0;
+}
+.news-list-item .tittle {
+	display: block;
+	color: #444;
+	font-size: 18px;
+	font-weight: bold;
+	line-height: 1.5;
+	padding-bottom: 5px;
+}
+.news-list-item .tittle:hover {
+	color: #337ab7;
+}
+.news-list-item .info {
+	color: #888;
+}
+.avatar {
+	display: inline-block;
+}
+.news-list-item .info .avatar img {
+	display:inline-block;
+	width: 15px;
+	height: 15px;
+	margin-right: 5px;
+}
+.side-bar-card {
+	      background: rgba(0,0,0,.05);
+	      margin-top: 15px;
+	      padding: 10px 0;
+}
+.side-bar-card img {
+    padding-top: 6px;
+}
+.side-bar-card .flag {
+	      padding-top: 20px;
+	      padding-bottom: 10px;
+}
+.side-bar-card .text-lg {
+	      font-size: 150%;
+}
+.side-bar-card .card-tittle,
+.side-bar-card .card-body .list .item {
+	      padding: 10px 15px;
+}
+.side-bar-card .card-tittle {
+	      font-size: 18px;
+	      font-weight: bold;
+	      padding-top: 0;
+	      padding-bottom: 0;
+}
+.side-bar-card .card-body .list  .item:hover {
+	      color: #337ab7;
+	      background: rgba(0,0,0,0.05);
+}
+.card-body .list .item .tittle {
+	      color: #444;
+	      padding-bottom: 5px;
+}
+.card-body .list .item .desc {
+	      color: #999999;
+}
+
+/*news*/
+.new-tittle {
+    line-height: 1.3;
+}
+.new-content {
+    margin-top: 40px;
+}
+.new-content img {
+    padding: 15px 0;
+}
+.new-content div {
+    line-height: 1.6;
+}
+.list-no-padding {
+    padding: 5px 0;
+}
+
+/*signup*/
+.btn-info {
+    background-color:#ea0c3c;
+    border-color: red;
+}
+.btn-info:hover {
+    background-color:#d53931;
+    border-color: red;
+}
+/*login*/
+.container-small {
+    max-width: 600px;
+}
+
+/*footer*/
+.footer {
+    margin-top: 20px;
+    padding: 50px 0;
+    text-align: center;
+    color: #999;
+}
+
+
+
+
diff --git a/img/004.jpg b/img/004.jpg
diff --git a/img/005.jpg b/img/005.jpg
diff --git a/img/006.jpg b/img/006.jpg
diff --git a/img/1-1.png b/img/1-1.png
diff --git a/img/2-1.jpg b/img/2-1.jpg
diff --git a/img/2-2.jpg b/img/2-2.jpg
diff --git a/img/2-3.jpg b/img/2-3.jpg
diff --git a/img/2-4.jpg b/img/2-4.jpg
diff --git a/img/logo.jpg b/img/logo.jpg
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/n1.jpg b/img/n1.jpg
diff --git a/img/n2.jpg b/img/n2.jpg
diff --git a/img/n3.jpg b/img/n3.jpg
diff --git a/img/n4.jpg b/img/n4.jpg
diff --git a/img/new_1.jpg b/img/new_1.jpg
diff --git a/img/new_2.jpg b/img/new_2.jpg
diff --git a/img/new_3.jpg b/img/new_3.jpg
diff --git a/img/new_4.jpg b/img/new_4.jpg
diff --git a/img/new_5.jpg b/img/new_5.jpg
diff --git a/img/new_6.jpeg b/img/new_6.jpeg
diff --git a/img/new_7.jpeg b/img/new_7.jpeg
diff --git a/img/new_8.jpeg b/img/new_8.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	  <meta charset="UTF-8">
+	  <title>Document</title>
+	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+	  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+	  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+	  <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+	<nav class="navbar navbar-default navbar-fixed-top">
+		<div class="container">
+			<div class="navbar-header">
+				<a class="navbar-brand" href="index.html" alt="LOGO"></a>
+			</div>
+			<div class="hidden-xs">
+                <ul class="nav navbar-nav">
+                    <li class="active"><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>
+                <form class="navbar-form navbar-left">
+                    <div class="form-group">
+                        <label>
+                            <input type="text" class="form-control" placeholder="请输入.....">
+                        </label>
+                        <button type="submit" class="btn btn-danger">搜一下</button>
+                    </div>
+                </form>
+                <ul class="nav navbar-nav navbar-right">
+                    <li class="active"><a href="login.html">登陆</a></li>
+                    <li><a href="signup.html">注册</a></li>
+                </ul>
+            </div>
+		</div>
+	</nav>
+	<div class="container main">
+		<div class="row">
+			<div class="col-sm-2">
+				<div class="list-group side-bar hidden-xs">
+					<a href="#" class="list-group-item active">综合</a>
+					<a href="#" class="list-group-item">电影</a>
+					<a href="#" class="list-group-item">综艺</a>
+					<a href="#" class="list-group-item">明星</a>
+					<a href="#" class="list-group-item">娱乐</a>
+					<a href="#" class="list-group-item">音乐</a>
+					<a href="#" class="list-group-item">演员</a>
+					<a href="#" class="list-group-item">歌手</a>
+				</div>
+				<div class="panel panel-success">
+					<div class="panel-heading">
+						<div class="panel-title">历史回顾</div>
+					</div>
+					<div class="panel-body">
+                        <ul class="list-group list-unstyled">
+							<li><a href="#">美国宣布对华为禁令推迟90天实施</a></li>
+							<li><a href="#">瑞典检方申请逮捕“维基解密”网站创始人阿桑奇</a></li>
+							<li><a href="#">干达船只倾覆致 船上满载足球球员和球迷</a></li>
+							<li><a href="#">暖新闻 大学生“520”捐献造血干细胞大爱延生命</a></li>
+						</ul>
+					</div>
+					<div class="panel-footer">
+						<span class="text-muted small">数据更新于15秒前</span>
+					</div>
+				</div>
+			</div>
+			  <div class="col-sm-7">
+				    <div class="news-list">
+						<div class="news-list-item clearfix">
+							  <div class="col-xs-5">
+								    <img src="img/n1.jpg">
+							  </div>
+							  <div class="col-xs-7" href="#">
+								    <a href="news.html" class="tittle">
+                                        一部没有盛世美颜、没有大IP、没有狗血虐恋、没有热搜明星加持，
+                                        全凭40多个中老年戏骨拼演技的剧集
+								    </a>
+								  <p>
+									  <span class="label label-success">搞笑</span>
+									  <span class="label label-info">惊悚</span>
+								  </p>
+                                    <div class="info">
+										<span class="avatar">
+											  <img src="img/004.jpg" >王花花
+										</span>
+										<span>1k 评论</span>
+										<span class="badge">10分钟前</span>
+								    </div>
+							  </div>
+						</div>
+						<div class="news-list-item clearfix">
+							  <div class="col-xs-5">
+								    <img src="img/n2.jpg">
+							  </div>
+							  <div class="col-xs-7" href="#">
+								    <a href="news.html" class="tittle">
+                                        埃塞航空难一遇难者亲属起诉波音 索赔2.76亿美元
+								    </a>
+								  <p>
+									  <span class="label label-warning">明星</span>
+									  <span class="label label-info">趣味</span>
+								  </p>
+								    <div class="info">
+										<span class="avatar"><img src="img/003.jpg" >王花花</span>
+										<span>198 评论</span>
+										<span class="badge">12分钟前</span>
+								    </div>
+							  </div>
+						</div>
+						<div class="news-list-item clearfix">
+							  <div class="col-xs-5">
+								    <img src="img/n3.jpg">
+							  </div>
+							  <div class="col-xs-7" href="#">
+								    <a href="#" class="tittle">
+                                        人民日报评华为遭＂极限施压＂:科技自立 时不我待
+								    </a>
+								  <p>
+									  <span class="label label-warning">情感</span>
+									  <span class="label label-success">娱乐</span>
+								  </p>
+								    <div class="info">
+										<span class="avatar"><img src="img/2-1.jpg" >Susan</span>
+										<span>255 评论</span>
+										<span class="badge">17分钟前</span>
+								    </div>
+							  </div>
+						</div>
+						<div class="news-list-item clearfix">
+							  <div class="col-xs-5">
+								    <img src="img/n4.jpg">
+							  </div>
+							  <div class="col-xs-7" href="#">
+                                    <a href="#" class="tittle">
+                                        韩国副总理：贸易战可能对韩国经济造成严重影响
+                                    </a>
+								  <p>
+									  <span class="label label-primary">搞笑</span>
+									  <span class="label label-danger">惊喜</span>
+								  </p>
+                                  <div class="info">
+                                    <span class="avatar"><img src="img/2-4.jpg" >Mark</span>
+                                    <span>112 评论</span>
+                                    <span class="badge">20 分钟前</span>
+                                  </div>
+							  </div>
+						</div>
+                        <div class="news-list-item clearfix">
+                            <div class="col-xs-5">
+                                <img src="img/n1.jpg">
+                            </div>
+                            <div class="col-xs-7" href="#">
+                                <a href="news.html" class="tittle">
+                                    一部没有盛世美颜、没有大IP、没有狗血虐恋、没有热搜明星加持，
+                                    全凭40多个中老年戏骨拼演技的剧集
+                                </a>
+                                <p>
+                                    <span class="label label-success">搞笑</span>
+                                    <span class="label label-info">惊悚</span>
+                                </p>
+                                <div class="info">
+										<span class="avatar">
+											  <img src="img/004.jpg" >王花花
+										</span>
+                                    <span>1k 评论</span>
+                                    <span class="badge">10分钟前</span>
+                                </div>
+                            </div>
+                        </div>
+				    </div>
+			  </div>
+			<div class="col-sm-3">
+					    <div class="search-bar">
+							<input type="search" class="form-control" placeholder="搜索资讯">
+					    </div>
+					    <div class="side-bar-card flag clearfix">
+							<div class="col-sm-5">
+								  <img src="img/1-1.png">
+							</div>
+							<div class="col-sm-7">
+								  <p class="side-bar-card-tittle text-lg">
+									    网上有害信息举报区
+								  </p>
+								  <p>举报电话：12377</p>
+							</div>
+					    </div>
+					    <div class="side-bar-card">
+							<strong class="card-tittle">24小时热文</strong>
+							<div class="card-body">
+								  <div class="list">
+									    <div class="item">
+											<a class="tittle"  href="#">
+												  任正非：美国封锁对华为影响不大
+											</a>
+											<p class="desc">10k 阅读|5k 评论</p>
+									    </div>
+									    <div class="item">
+											<a class="tittle"  href="#">
+												  罗永浩：我只是需要一点时间
+											</a>
+											<p class="desc">1k 阅读||500 评论</p>
+									    </div>
+									    <div class="item">
+											<a class="tittle"  href="#">
+												  “哈啰出行”四川公司注销
+											</a>
+											<p class="desc">2k 阅读|356 评论</p>
+									    </div>
+									    <div class="item">
+											<a class="tittle"  href="#">
+												  搜狐张朝阳重拾物理博士底子
+											</a>
+											<p class="desc">1k阅读|1k 评论</p>
+									    </div>
+									    <div class="item">
+											<a class="tittle"  href="#">
+												  互联网公司起诉腾讯、搜狗不正当竞争
+											</a>
+											<p class="desc">5k 阅读|1k 评论</p>
+									    </div>
+									    <div class="item">
+											<a class="tittle"  href="#">
+												  中兴通讯拿下缅甸首份5G订单
+											</a>
+											<p class="desc">11k 阅读|5k 评论</p>
+									    </div>
+									    <div class="item">
+											<a class="tittle"  href="#">
+												  IBM：2015年至今，黑客攻击已下降95%
+											</a>
+											<p class="desc">200 阅读|100 评论</p>
+									    </div>
+								  </div>
+							</div>
+					    </div>
+			</div>
+		</div>
+	</div>
+    <div class="container">
+        <ul class="pager">
+            <li><a href="#">上一页</a></li>
+            <li><a href="#" class="disabled">下一页</a></li>
+            <li><button class="btn btn-danger btn-sm">
+                <span class="badge">赞</span>
+            </button></li>
+        </ul>
+    </div>
+    <footer>
+        <div class="footer">
+		  © 2017 二狗头条 中国互联网举报中心京ICP证1401号京ICP备125439号-3京公网安备
+	    </div>
+    </footer>
+</body>
+</html>