work6

最新推荐文章于 2022-06-20 17:46:55 发布

chuncuoji8215

最新推荐文章于 2022-06-20 17:46:55 发布

阅读量95

点赞数

原文链接：https://my.oschina.net/1824375992/blog/2246049

版权

使用HTML + CSS 实现以上布局

可以参照 float布局，和导航的例子

颜色，菜单可以按照自己的风格做修改

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>作业</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">
        .a1{
            /*去除a标签下划线*/
            text-decoration: none;
            color: #ffffff;
        }
        .a2{
            /*去除a标签下划线*/
            text-decoration: none;
            font-size: 25px;
        }
        .a3{
            position: fixed;
            right: 20%;
            top: 45%;
            font-size: 30px;
        }
        .c2{
            bottom: 0px;
        }
        .div0{
            width: 40%;
            height: 100%;
            background: #00ff00;
            left: 0px;
            position: fixed;
        }
        .div1{
            width: 100%;
            height: 50px;
            background: #ff0000;
            left: 0px;
            position: fixed;
        }
        .div2{
            width: 60%;
            height: 100%;
            background: #0000ff;
            right: 0px;
            position: fixed;
        }
        html body{
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        ul{
            /*去除ul标签前面的项目符号*/
            list-style-type: none;/*disc/circle/square/none*/
        }
        li{
            /*向左浮动*/
            float: left;
            width: 100px;
            /*文本居中*/
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="div0"></div>
    <div class="div2">我的
        <a href="#" class="a1 a3">我的float例子！</a>
    </div>
    <div class="div1">
        <ul>
            <li><a href="#" class="a2">我的商城</a></li>
            <li><a href="#" class="a1">首页</a></li>
            <li><a href="#" class="a1">合作案例</a></li>
            <li><a href="#" class="a1">联系我们</a></li>
        </ul>
    </div>
    <div class="c2 div1"></div>
</body>
</html>

转载于:https://my.oschina.net/1824375992/blog/2246049

chuncuoji8215

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
work6

使用HTML + CSS 实现以上布局可以参照 float布局，和导航的例子颜色，菜单可以按照自己的风格做修改 <!DOCTYPE html><html><head> <meta charset="utf-8" ...
复制链接

扫一扫