代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>阿里百秀</title>
<!-- 引入bootstrap文件 -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- bootstrap的container -->
<div class="container">
<!-- row会取出container的padding直接顶边排列 -->
<div class="row">
<header class="col-md-2">
<div class="logo">
<!-- 透明图片需要加背景颜色 -->
<a href="#">
<img src="./images/logo.png" alt="显示失败" class="hidden-xs">
<!-- 进行手机端兼容使用 -->
<span class="visible-xs">阿里百秀</span>
</a>
</div>
<div class="nav">
<ul>
<!-- 添加字体图标是在该类上添加一个伪元素,将图标引入 -->
<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
<li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
<li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
<li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
<li><a href="#" class="glyphicon glyphicon-glass">美食节</a></li>
</ul>
</div>
</header>
<article class="col-md-7 art">
<!-- 新闻模块,clearfix清除浮动 -->
<div class="news clearfix">
<ul>
<li>
<a href="#">
<img src="./upload/lg.png" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./upload/1.jpg" alt="">
<p>阿里百秀,这个人真的想码云,快开看安康你们的马云爸爸</p>
</a>
</li>
<li>
<a href="#">
<img src="./upload/2.jpg" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./upload/4.jpg" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="./upload/1.jpg" alt="">
<p>阿里百秀</p>
</a>
</li>
</ul>
</div>
<!-- 发表模块 -->
<div class="publish">
<div class="row">
<div class="col-sm-9">
<h3>生活馆关于健康的生活常识,这里有很多的要</h3>
<p class="text-muted hidden-xs">阿里百秀 发布于 2015-11-23</p>
<p class="text-muted hidden-xs">
有一天,我们一起起床,一起刷牙,一起拉着手出家门。一起遛狗,一起散步,一起为了争电视斗智斗勇。一起买菜,一起做饭,一起为了几毛钱在菜市场咆哮。我知道,一定会有这么一天的。
</p>
<p class="text-muted">阅读(2417)评论(1)赞(18)标签: 健康 / 言情 / 爱情 / 骚话 / 生活</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="./upload/4.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆关于健康的生活常识,这里有很多的要</h3>
<p class="text-muted hidden-xs">阿里百秀 发布于 2015-11-23</p>
<p class="text-muted hidden-xs">
有一天,我们一起起床,一起刷牙,一起拉着手出家门。一起遛狗,一起散步,一起为了争电视斗智斗勇。一起买菜,一起做饭,一起为了几毛钱在菜市场咆哮。我知道,一定会有这么一天的。
</p>
<p class="text-muted">阅读(2417)评论(1)赞(18)标签: 健康 / 言情 / 爱情 / 骚话 / 生活</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="./upload/2.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆关于健康的生活常识,这里有很多的要</h3>
<p class="text-muted hidden-xs">阿里百秀 发布于 2015-11-23</p>
<p class="text-muted hidden-xs">
有一天,我们一起起床,一起刷牙,一起拉着手出家门。一起遛狗,一起散步,一起为了争电视斗智斗勇。一起买菜,一起做饭,一起为了几毛钱在菜市场咆哮。我知道,一定会有这么一天的。
</p>
<p class="text-muted">阅读(2417)评论(1)赞(18)标签: 健康 / 言情 / 爱情 / 骚话 / 生活</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="./upload/1.jpg " alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆关于健康的生活常识,这里有很多的要</h3>
<p class="text-muted hidden-xs">阿里百秀 发布于 2015-11-23</p>
<p class="text-muted hidden-xs">
有一天,我们一起起床,一起刷牙,一起拉着手出家门。一起遛狗,一起散步,一起为了争电视斗智斗勇。一起买菜,一起做饭,一起为了几毛钱在菜市场咆哮。我知道,一定会有这么一天的。
</p>
<p class="text-muted">阅读(2417)评论(1)赞(18)标签: 健康 / 言情 / 爱情 / 骚话 / 生活</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="./upload/4.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆关于健康的生活常识,这里有很多的要</h3>
<p class="text-muted hidden-xs">阿里百秀 发布于 2015-11-23</p>
<p class="text-muted hidden-xs">
有一天,我们一起起床,一起刷牙,一起拉着手出家门。一起遛狗,一起散步,一起为了争电视斗智斗勇。一起买菜,一起做饭,一起为了几毛钱在菜市场咆哮。我知道,一定会有这么一天的。
</p>
<p class="text-muted">阅读(2417)评论(1)赞(18)标签: 健康 / 言情 / 爱情 / 骚话 / 生活</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="./upload/1.jpg" alt="">
</div>
</div>
</div>
</article>
<aside class="col-md-3">
<a href="#" class="banner">
<img src="./upload/zgboke.jpg" alt="">
</a>
<!-- a标签是行内元素 -->
<a href="#" class="hot">
<span class="btn btn-primary">热搜</span>
<h4 class="text-primary">欢迎加入中国博客联盟</h4>
<p class="text-muted">你爱我,我会陪你;你不爱我,我给你自由。这就是傻傻的我,那个在乎你的我。</p>
</a>
</aside>
</div>
</div>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。