*大佬,帮忙看一下!我这个浮动怎么老是不对啊?(完全是小白一个!刚入手不久)
⬆上面这个是我想做的效果!
⬇下面这个是我做的效果!
<!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>
这是我的代码!有大佬帮忙看一下,到底是哪有问题?
这个浮动,总是有问题!