我想在我的标题中并排添加 2 张图片，然后我想要我的网站标题 GARY MANN LLC 并在那个 Residential Contractor 下面，然后在标题的右侧我想要空间来添加社交按钮/链接。我如何仅使用 css 和 html 以最干净的方式划分空间这是我必须使用的:
HTML:
<!DOCTYPE HTML>
<html lang="eng">
<head>
<meta charset="UTF-8" />
<title>GARY MANN LLC</title>
<link rel="stylesheet" href="styles/gmann.css" type="text/css" />
</head>
<body>
<header>
<center>GARY MANN LLC</center>
<center>Residential Contractor</center>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a>
<ul>
<li><a href="/crew">Our Crew</a></li>
<li><a href="/history">History</a></li>
<li><a href="/vision">Vision</a></li>
</ul>
</li>
<li><a href="/products">Services</a>
<ul>
<li><a href="/carpentry">Carpentry</a></li>
<li><a href="/waterproof">Waterproofing</a></li>
<li><a href="/concrete">Concrete</a></li>
<li><a href="/masonry">Masonry</a></li>
<li><a href="/prop">Property Maintenance</a></li>
<li><a href="/metal">Metal Construction</a></li>
<li><a href="/design">Interior Design</a></li>
<li><a href="/demo">Demo & Salvage</a></li>
</ul>
</li>
<li><a href="/services">Portfolio</a>
</li>
<li><a href="/contact">Contact</a>
<ul>
<li><a href="/email">Via Email</a></li>
<li><a href="/contact_form">Web Form</a></li>
<li><a href="/pigeon">Carrier Pigeon</a></li>
</ul>
</li>
</ul>
</nav>
<div id="wrapper">
<section id="content">
<!-- all the content in here -->
</section>
<section id="left_side">
</section>
</div> <!-- end wrapper -->
<footer>
<div id="footer_center">
<section id="social_links">
<h3>Connect With Us</h3>
</section>
<section id="site_map">
<h3>Site Map</h3>
</section>
</div>
<div id="copy">
<p>Copywright</p>
</div>
</footer>
</body>
</html>
CSS:
/* HEADER */
* {
margin:0;
padding:0;
}
header {
width:100%;
height:110px;
background-color:#FF6600;
border-bottom:2px solid black;
}
/* END OF HEADER */
/* START NAV MENU */
nav {
background-color:#333333;
height:40px;
width:100%;
float:left;
position: relative;
}
nav ul {
font-family: Sonoma, Arial;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
position: relative;
float: left;
clear: left;
left: 50%;
}
nav ul li {
float: left;
position: relative;
display: block;
right:50%;
}
nav li ul {
display: none;
}
nav ul li a {
display: block;
text-decoration: none;
background: #666666;
color: #ffffff;
padding: 5px 20px 3px 15px;
margin-left: 1px;
white-space: nowrap;
height:30px; /* Width and height of top-level nav items */
width:90px;
text-align:center;
border-right: 3px solid black;
border-left: 3px solid black;
border-top: 1px solid black;
}
nav ul li a:hover {
background: #999999;
}
nav li:hover ul {
display: block;
position: absolute;
height:30px;
}
nav li:hover li {
float: none;
font-size: 11px;
}
nav li:hover a {
background: #534635;
height:30px; /* Height of lower-level nav items is shorter than main level */
}
nav li:hover li a:hover {
background: #999999;
}
nav ul li ul li a {
text-align:left;
}
/* END NAV MENU */
/* WRAPPER */
#wrapper {
width:100%;
height:600px;
background-color:#CCCCCC;
margin-left:auto;
margin-right:auto;
border-left:1px solid black;
border-right:1px solid black;
}
#content {
width:85%;
height:100%;
float:right;
background-color:#999999;
}
#left_side {
width:15%;
height:100%;
float:left;
background-color:#333333
}
/* END WRAPPER */
/* FOOTER */
footer {
width:100%;
height:170px;
background-color:#e7e7e7;
border-top:1px solid black;
}
#footer_center {
width:900px;
height:145px;
margin-left:auto;
margin-right:auto;
border-bottom:1px dotted #333;
}
#social_links {
width:435px;
height:100%;
float:left;
border-right:1px dotted #333;
}
#site_map {
width:435px;
height:100%;
float:right;
border-left:1px dotted #333;
}
/* END FOOTER */
最佳答案
您可以通过创建类来实现这一点。
.header{
width:100%;
height:20%;
float:left;
text-align:center
}
.logo{
width:80%;
height:100%;
}
.upperlogo{
background:url('path of the upper logo') 0 0 no-repeat;
height:10%;
width:100%;
}
.lowerlogo{
background:url('path of the lower logo') 0 0 no-repeat;
height:10%;
width:100%;
}
.social-icons{
width:20%;
height:100%;
float:right;
}
在您的 HTML 中:
<header class="header">
<div class="logo">
<div class="upperlogo"></div>
<div class="lowerlogo"></div>
</div>
<div class="social-icon">
....
</div>
</div>
调整高度和宽度以适合您的图像。通过 CSS 加载图像始终是更优雅的方式。
关于css - 如何将多个图像添加到 css 标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14540027/