移动端布局阿里百秀案例

最新推荐文章于 2024-04-20 16:13:23 发布

HanananQYF

最新推荐文章于 2024-04-20 16:13:23 发布

阅读量324

点赞数

文章标签： javascript vue.js html css

本文链接：https://blog.csdn.net/HanananQYF/article/details/123118991

版权

本文通过阿里百秀案例详细讲解移动端布局技巧，涉及HTML、CSS和JavaScript的综合运用，重点解析Vue.js在移动端布局中的应用。通过源码分析，读者可以深入理解响应式布局的实现过程。

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

效果图：

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <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://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    <!-- 引入bootstrap样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入我们自己的页面css文件 -->
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="https://www.alibaixiu.cn/favicon.ico">
    <title>阿里百秀</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="">
                    </a>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                        <li><a href="#" class="glyphicon glyphicon-tree