Html 物化和引导干扰外部css
我尝试复制站点进行练习,并尝试导入materialize。这完全搞乱了我的页面样式。我试着只下载我需要的css组件,但仍然没有改变 这是没有引导的页面: 这是导入bootstrap.css后的页面 这里是style.cssHtml 物化和引导干扰外部css,html,css,twitter-bootstrap,materialize,Html,Css,Twitter Bootstrap,Materialize,我尝试复制站点进行练习,并尝试导入materialize。这完全搞乱了我的页面样式。我试着只下载我需要的css组件,但仍然没有改变 这是没有引导的页面: 这是导入bootstrap.css后的页面 这里是style.css @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap"); html, body { padding: 0; margin: 0; font-famil
@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>
贝瓦库夫
道
这可能是因为引导和具体化使用相同的类
名称。
您应该选择一个使用,并使用您自己的CSS
对其进行个性化设置。
materialize具有自己的导航栏中心样式
祝你好运这可能会发生,因为bootstrap和materialize使用相同的
类
名称。
您应该选择一个使用,并使用您自己的CSS
对其进行个性化设置。
materialize具有自己的导航栏中心样式
祝你好运好吧,我想起来了。似乎以下代码是罪魁祸首:
#left{
float: left;
}
#right{
float: right;
}
我把它改成:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
及
现在它工作得很好。好吧,我想出来了。似乎以下代码是罪魁祸首:
#left{
float: left;
}
#right{
float: right;
}
我把它改成:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
及
现在它工作得很好。bro不仅要放CSS,还要放HTML代码。bro不仅要放CSS,还要放HTML代码。嘿!我一次只使用其中一个。但两者都会导致相同的问题,即使分开使用。嘿!我一次只使用其中一个。但两者都会导致相同的问题,即使是分开使用。