问空白区-顶部和马林区-无处可寻
EN

Stack Overflow用户

提问于 2021-01-02 22:38:02

回答 1查看 48关注 0票数 0

在我的html文件中，我有头文件，里面有ul>li>a菜单

/* ****** */
:root {
    --primary: #32a852;
    --white: #fafafa;
    --black: #000000;
    --lightgrey: #c7c7c7;

    --menu-items: #333333;
    --mobile-menu: #4a4a4a;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.no-select {
    
}

/* Tags :) */
body {
    padding: 0;
    margin: 0;
    background: var(--primary);
}

/* Header */
.header {
    display: flex;
    background: var(--white);
    width: 100%;
    height: 0%;
    padding: 5px;
}

.menu-items {
    flex: 1;
    text-align: right;
    display: inline-block;
    list-style-type: none;
    transform: translateY(30%);
}

.menu-items li {
    display: inline-block;
    margin-right: 20px;
}

.menu-items li a {
    text-decoration: none;
    color: var(--menu-items);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.32rem;
}

.company-logo {
    width: 50px;
}

.menu-on-off {
    display: none;
    width: 50px;
}

@media (max-width: 530px) {
    .menu-on-off {
        display: inline-block;
        position: absolute;
        right: 3%;
    }
    .menu-items {
        text-align: left;
        padding: 10px;
        position: fixed;
        background: var(--mobile-menu);
        width: 100%;
        height: 100vh;
    }
    .menu-items li {
        margin-left: 10px;
        margin-top: 20px;
        display: block;
    }
    .menu-items li a {
        font-size: 1.5rem;
        color: var(--white);
    }
}

/* Header& */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Реткинский Мультисад</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="new.css" />
</head>
<body>
    <!-- Header -->
    <div class="header">
        <img src="img/logo.png" class="company-logo" alt="Logo">
        <div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
        <ul class="menu-items">
            <li><a href="">Продукты</a></li>
            <li><a href="">Услуги</a></li>
            <li><a href="">Галерея</a></li>
            <li><a href="">Контакты</a></li>
        </ul>
    </div>
    
    <!-- JavaScript -->
    <script src="new.js"></script>
</body>
</html>

但是这里有一件事Look here

第一，有一个小的页边距-为菜单和第二个更严重的问题，页边距-顶部和非媒体查询代码，我没有添加页边距-顶部或页边距-左。来自亚美尼亚的新年快乐;p。有趣的是什么细节需要堆栈溢出？有趣的是，哪些细节需要堆栈溢出？有趣的是，哪些细节需要堆栈溢出？有趣的是，哪些细节需要堆栈溢出？

css

html

回答 1

Stack Overflow用户

发布于 2021-01-02 23:12:13

好的-这里有一些小的改变，但正在工作。大多数都与元素定位有关。

/* ****** */
:root {
    --primary: #32a852;
    --white: #fafafa;
    --black: #000000;
    --lightgrey: #c7c7c7;

    --menu-items: #333333;
    --mobile-menu: #4a4a4a;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.no-select {
    
}

/* Tags :) */
body {
    padding: 0;
    margin: 0;
    background: var(--primary);
}

/* Header */
.header {
    display: flex;
    background: var(--white);
    width: 100%;
    height: 0%;
    padding: 5px;
}

.menu-items {
    flex: 1;
    text-align: right;
    display: inline-block;
    list-style-type: none;
}

.menu-items li {
    display: inline-block;
    margin-right: 20px;
}

.menu-items li a {
    text-decoration: none;
    color: var(--menu-items);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.32rem;
}

.company-logo {
    width: 50px;
}

.menu-on-off {
    display: none;
    width: 50px;
}

@media (max-width: 530px) {
    .menu-on-off {
        display: inline-block;
        position: absolute;
        right: 3%;
    }
    .menu-items {
        text-align: left;
        padding: 10px;
        position: fixed;
        background: var(--mobile-menu);
        width: 100%;
        top: 28px;
        left: 0;
        right: 0;
    }
    .menu-items li {
        margin-left: 10px;
        margin-top: 20px;
        display: block;
    }
    .menu-items li a {
        font-size: 1.5rem;
        color: var(--white);
    }
}

/* Header& */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Реткинский Мультисад</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="new.css" />
</head>
<body>
    <!-- Header -->
    <div class="header">
        <img src="img/logo.png" class="company-logo" alt="Logo">
        <div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
        <ul class="menu-items">
            <li><a href="">Продукты</a></li>
            <li><a href="">Услуги</a></li>
            <li><a href="">Галерея</a></li>
            <li><a href="">Контакты</a></li>
        </ul>
    </div>
    
    <!-- JavaScript -->
    <script src="new.js"></script>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65540285

复制

相似问题

问空白区-顶部和马林区-无处可寻
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问空白区-顶部和马林区-无处可寻EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问空白区-顶部和马林区-无处可寻
EN