## *大佬，帮忙看一下！我这个浮动怎么老是不对啊？（完全是小白一个！刚入手不久）

最新推荐文章于 2024-07-25 11:52:08 发布

Vrenb

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量164

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Vrenb/article/details/105296161

版权

*大佬，帮忙看一下！我这个浮动怎么老是不对啊？（完全是小白一个！刚入手不久）

在这里插入图片描述
⬆上面这个是我想做的效果！
⬇下面这个是我做的效果！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{ background-color: #6d41a1;}
        *{
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none; color:#ffffff;
        }
        ul{
            list-style: none;
        }
        h1,h2,h3{
            font-size: 16px;    
        }
        .img{
            display: block;
        }

        .main{
            width: 500px;
            height: 246px;
            margin: 256px auto 256px;
            /* border: 1px solid black; */
        }
        .main .title{
            font-size: 56px;
            height: 99px;
            line-height: 99px;
            font-weight: bold ; color:white;
            margin-bottom:25px;
            text-align: center;
        }
        input{
            width: 423px;
            height: 35px;
            border-radius:25px;
            margin-left:30px;
        }
        .l{
            float:left
        }
        li{
            margin-top: 34px;
        }
        li:nth-of-type(1){
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>
            <h1 class="title">Google</h1>
        <div class="table">
                <input type="text" placeholder="🔍 在Google 上搜索，或者输入一个网址">
        </div>
            <ul>
                <li id="one">
                    <div class="img l">
                        <a href="#"><img src="./images/谷歌.jpg" alt="Google"></a>
                        <div class="centent"><a href="#"><p>Chrome网上...</p></a></div>
                    </div>
                </li>
                <li id="two">
                    <div class="img l">
                        <a href="#"><img src="./images/百度.jpg" alt="www.baidu.com"></a>
                       <div class="centent"><a href=""><p>百度</p></a></div>
                    </div>
                </li>
                <li id="three">
                    <div class="img">
                        <a href="#"><img src="./images/职教云.jpg" alt="职教云"></a>
                        <div class="centent"><a href=""><p>职教云</p></a></div>
                    </div>
                </li>
                <li id="frou">
                    <div class="img l">
                        <a href="#"><img src="./images/b站.jpg"alt="bilibili"></a>
                        <div class="centent"> <a href=""><p>B站</p></a></div>
                    </div>
                </li>
                <li id="five">
                    <div class="img l">
                        <a href="#"><img src="./images/w3c.jpg" alt="wcschool"></a>
                        <div class="centent"><a href=""><p>wcschool</p></a></div>
                    </div>
                </li>
                <li id="six">
                    <div class="img l">
                        <a href="#"><img src="./images/菜鸟.jpg" alt="菜鸟"></a>
                        <div class="centent"> <a href=""><p>菜鸟</p></a></div>
                    </div>
                </li>
                <li id="seven">
                    <div class="img l">
                        <a href="#"><img src="./images/斗鱼.jpg" alt="斗鱼"></a>
                        <div class="centent"><a href=""><p>斗鱼</p></a></div>
                    </div>
                </li>
                <li  id="eight">
                    <div class="img l">
                        <a href="#"><img src="./images/添加.jpg" alt="添加..."></a>
                        <div class="centent"><a href=""><p>添加快捷方式</p></a</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

这是我的代码！有大佬帮忙看一下，到底是哪有问题？
这个浮动，总是有问题！

Vrenb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
## *大佬，帮忙看一下！我这个浮动怎么老是不对啊？（完全是小白一个！刚入手不久）

*大佬，帮忙看一下！我这个浮动怎么老是不对啊？（完全是小白一个！刚入手不久）⬆上面这个是我想做的效果！⬇下面这个是我做的效果！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...
复制链接

扫一扫