alibaixiu案例（含图片资源）

最新推荐文章于 2024-11-01 13:37:40 发布

fusheng_cn

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量267

点赞数

分类专栏：前端 css3 文章标签：前端 bootstrap html

本文链接：https://blog.csdn.net/fusheng_cn/article/details/125957498

版权

这个博客分享了一个前端案例，该案例基于bootstrap3和jQuery，详细介绍了首页的结构和样式代码，并提供了相关图片资源。

摘要由CSDN通过智能技术生成

该案例需要引入bootstrap3和jQuery，请提前下载

首页的结构代码

<!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.0" />
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap 样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="css/index.css" />
    <!-- 先引入jquery js文件 -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <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-fullscreen">奇趣事</a>
              </li>
              <li><a href="#" class="glyphicon glyphicon-filter">美食杰</a></li>
            </ul>
          </div>
        </header>
        <article class="col-md-7">
          <!-- 新闻 -->
          <div class="news clearfix">
            <ul>
              <li>
                <div
                  id="carousel-example-generic"
                  class="carousel slide"
                  data-ride="carousel"
                >
                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                    <div class="i