前端Day04_natus eos-CSDN博客

本文链接：https://blog.csdn.net/lllamas/article/details/131650416

01-盒子模型

07-解决pedding影响盒子大小问题

08-flex布局

09-flex

10-定位补充

11-小米布局练习

12-浮动

13-float讲解

14-float问题解决办法

15-渐变

16-字体图标

17-媒体查询

18-默认外边距

<body>
woshinsaxnsj

<ul>
<li>cnidsjkjcdscndskcm</li>
</ul>
</body>
19-2d转换

代码：

<!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>
.one {
position: absolute;
width: 50px;
height: 50px;
top: 50px;
left: 50px;
}
.one:hover{
cursor: pointer;
}
.father{
position: relative;
width: 1500px;
height: 4000px;
display: flex;
justify-content: space-between ;
}
.son:hover {
cursor: pointer;
}
.son1{
position: absolute;
top: 60px;
left: 300px;
}
.son2{
position: absolute;
top: 60px;
left: 400px;
}
.son3{
position: absolute;
top: 60px;
left: 500px;
}
.son4{
position: absolute;
top: 60px;
left: 550px;
}
.son5{
position: absolute;
top: 60px;
left: 620px;
}
.son6{
position: absolute;
top: 60px;
left: 680px;
}
.son7{
position: absolute;
top: 60px;
left: 730px;
}
.son8{
position: absolute;
top: 60px;
left: 800px;
}
.son9{
position: absolute;
top: 60px;
left: 880px;
}
.son10{
position: absolute;
top: 40px;
left: 980px;
}
{
box-sizing: border-box;
}

div.son10 {
padding: 10px 0;
}

form {
position: relative;
width: 300px;
margin: 0 auto;
}

input,button {
border: none;
outline: none;
}

.son10 input {
width: 100%;
height: 42px;
padding-left: 13px;
border: 2px solid #c5464a;
border-radius: 19px;
background: transparent;
}

.son10 button {
height: 45px;
width: 42px;
cursor: pointer;
position: absolute;
background: #c5464a;
border-radius: 0 19px 19px 0;
width: 60px;
right: -18PX;
top: 1px;
}
.son10 button:hover {
background-color: #c7585c;
}
.son10 button:before {
content: "搜索";
font-size: 13px;
color: #F9F0DA;
}
.son11{
position: absolute;
width: 250px;
height: 500px;
top: 110px;
left: 50px;
background-color:cadetblue;
}
.an1{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
.an2{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 50px;
left: 0px;
}
.an3{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 100px;
left: 0px;
}
.an4{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 150px;
left: 0px;
}
.an5{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 200px;
left: 0px;
}
.an6{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 250px;
left: 0px;
}
.an7{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 300px;
left: 0px;
}
.an8{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 350px;
left: 0px;
}
.an9{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 400px;
left: 0px;
}
.an10{
font-size: 20px;
text-align: center;
width: 250px;
height: 50px;
position: absolute;
top: 450px;
left: 0px;
}
.an:hover{
cursor: pointer;
background-color: #c7585c;
}
.son12{
width: 1000px;
height: 500px;
background-color: wheat;
position: absolute;
top: 110px;
left: 300px;
}
.son12 img{
width: 1000px;
height: 500px;
position: absolute;
}
</style>
</head>
<body>
<div class="father">
<img src="./OIP-C.jpg" class="one" alt="">
<div class="son1 son">Xiaomi手机</div>
<div class="son2 son">Redmi手机</div>
<div class="son3 son">电视</div>
<div class="son4 son">笔记本</div>
<div class="son5 son">平板</div>
<div class="son6 son">家电</div>
<div class="son7 son">路由器</div>
<div class="son8 son">服务中心</div>
<div class="son9 son">社区</div>
<div class="son10 son">
<form action="" method="post">
<input placeholder="请输入..." name="keyword" type="text">
<button type="submit"></button>
</form>
</div>
<DIV class="son11">
<div class="an1 an">手机</div>
<div class="an2 an">电视</div>
<div class="an3 an">家电</div>
<div class="an4 an">笔记本平板</div>
<div class="an5 an">出行穿戴</div>
<div class="an6 an">耳机音响</div>
<div class="an7 an">健康儿童</div>
<div class="an8 an">生活箱包</div>
<div class="an9 an">智能路由器</div>
<div class="an10 an">电源配件</div>
</DIV>
<div class="son12">
<img src="./01.jpeg" class="ant">
</div>
</div>
</body>
</html>