gpt4 book ai didi

html - 左、中、右 3 列页脚

转载 作者:行者123 更新时间:2023-11-28 05:20:43 25 4
gpt4 key购买 nike

如您所见,我正在尝试创建一个页脚,其中有 3 列,一列在左侧,一列在右侧,一列在中间,背景为灰色,它应该如下所示:

enter image description here

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/

我做错了什么??

最佳答案

页脚的 HTML 似乎没问题。首先,您应该将 css 链接放在标题中。第二 - 插入 Bootstrap 链接(也在标题中):https://www.bootstrapcdn.com/ .

关于html - 左、中、右 3 列页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39063216/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com