当前位置： 文江博客话题详情

制作一个纯 CSS Dock

发布于 2024-12-11 02:16:16 字数 5005 浏览 1 评论 0原文

在玩完 CSS 3 后，我产生了一个疯狂的想法，用它制作一个 OS X 风格的底座（一个 DIV 容器，里面有元素，使用 CSS :hover 子类，鼠标悬停时尺寸会增加）。然而，我在实现它时遇到了一些奇怪的效果。到目前为止，这就是我尝试过的：

代码

<html>
<head>
<style>
body{
    margin:0;
}
.dockHolder{
    width:100%;
    position:absolute;
    text-align:center;
    display:block;
    bottom:0;
}
.dock{
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    text-align:center;
}
.dockItem{
    height:50%;
    display:inline-block;
    position:relative;
    bottom:0;
    vertical-align:bottom;
    text-align:center;

    transition-property:width, height;
    -o-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:linear;
    -o-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
    -webkit-transition-timing-function:linear;
}
.dockItem:hover{
    height:100%;
    width:auto;
}
</style>
</head>
<body>
<div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;">
    <div class="dock" style="background-color:lightgray;">
        <center>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="pony.png" /></div>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="bhs256.png" /></div>
        </center>
    </div>
</div>
</body>
</html>

我的测试页面位于 http://s.supuhstar.operaunite.com/s/content/testAnims.htm（与 Opera Unite 一起去世）如果你想看看我到目前为止所拥有的内容。

缺少的功能

意外影响包括：

  • 无法将 dock 元素放置在 dockHolder 元素的底部
  • dockItem 元素不 使用 CSS扩展宽度及其子图像
  • dockItem 和 dock 元素不会在 dockHolder 容器内居中（尝试过margin:auto;、box-pack:center;、box-align:center; 等）；只有
    HTML 标签有效
  • 在 Opera 和 Firefox 中（我已经放弃了 IE），dockItem 非常宽

预期效果 不存在的包括：

  • dockItem 一直保留在 dock 元素内，直到调整大小，此时它们会根据 dockHolder 的大小按比例增加元素，但是dock 元素保持相同的大小
  • dock 元素的宽度始终只足以包含其中的所有 dockItem，并且宽度永远不会小于所有 dockItem 及其边距的组合宽度。

问题

是否有人有解决方案可以修复意外效果并/或实现缺少的预期效果？

最终实现

以下是我最终解决方案的代码：

<!DOCTYPE html><html>
<head>
<style type='text/css'>
body{
    margin:0;
}
.dockHolder {
    position: fixed;
    text-align: center;
    bottom: 0; 
    left: 0;
    right: 0;
    height: 128px;
    line-height: 128px;
}

.dock {
    background:#CCCCCC;
    background:
        -o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    border: 1px solid gray;
    max-width:100%;
    vertical-align: bottom;
    line-height: 1em;
    padding: 0 8px;
    border-radius: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dockItem {
    display: inline;
    height: 50%;
    vertical-align: bottom;

    transition-property:width, height;
    -o-transition-property:width, height;
    -ms-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -ms-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    -ms-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
    height: 100%;
}
.dockItem:active {
    vertical-align:top;
    height:95%
}
</style>
</head>
<body>
    <div class="dockHolder" style="height:128px;line-height:128px;">
        <span class="dock">
            <img class="dockItem" src="pony.png"/>
            <img class="dockItem" src="bhs256.png"/>
            <img class="dockItem" src="mcgrass.png"/>
        </span>
    </div>

</body>
</html>

工作示例（可能会过时）： http://admin.s.supuhstar.operaunite.com/s/content/testDock.html（与 Opera Unite 一起去世）

原文

After playing with CSS 3, I had the crazy idea to make an OS X-style dock with it (a DIV container with elements inside it, which, using the CSS :hover subclass, increase in size upon mouseover). However, I'm running into some strange effects when implementing it. So far, this is what I've tried:

Code

<html>
<head>
<style>
body{
    margin:0;
}
.dockHolder{
    width:100%;
    position:absolute;
    text-align:center;
    display:block;
    bottom:0;
}
.dock{
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    text-align:center;
}
.dockItem{
    height:50%;
    display:inline-block;
    position:relative;
    bottom:0;
    vertical-align:bottom;
    text-align:center;

    transition-property:width, height;
    -o-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:linear;
    -o-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
    -webkit-transition-timing-function:linear;
}
.dockItem:hover{
    height:100%;
    width:auto;
}
</style>
</head>
<body>
<div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;">
    <div class="dock" style="background-color:lightgray;">
        <center>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="pony.png" /></div>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="bhs256.png" /></div>
        </center>
    </div>
</div>
</body>
</html>

My test page is at http://s.supuhstar.operaunite.com/s/content/testAnims.htm(died with Opera Unite) if you wanna see what I have so far.

Missing functionality

Unexpected effects include:

  • Inability to place the dock element at the bottom of the dockHolder element
  • dockItem element not expanding width-wise along with its child image
  • dockItem and dock elements will not center inside the dockHolder container with CSS (tried margin:auto;, box-pack:center;, box-align:center;, etc.); only the <center> HTML tag works
  • In Opera and Firefox (I've given up on IE), dockItems are extremely wide

Intended effects that are not present include:

  • dockItems stay within the dock element until resizing, at which time they increase proportionally to the size of the dockHolder element, but the dock element stays the same size
  • The dock element is constantly only wide enough to contain all the dockItems within it, and never wider not shorter than the combined widths of all dockItems and their margins.

Question

Does anyone have a solution that will fix the unexpected effects andor implement the absent intended effects?

Final implementation

Below is the code of my final solution:

<!DOCTYPE html><html>
<head>
<style type='text/css'>
body{
    margin:0;
}
.dockHolder {
    position: fixed;
    text-align: center;
    bottom: 0; 
    left: 0;
    right: 0;
    height: 128px;
    line-height: 128px;
}

.dock {
    background:#CCCCCC;
    background:
        -o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    border: 1px solid gray;
    max-width:100%;
    vertical-align: bottom;
    line-height: 1em;
    padding: 0 8px;
    border-radius: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dockItem {
    display: inline;
    height: 50%;
    vertical-align: bottom;

    transition-property:width, height;
    -o-transition-property:width, height;
    -ms-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -ms-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    -ms-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
    height: 100%;
}
.dockItem:active {
    vertical-align:top;
    height:95%
}
</style>
</head>
<body>
    <div class="dockHolder" style="height:128px;line-height:128px;">
        <span class="dock">
            <img class="dockItem" src="pony.png"/>
            <img class="dockItem" src="bhs256.png"/>
            <img class="dockItem" src="mcgrass.png"/>
        </span>
    </div>

</body>
</html>

Working example (might go out of date): http://admin.s.supuhstar.operaunite.com/s/content/testDock.html (died with Opera Unite)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

王权女流氓 2024-12-18 02:16:16

这怎么样？

HTML:

<div class="dockbg"></div>
<div class="dock">
    <img src="foo.png">
    <img src="bar.png">
</div>

CSS:

.dockbg {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: #bbb;
}

.dock {
    position: fixed;
    text-align: center;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 100px;
    line-height: 100px;
}

.dock img {
    display: inline-block;
    vertical-align: bottom;
    height: 50%;
    padding: 0 5px;
    /* + your animation properties */
}


.dock img:hover {
    height: 100%;
}

现场演示: http://jsfiddle.net/ simvidas/QM7M7/3/show/

How's this?

HTML:

<div class="dockbg"></div>
<div class="dock">
    <img src="foo.png">
    <img src="bar.png">
</div>

CSS:

.dockbg {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: #bbb;
}

.dock {
    position: fixed;
    text-align: center;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 100px;
    line-height: 100px;
}

.dock img {
    display: inline-block;
    vertical-align: bottom;
    height: 50%;
    padding: 0 5px;
    /* + your animation properties */
}


.dock img:hover {
    height: 100%;
}

Live demo: http://jsfiddle.net/simevidas/QM7M7/3/show/

回复 原文
月下伊人醉 2024-12-18 02:16:16
  • 对我来说，问题来自于你没有指定一个固定的
    宽度尺寸。我的想法是取消dockItem类，你不需要它。
    直接使用 CSS img 类。
  • 要使元素居中，请使用“margin : auto 0px auto 0px;”。
  • 首先，使用重置，它将帮助您正确执行此操作： http ://html5doctor.com/html-5-reset-stylesheet/#comment-18168
  • 你应该显示：块；和浮动：左；比显示：inline-block；
  • 您应该使用
      和

    • 元素来帮助您。
  • For me the problem comes from the fact that you don't specify a fixed
    width size. My idea is cancel the dockItem class , you don't need it.
    Play with an CSS img class directly.
  • To center your element use "margin : auto 0px auto 0px;".
  • First of it, use a reset, it will help you to do it correctly : http://html5doctor.com/html-5-reset-stylesheet/#comment-18168
  • you should you a display:block; and float:left; than the display:inline-block;
  • you should you a <ul> and <li> element to help you.
回复 原文
|煩躁 2024-12-18 02:16:16

使用 javascript 和 css 使悬停图标前后的图标也更大一点，以获得更流畅的动画;)

Use javascript and css to make the icons before and after the hovered icon a little bigger too for a smoother animation ;)

回复 原文
~没有更多了~

关于作者

微暖i

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

娇女薄笑

文章 0 评论 0

biaggi

文章 0 评论 0

xiaolangfanhua

文章 0 评论 0

rivulet

文章 0 评论 0

我三岁

文章 0 评论 0

薆情海

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文