Question

我正试图在我的标题中并排添加2张图片，之后我想要我的网站标题GARY MANN LLC以及那个住宅承包商，然后在标题的右侧我想要空间添加社交按钮/链接。我怎样才能以最干净的方式将空间划分为仅使用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 */

Answer 1

您需要添加2张图片，一些文字和社交网络按钮。

<header>
    <img id="img1" src="" />
    <img id="img2" src="" />
    <div id="text">
        <span id="title">GARY MANN LLC</span>
        <span id="description">Residential Contractor</span>
    </div>
    <div id="social">
    </div>
</header>

CSS：

header {
width:100%;
height:110px;
background-color:#FF6600;
border-bottom:2px solid black;
}

#img1
{
   float:left;
   width:100px;
   height:100px;
}
#img2
{
   float:left;
   width:100px;
   height:100px;
   margin-left:5px; //If you want some space between them
}
#text
{
   float:left;
   margin-left:10px;
}
#title
{
   font-weight:20px;
   float:left;
}
#description
{
   font-weight:10px;
   float:left;
   clear:both;
}
#social
{
   float:right;
}

选中此http://jsfiddle.net/5KRbh/

Answer 2

有几种方法。如果您无法更改html，请尝试：before选择器。

header {
 position:relative;
 background: url(image.gif) no-repeat top left;
 padding-left:200px;

}
header:before {
    content:url(image.gif);
    top: 0;
    left: 100px;
    position: absolute;
    z-index: -1;
}

Answer 3

你可以通过上课来实现这一目标。

.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>

调整height＆amp; width以适合您的图片。通过CSS加载图片总是更优雅的方式。

如何将多个图像添加到CSS标头？

3 个答案: