html - CSS Web 模板的问题

Question

我对 Web 模板中的 CSS 有疑问。

这是我的 HTML 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Green Pasture by FCT</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' />
<link href="/EquityMKC/css/default.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

 <script type="text/javascript" src="/EquityMKC/jquery/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="/EquityMKC/jquery/jquery.fixedMenu.js"></script>
        <script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
        </script>

</head>
<body>
<div id="header-wrapper">
    <div id="header">
        <div id="logo">
            <h1><a href="#">Equity Group</a></h1>
        </div>
        <div id="menu" class="menu">
            <ul>
                <li class="current_page_item"><a href="/EquityMKC/Welcome.jsp" accesskey="1" title="">Welcome</a></li>
                <li><a href="/EquityMKC/Publish.jsp" accesskey="2" title="">Publish</a></li>
                <li><a href="#" accesskey="3" title="">Trading<span class="arrow"></span></a>

                 <ul>
                    <li><a href="/EquityMKC/Buy.jsp">BUY</a></li>
                    <li><a href="/EquityMKC/Sell.jsp">SELL</a></li>
                 </ul>
                </li>

                <li><a href="/EquityMKC/Portfolio.jsp" accesskey="4" title="">Portfolio</a></li>

                <li><a href="#" accesskey="5" title="">Blotter<span class="arrow"></span></a>

                <ul>
                    <li><a href="/EquityMKC/Order.jsp">Order</a></li>
                    <li><a href="/EquityMKC/Trade.jsp">Trade</a></li>
                 </ul>

                </li>

                <li><a href="/EquityMKC/About.jsp" accesskey="5" title="">About</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

我的 CSS 文件是

body {
    margin: 0px 0px 0px 0px;
    padding: 0;
    background: #2B2B2B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #8F8F8F;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-weight: 200;
    color: #222222;
}

h2 {
    font-size: 3em;
}

p, ol, ul {
    margin-top: 0px;
    padding: 0px;
}

p, ol {
    line-height: 180%;
}

strong {
}

a {
    color: #5C5539;
}

a:hover {
    text-decoration: none;
}

a img {
    border: none;
}

img.border {
}

img.alignleft {
    float: left;
}

img.alignright {
    float: right;
}

img.aligncenter {
    margin: 0px auto;
}

hr {
    display: none;
}

/** WRAPPER */

#wrapper {
    overflow: hidden;
    background: #FFFFFF;
}

.container {
    width: 1200px;
    margin: 0px auto;
}

.clearfix {
    clear: both;
}

/* Header */

#header-wrapper {
    overflow: hidden;
    height: 150px;
}

#header {
    width: 1200px;
    height: 150px;
    margin: 0 auto;
    padding: 0px 0px;
}

/* Logo */

#logo {
    float: left;
    width: 310px;
    height: 150px;
    padding: 0px 0px 0px 40px;
}

#logo h1 {
    padding: 50px 0px 0px 0px;
    letter-spacing: -2px;
    font-size: 3.6em;
    text-transform: uppercase;
}

#logo h1 a {
    text-decoration: none;
    color: #FFFFFF;
}


/* Menu */

#menu {
    float: right;
    width: 810px;
    height: 80px;
    padding: 20px 40px 0px 0px;
}

#menu ul {
    float: right;
    margin: 0;
    padding: 40px 0px 0px 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: left;
}

#menu a {
    display: block;
    margin-left: 1px;
    padding: 7px 20px 7px 20px;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #FFFFFF;
}

#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
    background: #1B5902;
    border-radius: 5px;
    color: #FFFFFF;
}

/* Page */

#page-wrapper {
    overflow: hidden;
}

#page {
    overflow: hidden;
    width: 1120px;
    margin: 0px auto;
    padding: 50px 40px;
    color: #8F8F8F;
    border-top: 1px solid #A1A1A1;
}

/** CONTENT */

#wide-content {
}

#wide-content h2 {
    padding: 0px 0px 20px 0px;
    letter-spacing: -1px;
    font-size: 36px;
    color: #222222;
}


/** CONTENT */

#content {
    float: right;
    width: 800px;
    padding: 0px 0px 0px 0px;
}

#content h2 {
    padding: 0px 0px 20px 0px;
    letter-spacing: -1px;
    font-size: 36px;
    color: #222222;
}

#content .subtitle {
    padding: 0px 0px 30px 0px;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    color: #81AFC5;
}

/** SIDEBAR */

#sidebar {
    float: left;
    width: 290px;
    padding: 0px 0px 20px 0px;
}

#sidebar h2 {
    padding: 0px 0px 30px 0px;
    letter-spacing: -1px;
    font-size: 2em;
}

/* Footer */

#footer {
    margin: 0 auto;
    padding: 50px 0px 50px 0px;
}

#footer p {
    text-align: center;
    font-size: 12px;
    color: #757575;
}

#footer a {
    color: #757575;
}

/* Three Column Footer Content */


#footer-bg {
    overflow: hidden;
    padding: 40px 0px;
    background:#E5E0DD url(images/main-bsg.png) repeat;
}

#footer-content {
    color: #67C8E3;
}

#footer-content h2 {
    margin: 0px;
    padding: 0px 0px 30px 0px;
    letter-spacing: -1px;
    text-shadow: 1px 1px 0px #FFFFFF;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 200;
    color: #93776E;
}

#footer-content a {
}

#footer-content a:hover {
    text-decoration: underline;
}


#column1 {
    float: left;
    width: 280px;
    margin-right: 30px;
}

#column1 p {
    line-height: 1;
}

#column2 {
    float: left;
    width: 280px;
    margin-right: 30px;
}

#column3 {
    float: left;
    width: 280px;
}

#column4 {
    float: right;
    width: 260px;
}


/* Banner Style */

#banner-wrapper {
}

#banner {
    overflow: hidden;
    width: 1160px;
    margin: 20px auto 50px auto;
}

#banner .img-border {
    height: 350px;
    border: 20px solid #FFFFFF;
}

/* Button Style */

.button-style {
    display: inline-block;
    margin-top: 30px;
    padding: 7px 30px;
    background: #36332E;
    border-radius: 5px;
}

.button-style a {
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #FFFFFF;
}

/* List Style 1 */

ul.style1 {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.style1 li {
    padding: 25px 0px 15px 0px;
    border-top: 1px solid #A1A1A1;
}

ul.style1 a {
    text-decoration: none;
    color: #FFFFFF;
}

ul.style1 a:hover {
    text-decoration: underline;
    color: #6B6B6B;
}

ul.style1 .first {
    padding-top: 0px;
    border-top: none;
}

/** LIST STYLE 3 */

ul.style3 {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.style3 li {
    padding: 10px 0px 10px 0px;
    border-top: 1px solid #A1A1A1;
}

ul.style3 a {
    text-decoration: none;
    color: #949494;
}

ul.style3 a:hover {
    text-decoration: underline;
}

ul.style3 .first {
    padding-top: 0px;
    border-top: none;
    box-shadow: none;
}

ul.style3 .date {
    width: 87px;
    background-color: #36332E;
    margin-top: 20px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    color: #FFFFFF;
}

ul.style3 .first .date
{
    margin-top: 0px;
}


/* Recent News */

#recent-news {
    overflow: hidden;
    width: 1120px;
    margin: 0px auto;
    padding: 50px 40px;
    background: #36332E;
    color: #8C8C8C;
}

#recent-news h2 {
    padding: 0px 0px 20px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5em;
    color: #EDEDED;
}

#recent-news .date {
    padding: 0px 0px 10px 0px;
    font-weight: bold;
    font-style: normal;
    color: #E3E3E3;
}

#recent-news p {
    font-style: italic;
}

#recent-news a {
    font-style: normal;
    color: #B8B8B8;
}

#recent-news #rbox1 {
    float: left;
    width: 250px;
    margin-right: 40px;
}

#recent-news #rbox2 {
    float: left;
    width: 250px;
    margin-right: 40px;
}

#recent-news #rbox3 {
    float: left;
    width: 250px;
}

#recent-news #rbox4 {
    float: right;
    width: 250px;
}

/* Button Style */

.button-style1 {
    margin-top: 30px;
}

.button-style1 a {
    padding: 10px 25px;
    background: #EBB462;
    border-radius: 5px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #FCE3BB;
    color: #36332E !important;
}


.menu{
      font: 13px/27px Arial,sans-serif;

      color:#3366CC;
      height:20px;

}
.menu a:hover{
    background-color:#e4ebf8;
    color:black;

}
.menu a {
    text-decoration: none;
    padding: 6px 8px 7px;
    color:white;
    outline: lime;
}
.menu ul{
    list-style: none;
    margin:0;
    padding:0 0 0 10px;
}
.menu ul li{
    padding:0;
    float:left;    
}
.menu ul li ul li{
    padding:0;
    float:none;
    margin: 0 0 0 0px;
    width:60%;
}
.menu ul li ul{
    position: absolute;
    display:none;
    padding: 0px ;
}
.active ul{
    display:block !important; 
}
.active a{
    background-color: black;
    border: 1px solid #C3D1EC;
    border-bottom: 0;
    box-shadow: 0 -1px 5px #CCCCCC;
    display: block;
    height: 15px;
    padding: 0 8px 0 8px;
    position: relative;
    z-index: 1;
    color:#3366CC;

}
.active a:hover{
    background-color:white;
}
.active ul a:hover{
    background-color:#e4ebf8;
}

.active ul a{
    border: 0 !important;
    box-shadow: 0 0 0 #CCCCCC;
    border:0;
    width: 100%;
}
.arrow {
    border-color: white transparent transparent;
    border-style: solid dashed dashed;
    margin-left: 5px;
    position: relative;
    top: 10px;
}

这是网页的快照

在此处输入图像描述

当我点击交易菜单时，中间有空格，然后显示买入和卖出。我想删除空间。

score 1 · Accepted Answer

1

需要 CSS

#menu ul li ul { padding-top:5px; }

在css您的style code.

于 2013-03-14T09:56:55.387 回答

html - CSS Web 模板的问题

1 回答 1

Related

Reference