Fatal编程技术网
  • html/
  • Html 以狩猎为中心的导航李边界

Html 以狩猎为中心的导航李边界

html css

Html 以狩猎为中心的导航李边界,html,css,Html,Css,通常我在AS3论坛，但我正在努力完善我的CSS技能。我正在尝试创建一个站点。但我担心safari的兼容性问题。我的导航列表有一个边框，我使用了一个填充使边框变大，并以文本为中心。但在狩猎中，边境被推到了左边 第一个问题是有人能帮忙吗？ 第二个问题是学习跨浏览器兼容性的最佳书籍或资源是什么 <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

通常我在AS3论坛，但我正在努力完善我的CSS技能。我正在尝试创建一个站点。但我担心safari的兼容性问题。我的导航列表有一个边框，我使用了一个填充使边框变大，并以文本为中心。但在狩猎中，边境被推到了左边

第一个问题是有人能帮忙吗？ 第二个问题是学习跨浏览器兼容性的最佳书籍或资源是什么

    <html>
    <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <!-- Internet Explorer HTML5 enabling code: -->

                <!--[if IE]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

                <style type="text/css">
                .clear {
                  zoom: 1;
                  display: block;
                }
                </style>


                <![endif]-->
        <title>Antonn Harden Jr | Interactive Designer</title>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
        <script type="text/javascript" src="js/scripts.js"></script>
        <script>



    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }



    body {
        font-family: 'DroidSansRegular', Arial, Helvetica, sans-serif;
        font-size: 1em;
        background-color: #999999;
        height: 100%;
        overflow-y:scroll; /*** scrollbar **/
    }

    p{
        line-height:1.5em;
        padding-bottom:1em;
        color: #fff;
    }

    a, a:visited {
        text-decoration: none;
        color:#ffffff;
        outline: none;
    }

    a:hover {
        color: #fff;
    }

    h2, h3, h4{
        line-height: 1.5;
        text-shadow: 5px 5px 3px #333;
        color: #FFFFFF;
    }

    h2, h3, h4, nav{
        font-family: 'ArchitectsDaughterRegular';   
    }

    @font-face {
        font-family: 'ArchitectsDaughterRegular';
        src: url('architects-daughter-fontfacekit/ArchitectsDaughter-webfont.eot');
        src: url('architects-daughter-fontfacekit/ArchitectsDaughter-webfont.eot?#iefix') format('embedded-opentype'),
             url('architects-daughter-fontfacekit/ArchitectsDaughter-webfont.woff') format('woff'),
             url('architects-daughter-fontfacekit/ArchitectsDaughter-webfont.ttf') format('truetype'),
             url('architects-daughter-fontfacekit/ArchitectsDaughter-webfont.svg#ArchitectsDaughterRegular') format('svg');
        font-weight: normal;
        font-style: normal;

    }

    @font-face {
        font-family: 'DroidSansRegular';
        src: url('ds/DroidSans-webfont.eot');
        src: url('ds/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
             url('ds/DroidSans-webfont.woff') format('woff'),
             url('ds/DroidSans-webfont.ttf') format('truetype'),
             url('ds/DroidSans-webfont.svg#DroidSansRegular') format('svg');
        font-weight: normal;
        font-style: normal;

    }

    .line{
        height:1px;
        background-color:#FFF;
        width: 100%;
        overflow:hidden;
    }

    .clear:after{
        content: ".";
        display: block;
        height: 70px;
        clear: both;
        visibility: hidden;
    }



    /***      HEADER      ***/

    #wrapper {
        margin: 0 auto;
        position: relative;
        width: 960px;   
    }

    header { 
        position:relative;
        bottom:0;
    }

    #logo {
        padding: 50px 0 0 12px;
    }

    nav a {
        padding: 3px 14px;  
    }

    nav ul{
        font-size: 20px;
        float: right;
        margin: -10px 0 0 0;
    }

    nav ul li {
      padding: 0 6px;
      list-style: none;
      float: left;
    }

    nav a:hover {
        outline: medium none;
        background-color:#990505;
        color: #fff;
    }



    nav ul li a.current {
        background-color: #990505;
    }

/**** ABOUT ****/

section#about {
    padding-top: 25px;
}

#content {
    padding-top: 10px;
    width: 61%;
    font-size: 1.2em;
    color: #FFF;    
}

section#about aside{
    float: right;
    color: #fff;
    width: 20%;
}

section#about aside h3 {
    font-size: 18px;    
}

section#about aside ul {
    list-style: none;
    margin: 10px 0;
}

section#container aside ul li{
    margin: 2px 0;  
}


/***       FOOTER      ****/

footer {
    background-color: #FFF;
    height: 50px; 
    position:fixed;
    width: 100%;
    padding-top: 10px;
    bottom: 0;
    left: 0;
}


footer h4{
    position:absolute;
    margin-top: 0px;
    margin-left: 680px;
    color: #990505;
    font-size: 20px;
}

footer ul {
    float:right;

}

footer ul li {
    padding: 0 3px; 
    display: inline;
}

        </script>
        </head>
        <body>

                <header>

                    <div id="wrapper">

                        <div id="logo"><a href="index.html"><img src="img/logo.png" alt="home"></a></div>

                        <nav> 


                            <ul>
                                <li><a href="index.html"> home </a></li>
                                <li><a href="about.html" class="current"> about </a></li>
                                <li><a href="work.html"> work </a></li>
                                <li><a href="contact.html"> contact </a></li>
                            </ul>


                       </nav>
                   </div>

                </header>

                </section>

                <section id="about">

                    <div id="wrapper">

                         <article id="content">   

                            <p>
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
                            </p>

                            <p>
                                Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
                            </p>

                        </article><!--- content -->

                        <div class="clear"></div>

                    </div>

             </section>


            <footer>

                <div id="wrapper">

                    <h4>Follow Me</h4>

                    <ul id>
                        <li><a href="" TARGET="_blank"><img src="./icons/facebook_alt.png"></a></li>
                        <li><a href="" TARGET="_blank"><img src="./icons/linkedin_alt.png"></a></li>
                        <li><a href="" TARGET="_blank"><img src="./icons/twitter_alt.png"></a></li>
                    </ul>

                </div>

            </footer>

        </body>
    </html>


Anton Harden Jr |互动设计师
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：块；
}
身体{
线高：1；
}
ol，ul{
列表样式：无；
}
区块报价，q{
报价：无；
}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
身体{
字体系列：“DroidSansRegular”，Arial，Helvetica，无衬线；
字号：1em；
背景色：#999999；
身高：100%；
溢出y：滚动；/***滚动条**/
}
p{
线高：1.5em；
垫底：1米；
颜色：#fff；
}
a、 a:参观了{
文字装饰：无；
颜色：#ffffff；
大纲：无；
}
a:悬停{
颜色：#fff；
}
h2，h3，h4{
线高：1.5；
文本阴影：5px 5px 3px#333；
颜色：#FFFFFF；
}
h2，h3，h4，导航{
字体系列：“ArchitectDaughterRegular”；
}
@字体{
字体系列：“ArchitectDaughterRegular”；
src:url（'architects-children-fontfacekit/architectsdaughterwebfont.eot'）；
src:url（'architects-children-fontfacekit/ArchitectsDaughter webfont.eot？#iefix'）格式（'embedded-opentype'），
url（'architects-children-fontfacekit/ArchitectsDaughter webfont.woff'）格式（'woff'），
url（'architects-children-fontfacekit/ArchitectsDaughter webfont.ttf'）格式（'truetype'），
url（'architects-children-fontfacekit/architectsdaughterwebfont.svg#ArchitectsDaughterRegular'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“DroidSansRegular”；
src:url（'ds/DroidSans webfont.eot'）；
src:url（'ds/DroidSans webfont.eot？#iefix'）格式（'embedded-opentype'），
url（'ds/DroidSans webfont.woff'）格式（'woff'），
url（'ds/DroidSans webfont.ttf'）格式（'truetype'），
url（'ds/DroidSans webfont.svg#DroidSansRegular'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
.线路{
高度：1px；
背景色：#FFF；
宽度：100%；
溢出：隐藏；
}
.清楚：之后{
内容：“.”；
显示：块；
高度：70像素；
明确：两者皆有；
可见性：隐藏；
}
/***标题***/
#包装纸{
保证金：0自动；
位置：相对位置；
宽度：960px；
}
标题{
位置：相对位置；
底部：0；
}
#标志{
填充：50px 0 12px；
}
导航a{
填充：3x14px；
}
导航ul{
字体大小：20px；
浮动：对；
裕度：-10px0；
}
李国荣{
填充：0 6px；
列表样式：无；
浮动：左；
}
导航a：悬停{
大纲：中无；
背景色：#990505；
颜色：#fff；
}
导航ulli a.电流{
背景色：#990505；
}
/****关于****/
第#节关于{
填充顶部：25px；
}
#内容{
填充顶部：10px；
宽度：61%；
字体大小：1.2米；
颜色：#FFF；
}
第#节关于一旁{
浮动：对；
颜色：#fff；
宽度：20%；
}
第#节关于h3{
字号：18px；
}
第#节关于{
列表样式：无；
利润率：10px0；
}
第#节集装箱{
边际：2px0；
}
/***页脚****/
页脚{
背景色：#FFF；
高度：50px；
位置：固定；
宽度：100%；
填充顶部：10px；
底部：0；
左：0；
}
页脚h4{
位置：绝对位置；
边际上限：0px；
左边距：680px；
颜色：#990505；
字体大小：20px；
}
页脚ul{
浮动：对；
}
页脚ulli{
填充：0 3px；
显示：内联；
}

    

  • 

  • 

  • 

  • 




  • 

  •
    好的，这是您的第一期。在您的代码中，您使用了css的
    标记，而不是
    标记

    假设金融机构 
    nav a {
    padding: 3px 14px;
    display: block;
}

    nav a {
  display: block;
  padding: 3px 14px;
}