CSS：如何制作这个topheader？

看到这个www.workatplay.com/网站，并着迷于简单和漂亮的东西可以看。我希望完全像上面的标题。CSS：如何制作这个topheader？

随着我reffering这头： http://img227.imageshack.us/img227/619/header1o.png alt text

以及如何联系+了“[workatplay.com]”标志被设置在右边。

我试着看源&学习的CSS /源，但它似乎并没有在那里。 nav-sub（粉红色条）获取colordefined（css）并分割的部分。

整个标题是背景吗？为什么我不能在CSS或其他地方找到它，知道它们是如何完成的。

我该如何制作这样的标题？

来源

2010-09-24 Johnson

在这里，你去..http://jeaffreygilbert.com/workatplayheader.html

前瞻： alt text

CSS：

/* Resetter */ 
    ol, ul, li, a { 
     background: transparent; 
     border: 0px; 
     font-size: 100%; 
     margin: 0px; 
     outline: 0px; 
     padding: 0px; 
     vertical-align: baseline; 
    } 
    ul, li { 
     list-style-type: none; 
    } 

    /* Body */ 
    body { 
     background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png); 
    } 

    /* Header */ 
    .header { 
     margin: 0px auto; 
     position: relative; 
     width: 1000px; 
    } 
    .header ul li { 
     float: left; 
    } 
    .header ul li a { 
     background-position: 0% 0%; 
     background-repeat: no-repeat; 
     cursor: pointer; 
     display: block; 
     height: 80px; 
     text-indent: -9999px; 
    } 
    .header ul li a, ul#nav-sub { 
     background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px; 
    } 

    /* Nav */ 
    ul#nav { 
     height: 80px; 
     margin-top: 80px; 
     -webkit-padding-start: 40px; 
     display: block; 
    } 
    ul#nav li.services a { 
     background-position: 0px 0px; 
     width:115px; 
    } 
    ul#nav li.toolbox a { 
     background-position: -115px 0px; 
     width:115px; 
    } 
    ul#nav li.work a { 
     background-position: -224px 0px; 
     width: 86px; 
    } 
    ul#nav li.about a { 
     background-position: -310px 0px; 
     width: 93px; 
    } 
    ul#nav li.insights a { 
     background-position: -403px 0px; 
     width: 113px; 
    } 
    ul#nav li.home { 
     float: right; 
    } 
    ul#nav li.home a { 
     background-position: -533px 0px; 
     width: 200px; 
    } 

    /* Sub Nav */ 
    ul#nav-sub { 
     background-position: 0px -160px; 
     background-repeat: no-repeat; 
     height: 40px; 
     overflow: hidden; 
    } 
    ul#nav-sub li.contact { 
     float: right; 
    } 
    ul#nav-sub li.contact a { 
     background-position: 0px -200px; 
     width: 200px; 
    }

HTML：

<div class="header"> 
    <ul id="nav"> 
     <li class="home"><a href="/">work [at] play vancouver</a></li> 
     <li class="services"><a href="/services" title="services">services</a></li> 
     <li class="toolbox"><a href="/toolbox" title="toolbox">toolbox</a></li>   
     <li class="work"><a href="/work#mattel" title="work">work</a></li> 
     <li class="about"><a href="/about" title="about">about</a></li> 
     <li class="insights"><a href="/think" title="insights">insights</a></li> 
    </ul> 
    <ul id="nav-sub"> 
     <li class="contact"><a href="/contact">contact work [at] play</a></li> 
    </ul> 
</div>

来源

2010-09-25 01:57:37

使用谷歌浏览器，右键单击并选择“检查元素”。有一个名为“computed css”的任务窗格，无论css如何到达（默认，内联，外部），它都能准确告诉您浏览器显示的内容。我用它来调试我一直在开发的CSS。其他浏览器可能具有相似的功能。

至于如何复制它？ CSS会相当简单。两行浮动div。每个div内部会有两个额外的div，一个向左浮动，一个向右浮动。玩边缘，直到你得到你喜欢的间距。

width: 100%; 
background-color: {color you want}; 
margin-left: ____; 
margin-right: ____;

等

至于标志，研究CSS的垂直对齐属性。这，与字体大小的夫妇应该给你你想要的效果。

来源

2010-09-24 23:20:57 colithium

+1用于检验计算样式！ – jwueller 2010-09-24 23:25:24

当我发现那个小功能时，从几个小时的挫折中拯救了我。 – colithium 2010-09-24 23:27:57

我每天都在工作中使用Firebug。有时候这非常有用。 – jwueller 2010-09-24 23:33:11

那么在workplay.com上有css文件http://workplay.com/files/css/css_09edd7837a8690967d3b6d7e136222f6.css，您可以通过查看源代码找到它。

如果您使用的是Firefox，那么下载并安装Firebug Plug-in。同样，如果您使用的是IE浏览器，则可以从Microsoft“IE Developer Toolbar”获得类似的插件。或者Chrome浏览器或Safari浏览器附带Web Page Inspector工具。所有使用都很简单

只需指向此插件的指针，然后单击其中一个您想知道css或HTML或JavaScript详细信息的元素。

在这里你可以通过改变并立即看到结果来实验。

来源

2010-09-24 23:32:25 hashtd

复制和粘贴下面的代码在你的编辑器，颜色和字体是不一样的，但是它看起来几乎喜欢你的头

<html> 
<head> 
    <style> 
     body { 
      font : 20px Arial; 
      margin: 0px; 
     } 

    div#header { 
    background : black; 
      color: white; 
      padding-top : 25px; 
    } 

     /*The title*/ 
    div#header h1 { 
    float: right; 
    margin-right: 100px; 
    border; 1px white; 
    font : 20px Arial; 
    } 

    div#header ul { 
    list-style: none; 
    height: 50px; 
    }   

    div#header li { 
    float: left; 
    width: 100px; 
    } 

    div#pink_area{ 
     background: pink; 
     margin-top; 0px; 
    }   

    div#pink_area ul { 
    list-style: none; 
    height: 50px; 
    }  

    div#pink_area li { 
    float: left; 
    width: 45%; 
    line-heigth: 20px; 
    text-align : center; 
    padding : 10px 
    } 
    </style> 
</head> 


<div id="header"> 
<h1>Work <small>[at]</small> play <small><sup>TM</sup></small></h1> 
<ul id="menu"> 
    <li>services</li> 
    <li>toolbox</li> 
    <li>work</li> 
    <li>about</li> 
    <li>insigths</li> 
</ul> 
    <div id="pink_area"> 
<ul> 
<li>Engaging digital experiences</li> 
<li>contact us</li> 
</ul> 
</div> 
</div> 
</html>

来源

2010-09-24 23:46:31

CSS：如何制作这个topheader？

回答

相关问题