web前端

伍叁_

已于 2024-04-11 11:19:23 修改

阅读量162

点赞数 1

文章标签：前端

于 2024-04-07 18:09:30 首次发布

本文链接：https://blog.csdn.net/2301_76311591/article/details/137472724

版权

原图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
	.box1{
		width:900px;
		height:60px;
		border: 2px solid blue;
		margin: auto;
		position: relative;
		border-radius: 10px;
	}
	.box2{
		width: 45px;
		height: 45px;
		position:absolute;
		left:650px;
		top:5px;
	}
	.box2>img{
		width: 45px;
		height: 45px;
	}
	.box3{
		width: 200px;
		height: 60px;
		border: 1px solid black;
		border-radius: 10px;
		color: aliceblue;
		line-height: 60px;
		margin: auto;
		background-color:blue;
		text-align: center;
		font-size: 20px;
		position:absolute;
		left:50px;
		top:-5px;
	}
	</style>
	<body>
		<div class="box1"> <div class="box2"> <div class="box3">百度一下</div><img src="img/cc33816ade149938cc784c1fd141703.png"></div> </div>
	</body>
</html>

效果图

原图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box4{
			width: 800px;
			height: 200px;
			border: 1px solid darkgrey;
			line-height: 200px;
			font-size: 15px;
			border-radius: 10px;
			color: darkgrey;
			margin: auto;
			text-align: center;
			
		}
		.box5{
			width: 200px;
			height: 60px;
			border: 1px solid black;
			border-radius: 10px;
			line-height: 60px;
			color: white;
			margin: auto;
			background-color: royalblue;
			text-align: center;
			position: absolute;
			left: 670px;
			top:250px;
		}
	</style>
	<body>
		<div class="box4">拖拽图片到这里 </div>
		<div class="box5">选择文件</div>
	</body>
</html>

效果图

原图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box6{
			width:1000px;
			height:50px;
			border: 2px solid orange;
			margin: auto;
			position: relative;
			border-radius: 10px;
			
		}
		#fav{
			font-size: 25px;
			margin: auto;
		}
		.box7{
			width: 150px;
			height: 46px;
			border-radius: 10px;
			color: white;
			line-height: 46px;
			margin: auto;
			background-color:orange;
			text-align: center;
			font-size: 20px;
			position:absolute;
			left:850px;
			top:2px;
		}
	</style>
	<body>
		<div class="box6">
			<div>
			<select name="fav" id="fav">
			    <option>宝贝</option>
			    <option>小宝贝</option>
			</select>
			</div>
			<div class="box7">搜索</div>
		</div>
	</body>
</html>

效果图

原图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box-1{
			height: 1200px;
			border: 1px solid black;
		}
		.box8{
			width: 80px;
			height: 200px;
			border-radius: 10px;
		    background-color: grey;
			font-size: 18px;
			cursor: pointer;
			line-height: 80px;
			text-align: center;
			position: fixed;
			right: 60px;
			bottom: 100px;
		}
	</style>
	<body>
		<div class="box-1"></div>
		<div class="box8"><div><img width=40px height="40px" src="img/82d58dab443013185fb14721e3e09a3.png"></div>联系客服</div>
	</body>
</html>

效果图

原图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box-2{
			background-color: aliceblue;
		}
		.box-3{
			background-color: aliceblue;
		}
	</style>
	<body>
		<table>
			<tr><td>
			<div class="box-2">
				<table>
					<tr>
						<td>淘工厂.良心工厂货</td>
					</tr>
					<tr>
						<td rowspan="2"><img src="img/4d77fbaa525ccc9ed104fffca8cf71b.png"</td>
						<td>纳米魔力双面胶1卷</td>
						<td rowspan="2"><img src="img/c94d9b603e9221bd7e0906b5df927cf.png"</td>
						<td> 75pvc排气风口防风罩110不...和风行(机械..</td>
					</tr>
					<tr><td>￥6.05</td>
					<td>￥13.5</td></tr>
				</table>
			</div>
			</td></tr>
			<tr>
				<table class="box-3">
					<tr><td>拍卖捡漏</td></tr>
					<tr>
						<td><img src="img/7239d867f38f002e69fa90f9ba12f6c.png"></td>
					    <td><img src="img/be5219a2a3bafc9f5f1afee64fa8396.png"></td>
					</tr>
					<tr>
						<td>￥1起</td>
					    <td>￥200起</td>
					</tr>
				</table>
			</tr>
		</table>
	</body>
</html>

效果图

原图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
			
		.box-4{
			width: 80px;
			height: 60px;
			border-radius: 15px;
			line-height: 60px;
			margin: auto;
			background-color: red;
			text-align: center;
		}
		.box-5{
			width: 100px;
			height: 60px;
			border: 1px solid orangered;
			border-radius: 10px;
			line-height: 60px;
			color: orangered;
			margin: auto;
			text-align: center;
		}
	</style>
	<body>
		<div>
			<table>
				<tr>
					<td colspan="2" class="box-4">精选热点</td>
				</tr>
				<tr>
					<td class="box-5">电视柜</td>
					<td class="box-5">脸部卸妆油</td>
				</tr>
				<tr>
					<td class="box-5">苏泊尔无烟锅</td>
					<td class="box-5">电动牙刷</td>
				</tr>
				<tr>
					<td class="box-5">衣服烘干机</td>
					<td class="box-5">燃气壁挂炉</td>
				</tr>
				<tr>
					<td class="box-5">鱼竿</td>
					<td class="box-5">防尘鞋架</td>
				</tr>
			</table>
		</div>
	</body>
</html>

效果图

太极图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	        @keyframes myRote {
	            from {
	                transform: rotate(0deg);
	            } to {
	                transform: rotate(360deg);
	            }
	        }
	        body {
	            background-color: #999;
	        }
	        .box {
	            width: 0px;
	            height: 300px;
	            border-left: 150px solid #000000;
				border-right: 150px solid #FFFFFF;
	            border-radius: 50%;
	            position: relative;
	            animation: myRote 4s linear infinite;
				box-shadow: 0 0 8px 2px white;

	        }
	        .box::before {
	            content: "";
	            display: block;
	            width: 50px;
	            height: 50px;
	            border: 50px solid #000000;
	            background-color: #FFFFFF;
	            border-radius: 50%;
	            position: absolute;
	            left: -75px;
	        }
	        
	        .box::after {
	            content: "";
	            display: block;
	            width: 50px;
	            height: 50px;
	            border: 50px solid #FFFFFF;
	            background-color: #000000;
	            border-radius: 50%;
	            position: absolute;
	            top: 150px;
	            left: -75px;
	        }
	    </style>
	<body>
	    <div class="box">
	
	    </div>
	</body>
</html>