个人中心
gpt4 book ai didi

css - 如何在此网页中锁定标题

转载 作者：行者123 更新时间：2023-11-28 08:09:13 24 4
gpt4 key购买 nike

我有两个框需要锁定在这个网页上，但是当我尝试锁定它们时，它会改变大小并且正文会滚动到它上面。

我需要标题来显示所有内容并被锁定。

代码在这里:

http://jsfiddle.net/dwhs/gtehep16/

HTML

<body>
<!--==============================header=================================-->    
<header>
        <div class="head-box1">
        <div class="main">
            <h1><a class="logo" href="index.html">pro web hosting</a></h1>
            <nav>
              <div style="text-align:right;"> <span class="link2"><a href="#">Account Manager</a> | <a href="https://webhost.pro/account/cart.php?a=view">Cart</a> | <a href="https://webhost.pro/account/register.php">Register</a> | <a href="http://webhost.pro/account/knowledgebase.php">Questions?</a></span></span><span class="phone"><br>
                Call us: <strong>(213)984-HOST 24/7 <a href="/support.htm">Support</a></strong></span><span class="nothing"><br>
                </span> <a href="https://webhost.pro/account/clientarea.php"></a></div>
          </nav>
        </div>
        <div class="clear"></div>
        </div>

        <div id='cssmenu'>
<ul>
   <li class='active'><a href='/'><span>Home</span></a></li>
   <li><span><a href="/web-hosting-plans.htm">Web Hosting</a></span></li>
   <li><span><a href="/reseller-hosting.htm">Reseller</a></span></li>
   <li><span><a href="/dedicated-servers.html">Dedicated</a></span></li>
   <li><span><a href="/support.htm">Support</a></span></li>
   <li><a href='/affiliates/index.htm'><span>Affiliates</span></a></li>
   <li class='last'><a href='/why-us.html'><span>Why us</span></a></li>
</ul>
</div>

CSS

header {
    width:100%;
    position:relative; 
    z-index:2;
}
.logo {
    display:block;
    width:300px;
    height:75px;
    text-indent:-5000px;
    background:url(/images/logo.png) 0 0 no-repeat;
}
.nothing {
    color: #ffffff;
    font-size:20px;
    text-decoration:none;
    padding: 10px 0px 0px 0px;
}
.head-box1 {
    padding-bottom:10px;
    background-color: #F4F3F3;
}
.main {
    width:960px;
    padding:0;
    margin:0 auto;
}
body{
    color:#333;
    position:relative;
    min-width:980px;
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-transform: none;
    background-color: #F4F3F3;
    background-repeat: no-repeat;
    background-position: center 0;
}
html,body{height:100%;}
p{padding-bottom:18px;}
a{
    color:#333;
    outline:none;
    cursor:pointer;
    text-decoration:none;
}
/*** MENU ***/
.sf-menu, .sf-menu * {
    margin:         0;
    padding:        5;
    list-style:     none;
}

nav {
    float:right;
    margin-right:10px;
    padding-top:25px;
    width:500px;
}
.sf-menu {
    line-height:    1.0;
}
.sf-menu li {
    float:          right;
    position:       relative;
    margin-left:20px;   
}
.sf-menu a {
    display:        block;
    position:       relative;
    color:#CCCCCC;
    text-transform:capitalize;
    font-size:12px;
    line-height:16px;
}
.sf-menu a:hover,
.sf-menu a.active,
.sf-menu li.sfHover > a {
    color:#FFFFFF;
    text-decoration:none;
}

.sf-menu ul a:hover,
.sf-menu ul li.sfHover > a {
    color:#1f4460;
}

.sf-menu ul ul a:hover,
.sf-menu ul ul li.sfHover > a {
    color:#58a5c4;
}

.sf-menu ul {
    position:       absolute;
    top:            -999em;
    background:url(/images/menu-bg.gif) repeat-x 0 0 #4f95ba;
    width:          160px; /* left offset of submenus need to match (see below) */
    padding-top: 19px;
    padding-right: 0;
    padding-bottom: 8px;
    padding-left: 0;
}

.sf-menu ul:after {
    display:block;
    position:absolute;
    width:11px;
    height:6px;
    background:url(../images/marker1.png) no-repeat 0 0;
    top:-6px;
    left:14px;
    content:'   ';
}

.sf-menu ul ul:after {
    display:block;
    position:absolute;
    width:5px;
    height:9px;
    background:url(../images/marker2.png) no-repeat 0 0;
    top:13px;
    left:-5px;
    content:'   ';
}

.sf-menu ul ul  {
    position:       absolute;
    top:            -999em;
    padding:10px 0 6px;
    background:url(../images/menu-bg1.gif) repeat-x 0 0 #1e4460;
    width:          140px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:          100%;
    margin:0 25 30px;
    padding:20px 0 0px;
    text-align:center;
}
.sf-menu ul a {
    font-size:12px;
    color:#fff;
}
.sf-menu li:hover {
    visibility:     inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left: -17px;
    top: 32px; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left: 151px;
    top: -8px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            0;
}

页面在这里http://dwhswebsite.com试图锁定菜单及以上的所有内容。所以一切都在它下面滚动。

谢谢!

最佳答案

您的 HTML 标记有误。你的<header>包括你 body 的大部分内容。进行以下更改。

更新了 header HTML，其他所有内容都应低于 </header> 

<header>
        <div class="head-box1">
        <div class="main">
            <h1><a class="logo" href="index.html">pro web hosting</a></h1>
            <nav>
              <div style="text-align:right;"> <span class="link2"><a href="https://webhost.pro/account/clientarea.php">Account Manager</a> | <a href="https://webhost.pro/account/cart.php?a=view">Cart</a> | <a href="https://webhost.pro/account/register.php">Register</a> | <a href="http://webhost.pro/account/knowledgebase.php">Questions?</a></span><span class="phone"><br>
                Call us: <strong>(213)984-HOST 24/7 <a href="/support.htm">Support</a></strong></span><span class="nothing"><br>
                </span> <a href="https://webhost.pro/account/clientarea.php"></a></div>
          </nav>
        </div>
        <div class="clear"></div>
        </div>

        <div id="cssmenu">
<ul>
   <li class="active"><a href="/"><span>Home</span></a></li>
   <li><span><a href="/web-hosting-plans.htm">Web Hosting</a></span></li>
   <li><span><a href="/reseller-hosting.htm">Reseller</a></span></li>
   <li><span><a href="/dedicated-servers.html">Dedicated</a></span></li>
   <li><span><a href="/support.htm">Support</a></span></li>
   <li><a href="/affiliates/index.htm"><span>Affiliates</span></a></li>
   <li class="last"><a href="/why-us.html"><span>Why us</span></a></li>
</ul>
</div>


 </header>

CSS

header {
  width: 100%;
  position: fixed;
  z-index: 2;
}

body {
  top: 150px;
}

关于css - 如何在此网页中锁定标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29356294/

24 4 0
文章推荐： javascript - 初始化 Cordova 时出错 : undefined
文章推荐： ios - 境界+ swift : Suggestion for "live filtering" of Results
文章推荐： css - Font Awesome - 堆叠图标时，如何让第二个图标居中
文章推荐： javascript - 显示 2 个具有相同 ID 和 Class onClick 的 Div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com