二十七、响应式布局练习- 美图导航栏1

gaoya7305

已于 2023-07-28 11:12:34 修改

阅读量269

点赞数

分类专栏： html+css 文章标签：导航栏响应式布局

于 2023-07-28 11:11:39 首次发布

本文链接：https://blog.csdn.net/gaoya7305/article/details/131932141

版权

本文介绍了一个响应式布局的练习，首先强调移动端优先和渐进增强的设计原则。接着详细阐述了手机端界面结构开发，包括导航栏的三个元素、左侧菜单、中间标题和右侧用户信息。在样式设计部分，通过Less编写了导航栏的动画效果，如图标从三条线变为X的转换，调整了旋转中心和角度，实现了平滑过渡的视觉效果。

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

准备工作
界面结构开发
样式设计 - style.less

一、准备工作

开发响应式设计的网页需要注意以下几点：
1.移动端优先 - 先写完移动端的界面，再写网页。因为现在都是手机用的比较多；
2.渐进增强 - 当移动端写完后，再慢慢增强pc端的功能；

要开发的手机大小的界面：

二、界面结构开发

分析：手机宽度下的网页元素，导航栏3个元素，左边菜单，中间标题，右边用户。

<!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">
    <title>Document</title>
    <!-- 网站如果需要再pc端用，reset需要重置下，不是的话，可以不用reset -->
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../fa/css/all.min.css">
    <link rel="stylesheet" href="./meitu/style.css">
</head>
<body>

    <!-- 外部容器 -->
    <div class="top-bar">
        <!-- 1.左侧菜单 -->
        <div class="left-menu">
            <!-- 创建菜单图标 3条线的图标，待会通过css来添加动画效果，从3条线变成一个叉 -->
            <ul class="menu-icon">
                <li></li>
                <li></li>
                <li></li>
            </ul>

             <!-- 创建弹出层的菜单 -->
             <ul class