结合两者而不影响其他元素

【问题标题】：Combining both without affecting other elements结合两者而不影响其他元素
【发布时间】：2021-08-15 12:42:39
【问题描述】：

在这里，我有一个摄影作品集和顶部导航栏分别构建。但是当我尝试将它结合起来时，样式会发生变化吗？为什么会这样？有人可以帮我将两者结合在一起，而无需对样式进行任何更改。非常感谢。非常感谢。非常感谢。

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
    background-color: #fefdfc;
    background-image: linear-gradient(315deg, #fefdfc 0%, #473146 74%);
    height: auto;
}

html {
    scroll-behavior: smooth;
}

h1 {
    color: white;
    font-weight: 400;
    font-size: 2.5rem;
    text-shadow: black 3px 3px;
    text-transform: uppercase;
    margin: 0;
}

h2 {
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: capitalize;
    margin: 0;
}

img {
    display: block;
    width: 100%;
}

main {
    max-width: 1200px;
    margin: auto;
    box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1);
}

#landing {
    background-color: #000000;
    background-image: linear-gradient(147deg, #000000 0%, #04619f 74%);
}

#landing-text {
    display: flex;
    flex: 0 1 40vw;
    height: 50vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: 1rem;
    padding-left: 1rem;
}

#landing-text h2 {
    color: #b91300;
}

#landing-image {
    background: url(/images/camera.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
    flex: 0 1 60vw;
    margin: 0;
}

.btn {
    padding: 0.5rem 2rem;
    border: 1px #ccc solid;
    display: inline-block;
    margin: 2rem 0 0;
    border-radius: 50px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    transition: background 500ms ease;
}

.btn:hover {
    background: #000000;
    color: #fff;
    transform: scale(1.11);
    transition: all 0.6s;
}

#header {
    padding: 1.5rem;
    text-align: center;
    background-color: #000000;
    background-image: linear-gradient(147deg, #000000 0%, #434343 74%);
    color: #fff;
}

#header h2 {
    border-left: dotted 1px #fff;
    border-right: dotted 1px #fff;
    display: inline-block;
    padding-right: 1rem;
    padding-left: 1rem;
}

.caption {
    padding: 0.8rem;
    text-align: center;
    background: #000000;
    opacity: 0.9;
    color: #fff;
}

footer {
    text-align: center;
    padding: 2rem 1rem;
    margin: auto;
    color: rgb(0, 0, 0);
}

footer h3 {
    font-size: 3rem;
    margin-bottom: 0;
}

.social-part .fa {
    padding-right: 20px;
    color: white;
    cursor: pointer;
}

ul li a {
    margin-right: 20px;
}

.navcolor {
    background-color: rgb(0, 0, 0);
}

.dropdown-menu {
    border-radius: 10px;
}


/* Screen Sizes 500px and Up */

@media (min-width: 500px) {
    #landing {
        display: flex;
        height: 100%;
    }
    #landing-text {
        height: 100vh;
    }
    #landing-image {
        height: 100vh;
    }
}


/* Screen Sizes 700px and Up */

@media (min-width: 700px) {
    .btn {
        padding: 1rem 3rem;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Naveen Jc Photography</title>
</head>

<body>
    <main>
        <!-- Landing Area -->
        <div id="landing">
            <div id="landing-text">
                <div id="landing-text-inner">
                    <h1>Naveen <br> Photography</h1>
                    <h2 class="text">Beautiful Natural Photography</h2>
                    <a href="#images" class="btn" id="view-work">
                        View Work
                    </a>
                </div>
            </div>
            <div id="landing-image"></div>
        </div>

        <div id="images">
            <div id="header">
                <h2>Our Work</h2>
            </div>

            <img src="/images/img1.webp" alt="">
            <div class="caption">
                <h3>Photo One</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="/images/img2.webp" alt="">
            <div class="caption">
                <h3>Photo Two</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="images/img3.webp" alt="">
            <div class="caption">
                <h3>Photo Three</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="images/img4.webp" alt="">
            <div class="caption">
                <h3>Photo Four</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
            <img src="images/img5.webp" alt="">
            <div class="caption">
                <h3>Photo Five</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
            </div>
        </div>
    </main>

    <footer>
        <h3>Get In Touch</h3>
        <p>Email or call us to set up a consult</p>
        <p>Email:
            <strong>contact@jc.lensational</strong>
        </p>
        <p>Phone:
            <strong>(617) 212-5267</strong>
        </p>
    </footer>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

NAVIGATION BAR

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,500,500i,700,800i" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>Naveen Jc Photography</title>
</head>

<body class="navbody">

    <div class="navcolor">

        <nav class="navbar navbar-expand-sm navbar-dark ">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

            <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item dropdown dmenu">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                      Our Services
                    </a>
                        <div class="dropdown-menu sm-menu dropdown-hover">
                            <a class="dropdown-item" href="#">CORPORATE PHOTOGRAPHY</a>
                            <a class="dropdown-item" href="#">EVENT PHOTOGRAPHY</a>
                            <a class="dropdown-item" href="#">SOCIAL MEDIA AND EMAIL MARKETING PHOTOGRAPHY</a>
                            <a class="dropdown-item" href="#">PORTRAIT PHOTOGRAPHY</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact Us</a>
                    </li>

                    <!-- <li class="nav-item dropdown dmenu">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                      Dropdown link
                    </a>
                    <div class="dropdown-menu sm-menu">
                      <a class="dropdown-item" href="#">Link 1</a>
                      <a class="dropdown-item" href="#">Link 2</a>
                      <a class="dropdown-item" href="#">Link 3</a>
                      <a class="dropdown-item" href="#">Link 4</a>
                      <a class="dropdown-item" href="#">Link 5</a>
                      <a class="dropdown-item" href="#">Link 6</a>
                    </div>
                  </li> -->
                </ul>
                <div class="social-part">
                    <i class="fa fa-facebook" aria-hidden="true"></i>
                    <i class="fa fa-twitter" aria-hidden="true"></i>
                    <i class="fa fa-instagram" aria-hidden="true"></i>
                </div>
            </div>
        </nav>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.navbar-light .dmenu').hover(function() {
                $(this).find('.sm-menu').first().stop(true, true).slideDown(150);
            }, function() {
                $(this).find('.sm-menu').first().stop(true, true).slideUp(105)
            });
        });
    </script>

</body>

</html>

【问题讨论】：

  • 您能否在问题中添加实际和预期布局的屏幕截图
  • 嗨！请阅读有关 html 文档结构的信息！您可以在一个 HTML 文档中仅使用 、、 标签

标签： javascript html css merge


【解决方案1】：

请先阅读introduction to HTML。

您尝试将两个 html 文档放在一个文件中，这不是不可接受的

您需要将两个文件合并为一个：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div> NAVIGATION </div>
<div> other code of page </div>
</body>
</html>

【讨论】：

  • 是的，我就是这么做的。我没有在这里粘贴，因为我已经删除了它。我将所有内容都粘贴在正文元素、链接和 javascript 中。它工作正常，但样式已更改。
猜你喜欢
  • 2021-06-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-02-19
  • 1970-01-01
  • 1970-01-01
  • 2011-05-29
  • 2019-01-27
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode