Fatal编程技术网
  • html/
  • Html 横幅和导航菜单之间的额外空间

Html 横幅和导航菜单之间的额外空间

html css

Html 横幅和导航菜单之间的额外空间,html,css,Html,Css,标题中的横幅图像有130个像素高，但它表示标题总共有135个像素。我找不到发生这种事的地方。这个额外的空间是从哪里来的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

标题中的横幅图像有130个像素高，但它表示标题总共有135个像素。我找不到发生这种事的地方。这个额外的空间是从哪里来的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Taft Power Equipment</title>
        <link rel="stylesheet" type="text/css" href="js\jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <!--[if lt IE 7]>
            <link rel="stylesheet" type="text/css" href="style-ie.css" />
        <![endif]-->
        <script type="text/javascript" language="Javascript" src="js\jquery.min.js"></script>
        <script src="js/jquery.horizontalNav.js"></script>
        <script src="js\jquery-migrate-1.2.1.js"></script>
        <script>
            // When document is ready...
            $(document).ready(function() {
                $('.full-width').horizontalNav({}); // Call horizontalNav on the navigations wrapping element
                $("#main-content").load("home.html");
            });
        </script>
        <script>
            $(document).ready(function() {
                $("#home").click(function() {
                    $("#main-content").load("home.html");
                });
                $("#work").click(function() {
                    $("#main-content").load("work.html");
                });
                $("#blog").click(function() {
                    $("#main-content").load("blog.html");
                });
                $("#about").click(function() {
                    $("#main-content").load("about.html");
                });
                $("#contact").click(function() {
                    $("#main-content").load("contact.html");
                });
                $("#parts").click(function() {
                    $("#main-content").load("parts.html");
                });
                $("#people").click(function() {
                    $("#main-content").load("people.html");
                });
            });
        </script>
        <script>
            $(function() {
                $("button").button()
                    .click(function(event) {
                    event.preventDefault();
                });
            });
        </script>
        <script>
            function showParts(str) {
                if (str == "") {
                    document.getElementById("results").innerHTML = "";
                    return;
                }
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("results").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "partsearch_2.php?q=" + str, true);
                xmlhttp.send();
            }
        </script>
        <script>
            function showPeople(str) {
                if (str == "") {
                    document.getElementById("results").innerHTML = "";
                    return;
                }
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else { // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("results").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "peoplesearch.php?q=" + str, true);
                xmlhttp.send();
            }
        </script>
    </head>

    <body>
        <div id="page-wrap">
            <div id="inside">
                <div id="header">
                    <img src="images/taft_banner_960_blackandwhite.png" />
                </div>
                <div id="menu">
                    <nav class="horizontal-nav full-width horizontalNav-notprocessed">
                        <ul>
                            <li><a href="#" id="home">Home</a>

                            </li>
                            <li><a href="#" id="work">Work</a>

                            </li>
                            <li><a href="#" id="blog">Blog</a>

                            </li>
                            <li><a href="#" id="about">About</a>

                            </li>
                            <li><a href="#" id="contact">Contact</a>

                            </li>
                            <li><a href="#" id="parts">Parts Look Up</a>

                            </li>
                            <li><a href="#" id="people">People</a>

                            </li>
                        </ul>
                    </nav>
                </div>
                <div id="main-content"></div>
                <div id="footer">
                    <p>&copy Copy Right Taft Power Equipment Corp</p>
                </div>
            </div>
    </body>

</html>

* {

    margin: 0;

    padding: 0;

}

html, body {

    margin:0;

    padding-top:0;

    height:100%;

}

p, li {

}

a {

}

b {

}

table {

    border-collapse: collapse;

    /* 'cellspacing' equivalent */

}

table th {

    font: 1.5em Tahoma;

    border: 3px solid #0e7079;

    border-radius: 6px;

    padding: 0em 1em 0em 1em;

}

table td {

    font: 1.3em sans-serif;

    border-radius: 1px;

    border: 0px solid #0e7079;

    padding: 0 1em 0 1em;

}

h1 {

    font: 2.0em Tahoma, sans-serif;

    color: white;

    height: 0px;

}

h2 {

    font: 1.8em Tahoma, sans-serif;

    color: green;

    margin-bottom: 10px;

}

ul {

    margin-left: 0px;

}

img {

    border: none;

}

/* ========================================================================================== */

#page-wrap {

    !margin: 10px auto;

    display: inline;

}

#inside {

    width: 960px;

    margin: 0 auto;

    background: blue;

    min-height:100%;

    position:relative;

}

#searchbar {

    width: 30%;

    background: #747474;

    border: 1px solid red;

    display: inline-block;

}

#results {

    background: #4c4c4c;

    min-height: 100px;

    width:50%;

    display: inline-block;

    border-radius: 6px;

    border: 1px solid #0e7079;

}

#results b {

    font: 2.0em Tahoma, sans-serif;

    color: white;

    height: 0px;

}

#main-content {

    margin-bottom: 10px;

    padding:10px;

    padding-bottom:30px;

    /* Height of the footer */

}

#header {

}

#menu {

}

#left-sidebar {

    width: 150px;

    float: left;

    padding-left: 15px;

    padding-top: 20px;

}

#footer {

    background: #000000;

    text-align: center;

    padding-top: 0px;

    color: white;

    position:absolute;

    bottom:0;

    width:960px;

    height:30px;

    /* Height of the footer */

}

/* ========================================================================================== */

.horizontal-nav {

    background: #efefef;

    border-radius: 6px;

}

.horizontal-nav ul {

    background: #ff4505;

    float: left;

    text-align: center;

    border-radius: 6px;

    border: 0px solid #0e7079;

    margin-left: 0px;

}

.horizontal-nav ul li {

    float: left;

    border-left: 1px solid #0e7079;

}

.horizontal-nav ul li:first-child {

    border-left: 0 none;

}

.horizontal-nav ul li a {

    display: block;

    padding: 10px 20px;

    color: #fff;

    border-top: 1px solid rgba(255, 255, 255, 0.25);

    border-left: 1px solid rgba(255, 255, 255, 0.25);

    text-decoration: none;

}

.horizontal-nav ul li:first-child a {

    border-left: 0 none;

}

.horizontal-nav ul li a:hover {

    background: #12808a;

}

.horizontal-nav ul li:first-child a {

    border-top-left-radius: 6px;

    border-bottom-left-radius: 6px;

}

.horizontal-nav ul li:last-child a {

    border-top-right-radius: 6px;

    border-bottom-right-radius: 6px;

}


塔夫脱动力设备
//当文档准备好时。。。
$（文档）.ready（函数（）{
$（'.full width'）.horizontalNav（{}）；//在navigations包装元素上调用horizontalNav
$（“#主要内容”）.load（“home.html”）；
});
$（文档）.ready（函数（）{
$（“#主页”）。单击（函数（）{
$（“#主要内容”）.load（“home.html”）；
});
$（“#工作”）。单击（函数（）{
$（“#主要内容”）.load（“work.html”）；
});
$（“#博客”）。单击（函数（）{
$（“#主要内容”）.load（“blog.html”）；
});
$（“#关于”）。单击（函数（）{
$（“#主要内容”）.load（“about.html”）；
});
$（“#联系人”）。单击（函数（）{
$（“#主要内容”）.load（“contact.html”）；
});
$（“#零件”）。单击（函数（）{
$（“#主要内容”）.load（“parts.html”）；
});
$（“#人”）。单击（函数（）{
$（“#主要内容”）.load（“people.html”）；
});
});
$（函数（）{
$（“按钮”）.button（）
。单击（功能（事件）{
event.preventDefault（）；
});
});
功能显示部件（str）{
如果（str==“”）{
document.getElementById（“结果”）.innerHTML=“”；
返回；
}
if（window.XMLHttpRequest）{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“结果”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“partsearch_2.php？q=“+str，true”）；
xmlhttp.send（）；
}
功能展示人（str）{
如果（str==“”）{
document.getElementById（“结果”）.innerHTML=“”；
返回；
}
if（window.XMLHttpRequest）{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“结果”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，“peoplesearch.php？q=“+str，true”）；
xmlhttp.send（）；
}

    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 


&塔夫特电力设备公司

* {
保证金：0；
填充：0；
}
html，正文{
保证金：0；
填充顶部：0；
身高：100%；
}
p、 李{
}
a{
}
b{
}
桌子{
边界塌陷：塌陷；
/*“单元间距”等效值*/
}
表th{
字体：1.5em塔荷马；
边框：3px实心#0e7079；
边界半径：6px；
填充：0em 1em 0em 1em；
}
表td{
字体：1.3em无衬线；
边界半径：1px；
边框：0px实心#0e7079；
填充：0 1em 0 1em；
}
h1{
字体：2.0em Tahoma，无衬线；
颜色：白色；
高度：0px；
}
氢{
字体：1.8em Tahoma，无衬线；
颜色：绿色；
边缘底部：10px；
}
保险商实验室{
左边距：0px；
}
img{
边界：无；
}
/* ========================================================================================== */
#换页{
！保证金：10px自动；
显示：内联；
}
#里面{
宽度：960px；
保证金：0自动；
背景：蓝色；
最小高度：100%；
位置：相对位置；
}
#搜索栏{
宽度：30%；
背景#7474；
边框：1px纯红；
显示：内联块；
}
#结果{
背景：#4c；
最小高度：100px；
宽度：50%；
显示：内联块；
边界半径：6px；
边框：1px实心#0e7079；
}
#结果b{
字体：2.0em Tahoma，无衬线；
颜色：白色；
高度：0px；
}
#主要内容{
边缘底部：10px；
填充：10px；
填充底部：30px；
/*页脚高度*/
}
#标题{
}
#菜单{
}
#左侧边栏{
宽度：150px；
浮动：左；
左侧填充：15px；
填充顶部：20px；
}
#页脚{
背景：#000000；
文本对齐：居中；
填充顶部：0px；
颜色：白色；
位置：绝对位置；

#header img {
    display:block;
}



#header img {
    vertical-align:top;
}



header img
{
    display: block;
    margin: 0;
    padding: 0;
}