个人中心
gpt4 book ai didi

html - 如何使导航栏静态并向上移动背景图像/页脚？

转载 作者：行者123 更新时间：2023-11-28 04:13:12 25 4
gpt4 key购买 nike

第一季度

如何让我的导航栏静态化？

第二季度

如何将背景图片上移以确保没有白色间隙并调整背景图片的高度？我想我必须使用 padding 来向上移动图像并使用 height 来操纵背景图像的高度。那是对的吗？

第三季度

如何删除网页第 3 部分底部的页脚文字上方的空白与我们联系？

HTML代码

<!DOCTYPE html>
<html>

<head>
    <html lang="en">
    <meta charset="UTF-8">
    <title>Liam Docherty | London Web Developer &amp; GFX designer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

 <body>
        <nav class="navbar navbar-default"> 
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                            <li><a href="#">Home</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a>
                                    </li>
                                    <li><a href="#">Another action</a>
                                    </li>
                                    <li><a href="#">Something else here</a>
                                    </li>
                                    <li><a href="#">Separated link</a>
                                    </li>
                                    <li><a href="#">One more separated link</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a>
                                    </li>
                                    <li><a href="#">Another action</a>
                                    </li>
                                    <li><a href="#">Something else here</a>
                                    </li>

                                    <li><a href="#">Separated link</a>
                                    </li>

                                    <li><a href="#">One more separated link</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Clients</a>
                            </li>
                            <li><a href="#contact-me">Contact Me</a>
                            </li>
                        </ul>
                      </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
        </nav>


    <section class="section1">
        <div class="hero"></div>




        <a href= "#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>

    </section>
    <section class="section2" id = "section2">



        <a href = "#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>

    </section>
    <section id="contact-me" class="contact_section">

    </section>
    <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

<footer>
    <div class="page">
        <h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
    </div>
 </footer>
</html>

CSS

<style>
    body {
      margin: 0;
      padding: 0;
    }
    .navbar.navbar-default {
      background-color: #4D5061;
      height: 10vh;
      z-index: 100;
    }
    .navbar.navbar-default ul {
      list-style-type: none;
      text-align: center;
    }
    .navbar.navbar-default ul li {
      display: inline-block;
    }

    .dropdown .dropdown-menu {
      background-color: #4D5061;
    }

    .dropdown .dropdown-menu a {
      color: white;
    }
    .navbar.navbar-default ul li a {
      display: inline-block;
      padding: 3.5vh 8px 4px;
      color: white;
      text-decoration: none;
      font-size: 14pt;
      font-family: 'Roboto', sans-serif;
    }
    .navbar.navbar-default ul li:after {
      content: '';
      position: absolute;
      right: 50%;
      bottom: 0;
      left: 50%;
      height: 3px;
      background-color: red;
      border-radius: 9px;
      transition: all .2s;
    }
    .navbar.navbar-default ul li a:hover {
      color: red;
    }
    .nav.navbar-nav,
    .nav.navbar-nav>li {
      float: none;
    }
    .navbar.navbar-default ul li:hover:after {
      right: 0;
      left: 0;
    }
    a:hover {
      color: red;
      text-decoration: none;
    }
    #logo {
      padding-top: 2vh;
      padding-left: 20px;
      float: left;
    }
    section {
      position: relative;
    }
    .section1 {
      height: 90vh;
      text-align: center;
      color: white;
      background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
      background-attachment: fixed;
    }
    .section2 {
      height: 95vh;
      background-color: #A59E8C;
      text-align: center;
      color: white;
    }
    .contact_section {
      height: 93vh;
      background-color: grey;
    }
    .fa-angle-down {
      color: #4D5061;
      position: absolute;
      bottom: 0px;
    }
    footer {
      height: 5vh;
      background-color: #4D5061;
      text-align: center;
      margin:0;
      padding:0;
      right:0;
      bottom:0;
      left:0:
    }
    h1{
      font-size: 14pt;
      color: white;
      font-family: 'Roboto', sans-serif;
    }
    .navbar.navbar-default ul.dropdown-menu li,
    .navbar.navbar-default ul.dropdown-menu li a {
      position: relative;
      display: block;
    }
    </style>

最佳答案

1) 使用 Bootstrap 提供的 navbar-fixed-top 类来固定导航栏。

2) 更改 section1 类的高度属性。

3) 创建一个新部分，降低高度，并从您的 h1 类中删除边距/填充(您的 CSS 中有错字，.footer 而不是 footer ).

结果: https://jsfiddle.net/vnkevsnt/8/

关于html - 如何使导航栏静态并向上移动背景图像/页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42612146/

25 4 0
文章推荐： css - 调整卡片内图像的大小
文章推荐： css - JavaFX TableView 换行文本选中行文本颜色
文章推荐： c++ - constexpr 适用于 Ubuntu，但不适用于 MacOS
文章推荐： html - Shopify 元字段变量值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com