css笔记07

最新推荐文章于 2025-05-10 16:22:55 发布

转载最新推荐文章于 2025-05-10 16:22:55 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/686991/blog/349189

本文提供了一个简单的网页布局示例，使用HTML与CSS实现固定宽度的内容区域，并应用了绝对定位和固定定位来创建顶部、底部及关注我们的浮动条。通过设置透明度和层叠顺序等属性，使页面元素在不同浏览器中保持一致的显示效果。

为什么80%的码农都做不了架构师？>>>

13 简单样式代码
<html>
    <head>
        <title>menu菜单</title>
        <style type="text/css">
            *{
                padding:0px;
                margin:0px;
                font-size:12px;
            }
            body{
                /* padding:50px; */
            }
            #header,#bottom{
                height:70px;
                background:#811;
                color:#fff;
            }
            #nav{
                height:30px;
                background:#981;
                color:#fff;
            }
            #content{
                height:600px;
                background:#eee;
                color:#fff;
            }
            #c_header,#c_nav,#c_content,#c_bottom{
                position:absolute;
                width:1000px;
                left:50%;
                margin-left:-500px;
                border:1px solid #44f;
            }
            #gzwm{
                height:40px;
                /*透明效果,第一个IE,第二个firefox,第三个CSS标准 */
                filter:alpha(opacity-80);
                -moz-opacity:0.8;
                opacity:0.8;
                background:#000;
                /*第三种position*/
                position:fixed;
                bottom:0px;
                width:100%;
                color:#fee;
                /*fixed建议设置如下选项 */
                z-index:999;
            }
        </style>
    </head>
    <body>
        <div id="gzwm">
        关注我们
        </div>
        <div id="header">
            <div id="c_header">顶部图片</div>
        </div>
        <div id="nav">
            <div id="c_nav">导航内容</div>
        </div>
        <div id="content">
            <div id="c_content">content</div>
        </div>
        <div id="bottom">
            <div id="c_bottom">底部信息</div>
        </div>
    </body>
</html>

转载于:https://my.oschina.net/686991/blog/349189