【问题标题】:Static HTML Page静态 HTML 页面
【发布时间】:2014-09-29 10:39:46
【问题描述】:

大家好,提前谢谢。 我尝试了几个小时来制作一个静态 html 页面,但它不起作用 好的,页面是这个http://blog.plaisio.gr/ 我想让页眉和页脚分开,我不能让它们完全一样工作。 我使用了 SnappySnippet 和我所知道的一切,但它不起作用我可以有一些关于如何做到这一点的指导,因为我不知道...... 我想制作一个具有相同页眉和页脚的 html 页面,该页面的外观和工作方式与网站相同。 例如,当我将鼠标悬停时,我在菜单上写下黑色的代码没有出现.. 我花了几个小时搜索 html 和 css 文件以找到每个不同的 div 类和 id 来制作它..

这是我到目前为止所管理的......

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.art-header{
    margin:0 auto;
    height:195px;
    background-position:0 0;
    background-repeat:no-repeat;
    position:relative;
    width:1190px;
    z-index:auto !important;
}
.row{
    display:block;
    width:1190px;
    margin:auto;
    border-bottom:1px solid #000;
    height:2px;
    position:absolute;
    top:212px;left:0px;
    }
    .art-header a{
        font-weight:bold;
        text-decoration:none;
        letter-spacing:3px;
        color:black;display:block;
        float:left;
        }
        .art-header a:hover{color:#A02C32;}
        .region.region-top1{
            width:1190px;
            margin:auto;
            border-bottom:none !important;
            display:block;
            }
            .header-logo{
                display:block;
                height:64px;
                width:431px;
                background-repeat:no-repeat;
                margin-bottom:-6px
                ;margin-top:19px;}
.menu-bar{
    display:block;
    height:46px;
    width:1190px;
    border-bottom:6px solid #000;}
    ul.header-menu a{background-color:white;border-left:1px solid black;padding-top:11px;font-weight:bold;font-size:16px;height:29px;display:block;font-family:Helvetica;line-height:normal;letter-spacing:0px;margin-top:6px;padding-left:17px;padding-right:16px;}
    ul.header-menu a:hover{background:url(Files/menu-bg.png) repeat-x;color:#fff;

    ul.header-menu{float:left;width:70%;padding:0;margin:0;list-style-type:none;position:relative;left:15px;}
    ul.header-menu li{position:relative;float:left;}
    ul.header-menu li .new-events{background:url(Files/new_events.png) no-repeat scroll 0 0 transparent;
    height:18px;
    position:absolute;
    right:10px;
    top:5px;width:47px;}
    ul.header-menu > li.active > a:hover{color:#FFF;background:url(Files/active-menu.png) repeat-x;}
    ul.header-menu li{display:inline;}ul.header-menu > li.active > a{color:#FFF;background:url(/sites/all/themes/MyPlaisioTheme/images/active-menu.png) repeat-x;padding-right:19px;height:55px;border:none;padding-left:18px;}





</style>
</head>

<body>
<header class="art-header clearfix">  <div class="region region-art-header">
    <div class="block block-block" id="block-block-6">

                <style type="text/css">
#new{ display:block; width:46px; height:26px; background:url(http://www.plaisio.gr/images/radio-new.png) no-repeat center; position:relative; top:-10px; margin-left:302px; }
ul.header-menu > li.active > a.active { color: #FFF; background: url(/sites/all/themes/plaisioAcademy/images/menu-bg.png) repeat-x;}
</style>
<div class="header-logo"><a href="http://www.plaisio.gr/" title="Plaisio.gr"> <img src="Files/plaisio-logo.png" width="222" height="48"></a></div><div class="menu-bar"><ul class="header-menu"><li><a href="http://www.plaisio.gr/" title=" Plaisio.gr">ΠΡΟΪΟΝΤΑ </a></li><li><a href="http://stores.plaisio.gr/" title=" Δείτε τα καταστήματα του Πλαισίου">ΚΑΤΑΣΤΗΜΑΤΑ</a></li><!-- <li class="active"><a href="http://blog.plaisio.gr" title=" Plaisio Blog">BLOG</a></li> --> <li><a href="http://www.plaisio.gr/promo/CampaignCMS.aspx?cid=46" title="EVENTS" style="border-right:1px solid #000;">EVENTS</a><div class="new-events"></div></li></ul><div class="contactinfos"><img src="Files/contact-phone.png"></div></div>
</div>

  </div>




</header>
</body>
</html>

【问题讨论】:

  • 这不是一个很好的问题。究竟是什么问题?你看到了什么,你期待看到什么?您的链接对我来说看起来不错...
  • “我想让页眉和页脚分开”..这是什么意思?
  • ul.header-menu a:hover 没有关闭 0.0
  • 我需要在 1 个单页上没有中间内容的页眉菜单和页脚不想加载文件

标签: html css static


【解决方案1】:

使用样式属性 position:fixed 将其固定在需要的地方,或者使用 headhesive.js sticky header

【讨论】:

  • 我不想从头开始我想从这里获取页眉和页脚blog.plaisio.gr 并将它们放在一个 html 空文件中,并让它们在没有使用 Css 文件的情况下独立工作跨度>
猜你喜欢
  • 2012-04-15
  • 1970-01-01
  • 2016-10-19
  • 2012-09-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-08
相关资源
最近更新 更多