如你所见,我正在尝试创建一个页脚,其中有3列,一个在左边,一个在右边,一个在中间,有灰色背景,它应该看起来像这样:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Frontend</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="box">
<div id="header">
<br />
<div id="searchMenu">
<input id="sweBtn" type="button" value="SVENSKA" />
<input id="engBtn" type="button" value="ENGLISH" />
<input id="searchTxt" type="text" />
<input id="searchBtn" type="button" value="SÖK" />
</div>
<br />
</div>
<div class="col-md-4 text-left" id="imgText">
<h3>VÄLKOMOMEN TILL<br />SUBLIME<br />CONSULTING!</h3>
<p>Alla Sveriges advokater är med i<br />Advokatsamfundet. Advokat-<br />samfundet upprätthålåler en hög<br />etisk och professionel standard<br /> hos Sveriges advokater, och ser till<br /> att advokaternas erfarenheter tas<br /> till vara i lagstifningen och den<br />övriga rättsutvecklingen.</p>
</div>
<div class="col-md-4">
<img id="imgHeader" src="~/img/Header.png" />
</div>
<div>
<ul id="navBar">
<li><a>BEHÖVER DU AVOKAT?</a></li>
<li><a>ADVOKATETIK</a></li>
<li><a>ATT BLI ADVOKAT</a></li>
<li><a>UTBILDNING</a></li>
<li><a>ADVOKATSSAMFUNDET TYCKER</a></li>
</ul>
<img id="rssImg" src="~/img/RSSIcon.png" />
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="box">
<div class="row">
<div class="col-md-4">
<a href="/Design">Gå till Juridiska Bibliotekets webbplats-></a>
<a href="/Design">Gå till Juridiska Bibliotekets webbplats-></a>
<a href="/Design">Gå till Juridiska Bibliotekets webbplats-></a>
</div>
<div class="col-md-4">
<a href="/Design">Om cookies-></a>
</div>
<div class="col-md-4">
<p><strong>Sublime Consulting AB</strong></p>
<p>Telefon 08-459 96 00</p>
<a href="mailto:info@sublime.se">info@sublime.se</a>
<a>Mer kontaktuppgifter</a>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
<link href="~/Content/custom.css" rel="stylesheet" />
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: #F3CAAA;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: dimgrey;
}
#header {
background-color: #503F31;
color: white;
padding: 30px;
}
#searchMenu {
margin-left: 1450px;
}
#sweBtn {
font-family: 'Times New Roman';
background-color: Transparent;
border:double;
color: grey;
}
#engBtn {
font-family: 'Times New Roman';
background-color: Transparent;
border: double;
color: #F3CAAA;
}
#searchTxt {
background-color: grey;
border-color: grey;
}
#searchBtn {
font-family: 'Times New Roman';
background-color: Transparent;
color: #F3CAAA;
}
#imgText {
font-size: 25px;
position: absolute;
}
#imgHeader {
width: 1904px;
}
#navBar {
font-family: 'Times New Roman';
background-color: #503F31;
background-image: url(img/RSSIcon.png);
}
#rssImg{
width: 30px;
height: 30px;
position:absolute;
margin-left: 1800px;
margin-top: -40px;
}
#footer {
background-color: grey;
color: white;
padding-bottom: -250px;
}
以下是jsfiddle的链接:“https://jsfiddle.net/fd29rvyL/”
我在这里做错了什么?
答案 0 :(得分:0)
页脚的HTML似乎没问题。首先,您应该将css链接放在标题中。第二 - 插入引导链接(也在标题中):https://www.bootstrapcdn.com/。