1:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box1{
display: flex;
border: 1px solid blue;
border-radius: 5px;
width: 800px;
}
.bin{
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
font-size: 12px;
cursor: pointer;
}
.bin:hover{
background-color: darkblue;
}
.input{
width: 630px;
border: none;
padding: 10px;
font-size: 10px;
}
.input:focus{
outline: none;
}
.img:hover{
opacity: 0.5;
}
</style>
<body>
<div class="box1">
<input type="text" class="input">
<img src="./img/相机.jpeg" class="img" style="height: 60px; cursor: pointer">
<button class="bin">百度一下</button>
</div>
</body>
</html>效果图：
2:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.zhuti{
display: flex;
flex-direction: column;
align-items: center;
border: 2px dashed black;
border-radius: 8px;
width: 1000px;
}
.span{
display: flex;
justify-content: center;
align-items: center;
height: 180px;
cursor: pointer;
position: relative;
}
.touch{
position: relative;
width: 150px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.touch::before{
content: '';
position: absolute;
top: 50%;
left: 0%;
width: 100%;
height: 1px;
background-color: gainsboro;
}
.touch::after{
content: '';
position: absolute;
top: 0%;
left: 50%;
height: 100%;
width: 1px;
background-color: gainsboro;
}
.btn{
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
font-size: medium;
position: relative;
top: 70px;
color: white;
background-color: blue;
}
.btn:hover{
background-color: darkblue;
}
</style>
<body>
<div class="zhuti">
<input type="file" id="file-upload" class="input">
<span for="file-upload" class="span">
<div class="touch"></div>
</span>
<button class="btn">选择文件</button>
</div>
</body>
</html>效果图：
3:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_3</title>
<style>
.search {
width: 800px;
display: flex;
align-items: center;
border: 2px solid orange;
border-radius: 4px;
background-color: white;
}
.drop-btn {
background-color: white;
color: gray;
font-size: 16px;
border: none;
cursor: pointer;
}
.content {
display: none;
position: absolute;
background-color: white;
}
.content a {
color: #7c7c7c;
padding: 12px 16px;
display: block;
}
.dropdown:hover .content {
display: block;
}
.input {
flex-grow: 1;
border: none;
padding: 10px;
}
.btn {
background-color: orange;
color: white;
border: none;
border-radius: 0 4px 4px 0;
padding: 10px 20px;
cursor: pointer;
}
.input:focus {
outline: none;
}
.btn:hover {
background-color: darkorange;
}
</style>
</head>
<body>
<div class="search">
<div class="dropdown">
<button class="drop-btn">宝贝</button>
<div class="content">
<a href="#" style="text-decoration:none">图片</a>
<a href="#" style="text-decoration:none">视频</a>
</div>
</div>
<input type="text" class="input" placeholder="手机壳">
<button class="btn">搜索</button>
</div>
</body>
</html>效果图：
4:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>number_4</title>
<style>
.fixed {
position: fixed;
top: 0;
left: 0;
width: 85px;
background-color: white;
color: black;
border-right: 2px solid gray;
border-radius: 10px;
text-align: center;
}
.menu {
padding: 10px;
display: block;
}
.icon {
width: 40px;
display: flex;
position: relative;
left: 10px;
}
</style>
</head>
<body>
<div class="fixed">
<div class="menu"><img src="./img/联系.png" class="icon">联系客服</div>
<div class="menu"><img src="./img/购物车.png" class="icon">购物车</div>
<div class="menu"><img src="./img/官方.png" class="icon">官方客服</div>
<div class="menu"><img src="./img/反馈.png" class="icon">反馈</div>
<div class="menu"><img src="./img/举报.png" class="icon">举报</div>
<div class="menu"><img src="./img/回顶部.png" class="icon">回顶部</div>
</div>
</body>
</html>效果图：
5:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.image-slider {
position: relative;
width: 300px;
height: 500px;
margin: 50px auto;
border-radius: 10px;
overflow: hidden;
}
.image-container img {
width: 300px;
height: 500px;
display: block;
}
.points {
position: absolute;
bottom: 15px;
left: 40%;
display: flex;
}
.point {
height: 10px;
width: 10px;
background: #ddd;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.point.active {
background: orange;
}
</style>
</head>
<body>
<div class="image-slider">
<div class="image-container">
<img src="./img/蝙蝠侠.png" alt="image"/>
</div>
<div class="points">
<span class="point"></span>
<span class="point active"></span>
<span class="point"></span>
</div>
</div>
</body>
</html>效果图：
6:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.poster {
width: 450px;
height: 600px;
margin: 0 auto;
background-image: url('./img/2.png');
}
.header-cell {
width: 150px;
background-color: #dc1d1d;
color: #FFF;
text-align: center;
font-size: 20px;
padding: 10px;
border: 0px;
border-radius: 30px;
position: relative;
top: -20px;
}
td {
width: 200px;
text-align: center;
}
.link {
width: 100px;
height: 30px;
display: inline-block;
padding: 10px 20px;
background-color: #FFF;
border: 1px solid #ff7d7d;
color: #ff4a4a;
border-radius: 4px;
text-decoration: none;
}
.link:hover {
background: #bdbdbd;
}
.content {
position: relative;
top: -50px;
}
.content-left {
position: relative;
left: 30px;
}
.content-right {
position: relative;
left: -30px;
}
</style>
<body>
<table class="poster">
<tr>
<td colspan="2"><button class="header-cell">精选商品</button></td>
</tr>
<tr class="content">
<td class="content-left"><a href="#link1" class="link">热点商品</a></td>
<td class="content-right"><a href="#link2" class="link">热点商品</a></td>
</tr>
<tr>
<td class="content-left"><a href="#link3" class="link">热点商品</a></td>
<td class="content-right"><a href="#link4" class="link">热点商品</a></td>
</tr>
<tr>
<td class="content-left"><a href="#link5" class="link">热点商品</a></td>
<td class="content-right"><a href="#link6" class="link">热点商品</a></td>
</tr>
</table>
</body>
</html>效果图：
7:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<head>
<style>
.box-2{
background-color: aliceblue;
}
.box-3{
background-color: aliceblue;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="box-2">
<table>
<tr>
<td>淘工厂.良心工厂货</td>
</tr>
<tr>
<td rowspan="2"><img src="./img/胶带.png"></td>
<td>纳米魔力双面胶1卷</td>
<td rowspan="2"><img src="./img/风扇.png"></td>
<td> 75pvc排气风口防风罩110不...和风行机械..</td>
</tr>
<tr>
<td>￥6.05</td>
<td>￥13.5</td>
</tr>
</table>
</div>
<tr>
<table class="box-3">
<tr><td>拍卖捡漏</td></tr>
<tr>
<td><img src="./img/手表.png"></td>
<td><img src="./img/酒.png"></td>
</tr>
<tr>
<td>￥1起</td>
<td>￥200起</td>
</tr>
</table>
</tr>
</table>
</body>
</html>效果图：
