【页面布局】响应式 Gulp 中文网第十三届蓝桥杯（Web 应用开发）线上模拟赛

最新推荐文章于 2023-11-05 10:55:33 发布

Pulseum

最新推荐文章于 2023-11-05 10:55:33 发布

阅读量848

点赞数

分类专栏：第十三届蓝桥杯Web模拟赛文章标签：前端

本文链接：https://blog.csdn.net/qq_53472371/article/details/121739288

版权

【页面布局】响应式 Gulp 中文网

考试需求

在 index.html 文件 < style> 中加入下述 @media 媒体查询规则。
当屏幕宽度 max-width 为 1400px 时，页面效果如下（不包括图上尺寸标记）。
当屏幕宽度 max-width 为 900px 时，页面效果如下（不包括图上尺寸标记）。
当屏幕宽度 max-width 为 650px 时，头部导航隐藏，并在右侧显示图标，底部列表的宽度为 100%，页面效果如下。

解答：

这个响应式布局我当时写的时候心里没底，但提交检测的时候通过了，本题有多种实现方法，以下仅供参考。

009

index.js:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>gulp.js - 基于流的自动化构建工具。 | gulp.js 中文网</title>
    <link rel="stylesheet" href="css/reset.css">
    <style media="screen">
        body {
     
            font-family: "Helvetica Neue", "Helvetica", "Lucida Grande", "Arial", "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif";
            font-weight: normal;
        }

        .container>nav {
     
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 51px;
            background-color: #CD4749;
        }

        main header {
     
            height: 427px;
            background-color: #CD4749;
            text-align: center;
        }

        main header img {
     
            margin-top: 118px;
            width: 200px;
        }

        main header h3 {
     
            color: white;
            margin-top: 16px;
            font-size: 21px;
            font-weight: 200;
        }

        main header div:last-child {
     
            margin-top: 45px;
        }

        main header span {
     
            color: #efbfbf;
            box-shadow: inset 0 0 0 2px #efbfbf;
            border-radius: 2px;
            background-color: transparent;
            padding: 10px 16px;
            font-size: 18px;
        }

        main header span:hover {
     
            color: white;
            box-shadow: inset 0 0 0 2px white;
            border-color: white;
        }

        main section {
     
            width: 1137px;
            margin: 74px auto 0;
        }


        main ul {
     
            /* overflow: hidden; */