html5 float的初应用

最新推荐文章于 2024-09-09 13:10:14 发布

小f要努力啦

最新推荐文章于 2024-09-09 13:10:14 发布

阅读量126

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/m0_51172014/article/details/115430031

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html5 float的初应用

来做一个小banner吧~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,ul,li{padding:0px; margin:0px}
        #banner{
            width: 685px;
            height: 310px;
            background-image: url("bg.png");
        }
        #footP{
            width: 100%;
            height:30px;
            background-color: magenta;
            float: left;
            margin-top: 280px;
        }
        #footP ul{
            list-style: none;
            float: right;
            margin-right: 10px;
        }
        #footP li{
            float: left;
            width:20px;
            height:20px;
            background-color: white;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            margin:5px;
        }
        #footP ul li:hover{
            background-color: teal;
        }
    </style>
</head>
<body>
    <div id="banner">
        <div id="footP">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
</body>
</html>

效果图如下：
（添加了hover效果，做得比较粗糙，与其他页面的超链接还没做）
在这里插入图片描述
主要要掌握float效果哦！

小f要努力啦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 float的初应用

html5 float的初应用来做一个小banner吧~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫

专栏目录