为body标签覆盖scaffolding.less
所以我一直在网页上工作，我刚刚添加了bootstrap，但是当我引导到网站它已经覆盖了身体的背景颜色时，我已经附上了小提琴。我希望我的网站看起来像第一个图像，但目前看起来像第二个图像。
有没有人知道覆盖它的最佳方法，并且像第一张图片一样有原始的颜色背景？
1 个答案:
答案 0 :(得分：1)
在包含bootstrap.min.css文件后添加此样式。
就像你的style.css文件 -
body {
background-color: #161A25;
margin:0;
}
#logo {
position:absolute;
left:0;
top:0;
}
h9
{
color: white;
position:absolute;
right:25rem;
top:2.5rem;
font-size: 10px;
font-family: 'Raleway', sans-serif;
}
h6
{
color: white;
position:absolute;
right:15rem;
top:2.5rem;
font-size: 10px;
font-family: 'Raleway', sans-serif;
}
h7
{
color: #32CE87;
position:absolute;
right:2rem;
top:1.5rem;
font-size: 7px;
font-family: 'Raleway', sans-serif;
}
h8
{
color: white;
position:absolute;
right:2rem;
top:1.5rem;
font-family: 'Raleway', sans-serif;
font-size: 17px;
color: #32CE87;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height:110px;
background-color: #2A3046;
color: white;
}
img.logo {
height: 80px;
left:3em;
position: relative
}
img.logo1 {
height: 40px;
left:3em;
bottom:2rem;
position:absolute;
}
.my-button {
display: inline-block;
margin: 5px;
background: #32CE87;
color: white;
font-size: 1.5em;
font-family: 'Raleway', sans-serif;
text-align: center;
border-radius: 5px;
padding: 8px 16px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
width: 100px;
text-decoration: none;
}
.my-button:hover {
background: #666;
color: #c1e1e0;
}
.center-bottom {
position: fixed;
bottom: 12rem;
width: 100%;
text-align: center;
}
img.arrow {
max-height: 40px;
}
.row {
background-color: white;
max-width:100%;
height: 150px;
border-radius: 5px;
padding-top: 20px;
padding-bottom: 50px;;
margin-top: 0.1rem;
margin-left: 25px;
margin-right: 25px;
}
.box1 {
background-color: white;
max-width:100%;
height:150px;
padding-bottom:50px;
margin-top: 0.5rem;
margin-left: 25px;
margin-right: 25px;
border-radius: 5px;
}
p {
font-size:7px;
width:380px;
position: absolute;
right:12em;
text-align: left;
bottom: 1.5rem;
}
img.laptop {
height: 60px;
position: absolute;
left:0px;
right: 0px;
margin-left: auto;
margin-right: auto;
}
div.bottomtext {
position: relative;
left:0px;
right: 0px;
font-family: 'Raleway', sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;
width:800px;
top:4rem;
font-size: 0.6rem;
}
img.textimage
{
height:20px;
left:8rem;
position: absolute;
font-family: 'Raleway', sans-serif;
}
.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}
img.column {
height: 40px;
width: 100%;
position: relative;
padding: 0px;
margin: 0px;
}
img.row
{height:60px;
}
h9:hover {
color: #32CE87;
}
h6:hover {
color: #32CE87;
}
p:hover {
color: #32CE87;
}
h7:hover {
color: white;
}
h8:hover {
color: white;
}
.pt-inner-wrap {
color: #ecf0f1;
padding: 15px 0;
text-align: center;
color: black;
border-right: 3px solid #d4d4d4;
}
div.container {
margin-bottom: 1rem;
}
之后，在包含bootstrap.min.css
之后包含此.style.css文件<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<img src="Logo-Trans.png" class="logo" >
<div class="toptext">
<h9> GET A QUOTE</h9>
<h6> RETRIEVE A QUOTE</h6>
<h7>NEED HELP OR ADVICE?CALL US <br style> </h7>
<h8> 0800 0481804</h8>
</div>
<img src="nav.png" class="column">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="pt-inner-wrap">
<i class="fa fa-mobile fa-4x"></i>
<h4 class="pt-title">Mobile & Smartphone</h4>
<h6 class="pt-title">How many would you like to insure</h6>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<h6 class="pt-title">How many would you like to insure</h6>
<img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<h6 class="pt-title">How many would you like to insure</h6>
<img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<h6 class="pt-title">How many would you like to insure</h6>
</div>
</div>
<div class="col-sm-4">
<div class="pt-inner-wrap">
<i class="fa fa-mobile fa-4x"></i>
<h4 class="pt-title">Ipad's & Tablets</h4>
<h6 class="pt-title">How many would you like to insure</h6>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<h6 class="pt-title">How many would you like to insure</h6>
<img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<h6 class="pt-title">How many would you like to insure</h6>
<img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<h6 class="pt-title">How many would you like to insure</h6>
</div>
</div>
<div class="col-sm-4" >
<div class="pt-inner-wrap">
<i class="fa fa-mobile fa-4x"></i>
<h4 class="pt-title">Laptops & Macs</h4>
<h6 class="pt-title">How many would you like to insure</h6>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<h6 class="pt-title">How many would you like to insure</h6>
<img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<h6 class="pt-title">How many would you like to insure</h6>
<img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<h6 class="pt-title">How many would you like to insure</h6>
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="box1">
<div> <img src="laptop.png" class="laptop"> </div>
<div class="bottomtext">Please enter a figure for the number of individual laptops/macbooks that you would like to insure in each price range. <br> Where you dont want cover with a particular price range, please leave bank.</div>
</div>
<div class="footer">
<div class="center-bottom">
<a class="my-button" title="Relevant Title" href="#">Back</a>
<a class="my-button" title="Relevant Title" href="#">Next</a>
</div>
<p> © Insync Insurance Solutions Ltd 2016 All rights reserved. Mobiru is a trading style of Insync Insurance Solutions Ltd which is authorised and regulated by the Financial Conduct Authority. Our registered office is Midland House, 2 Poole Road, Bournemouth, Dorset BH2 5QY and we are registered in England under company number 08810662. Should you have cause to complain, and you are not satisfied with our response to your complaint, you may be able to refer it to the Financial Ombudsman Service, which can be contacted as follows: The Financial Ombudsman Service Exchange Tower, London, E14 9SR | Tel: 0800 023 4567 or 0300 123 9 123 | www.financial-ombudsman.org.uk </p>
<img src="Logo-Trans.png" class="logo1">
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？