对外部CSS进行材质化和自举干扰

问题描述 投票：0回答：1

我正在尝试复制站点以进行练习，并尝试导入实例化。这完全弄乱了我页面的样式。我试图仅下载我需要的组件的CSS，但仍然没有更改。

这是没有引导程序的页面：“”

这是导入bootstrap.css后的页面“”

这里是style.css

@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
  padding: 0;
  margin: 0;
  font-family: 'Montserrat';
}

html a, body a {
  text-decoration: none;
  outline: none;
}

#header {
  z-index: 100;
  width: 100%;
  height: 79px;
  background: white;
  position: fixed;
  border-bottom: 1.5px solid #eee;
}

#header #small-header {
  height: auto;
  padding: 6px;
  height: 12px;
  font-size: 10px;
  font-weight: 500;
  background: #EEEEEE;
}

#header #small-header #left {
  float: left;
}

#header #small-header #right {
  float: right;
}

#header #small-header .header-link {
  color: #57606f;
  margin: 0 6px;
}

#header #small-header .header-link:hover {
  color: black;
}

#header #main-header {
  height: 55px;
  line-height: 55px;
  padding: 0;
}

#header #main-header img {
  height: 20px;
  padding: 0 8px;
  margin-right: 30px;
  margin-left: 20px;
  vertical-align: middle;
}

#header #main-header #links {
  height: 55px;
  display: inline-block;
}

#header #main-header #links ul {
  margin: 0;
  list-style-type: none;
}

#header #main-header #links ul li {
  display: inline-block;
  height: 52px;
  cursor: pointer;
  border: none;
  -webkit-transition: opcatiy 0.3s;
  transition: opcatiy 0.3s;
}

#header #main-header #links ul li .main-header-link {
  text-transform: uppercase;
  font-weight: 600;
  color: #2f3640;
  margin: 6px;
  font-size: 12.5px;
  letter-spacing: 2px;
}

#header #main-header #links ul li:hover {
  border-bottom: 4px solid #fbc531;
}

#header #main-header .main-header-link {
  font-weight: 600;
  color: #2f3640;
  font-size: 15px;
}

#header #main-header #right {
  margin-right: 20px;
  float: right;
}

#header #main-header #right #search {
  display: inline-block;
  margin-left: 100px;
}

#header #main-header #right #search input {
  text-indent: 23px;
  width: 300px;
  display: inline-block;
  position: relative;
  font-family: 'Montserrat';
  font-size: 12px;
  height: 30px;
  background: #EAEAEA;
  outline: none;
  border: none;
  padding: 4px;
  border-radius: 5px;
}

#header #main-header #right #search #inp:before {
  font-family: 'FontAwesome';
  content: '\f002';
  position: absolute;
  z-index: 11;
  margin: 0 8px;
  color: #95a5a6;
}

#header #main-header #right #search input:focus {
  background: white;
  border: 1px solid #2f3640;
}

#header #main-header #right #sep {
  background: black;
  opacity: 0.4;
  width: 1px;
  vertical-align: middle;
  margin: 0 15px;
  top: 50%;
  height: 20px;
  display: inline-block;
  position: relative;
  z-index: 11;
}

.landing {
  position: relative;
  top: 78px;
}

.landing img {
  margin: 0;
  width: 100%;
}
/*# sourceMappingURL=style.css.map */

和html：

<!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">

    <script defer type="text/javascript" src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Bewakoof</title>
</head>
<body>
    <div id="front-page">
        <!-- Header -->
        <div id="header">
            <div id="small-header">
                <div id="left">
                    <a class="header-link" href="#">Offers</a>
                    <a class="header-link" href="#">Fanbook</a>
                    <a class="header-link" href="#">
                        <span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
                        Download App
                    </a>
                    <a class="header-link" href="#">TriBe Membership</a>
                </div>
                <div id="right">
                    <a class="header-link" href="#">Contact Us</a>
                    <a class="header-link" href="#">Track Order</a>
                    <a class="header-link" href="#">Pay online & get free shipping.</a>
                </div>
            </div>
            <div id="main-header">
                <a href="#"><img src="images/bewakoof-logo-og.png"></a>
                <div id="links">
                    <ul>
                        <li><a class="main-header-link" href="#">Men</a></li>
                        <li><a class="main-header-link" href="#">Women</a></li>
                        <li><a class="main-header-link" href="#">Mobile covers</a></li>
                        <li><a class="main-header-link" href="#">clearance zone</a></li>
                    </ul>
                </div>
                <div id="right">
                    <form id="search">
                        <div id="inp">
                            <input type="text" placeholder="Search by product or category">
                        </div>
                    </form>
                    <div id="sep"></div>
                    <a class="main-header-link" href="#">Login</a>
                    <a href="#"><i class="far fa-heart fa-lg" style="margin: 0 10px; color: black"></i></a>
                    <a href="#"><i class="fas fa-shopping-bag fa-lg" style="color: black;"></i></a>
                </div>
            </div>
        </div>
        <!-- Header end -->
        <div class="landing">
            <img src="images/hulk.gif">
            <button class="btn-lg btn-warning">daw</button>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
html css twitter-bootstrap materialize
1个回答
0
投票

之所以会出现这种情况，是因为引导程序和实现使用相同的class名称。您应该选择一个使用，然后使用自己的CSS对其进行个性化设置。实体化具有其自己的导航栏中心样式。

祝你好运

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.