<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9] -->
<!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->
<!-- 引入bootstrap 样式文件 -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
<title>阿里百秀首页案例</title>
</head>
<body>
<div class="container">
<div class="row">
<!-- 左 -->
<header class="col-md-2">
<div class="logo">
<a href="#">
<img src="./img/logo.png" alt="" class="hidden-xs">
<!-- 在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">
<!-- 新闻 -->
<!-- clearfix 清除浮动 -->
<div class="news clearfix">
<ul>
<li>
<a href="#">
<img src="./upload/5.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/3.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>生活馆 关于指甲的10个健康知识 你知道几个?</h3>
<p class="text-muted hidden-xs">alibabdu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个编藏在指甲里知识吧!</p>
<p class="text-muted hidden-xs">阅读(2417)评论(1)整(18)标签:健康/藏染/指甲/疾病/皮肤/营养/连味生活</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="./upload/3.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3>
<p class="text-muted hidden-xs">alibabdu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个编藏在指甲里知识吧!</p>
<p class="text-muted hidden-xs">阅读(2417)评论(1)整(18)标签:健康/藏染/指甲/疾病/皮肤/营养/连味生活</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="./upload/3.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3>
<p class="text-muted hidden-xs">alibabdu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个编藏在指甲里知识吧!</p>
<p class="text-muted hidden-xs">阅读(2417)评论(1)整(18)
<span class="hidden-xs">标签:健康/藏染/指甲/疾病/皮肤/营养/连味生活</span>
</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="./upload/3.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3>
<p class="text-muted hidden-xs">alibabdu 发布于 2015-11-23</p>
<p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个编藏在指甲里知识吧!</p>
<p class="text-muted hidden-xs">阅读(2417)评论(1)整(18)标签:健康/藏染/指甲/疾病/皮肤/营养/连味生活</p>
</div>
<div class="col-sm-3 pic hidden-xs">
<img src="./upload/3.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3>
<p class="text-muted hidden-xs">alibabdu 发布于 2015-11-23</p>
<p class=" hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个编藏�
阿里百秀-简约风格首页前端案例
186 浏览量
2024-02-14
17:41:48
上传
评论
收藏 881KB RAR 举报
albx.rar （25个子文件） 
albx bootstrap js 
bootstrap.js 74KB npm.js 484B bootstrap.min.js 39KB css bootstrap-theme.min.css.map 74KB bootstrap.min.css 119KB bootstrap-theme.css.map 47KB bootstrap-theme.css 25KB bootstrap.css.map 382KB bootstrap.css 143KB bootstrap-theme.min.css 23KB bootstrap.min.css.map 528KB fonts 
glyphicons-halflings-regular.svg 106KB glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.eot 20KB glyphicons-halflings-regular.woff2 18KB img 
logo.png 23KB css index.css 3KB
index.html 9KB upload 
2.jpg 495KB zgboke.jpg 33KB 1.jpg 10KB lg.png 23KB 3.jpg 10KB 4.jpg 6KB资源评论
