css简单练习2

最新推荐文章于 2022-04-09 17:31:18 发布

crraxx

最新推荐文章于 2022-04-09 17:31:18 发布

阅读量247

点赞数 2

分类专栏：网页文章标签： html

本文链接：https://blog.csdn.net/crraxx/article/details/109366745

版权

网页专栏收录该内容

18 篇文章 5 订阅

订阅专栏

css简单练习2

设置图片切换效果，如某宝首页下图。
按钮可以先使用div做成正方形，其中加入“>”和“<”
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}			
			
			#box {
				width: 1040px;
				height: 560px;
				background-image: url(img/TB183NQapLM8KJjSZFBSutJHVXa.jpg);
				background-repeat: no-repeat;
				background-size: 1040px;560px;
			}
			
			.c1,.c2{
				opacity: 0.45;
				width: 40px;
				height: 40px; 
				font-size: 35px;
				position: relative;
				top: 250px;
			}
			.c1 {								
				float: left;	
			  }
			.c2 {
				float: right;							
			  }			
			
		</style>
	</head>
	<body>
		<div id="box">
			<div >
				<input type="text" class="c1" value="&lt"/>				
			</div>
				
			<div >
				<input type="text" class="c2" value="&gt"/>
			</div>
			
		</div>
	</body>
</html>

运行结果：

在这里插入图片描述

crraxx

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
css简单练习2

css简单练习2设置图片切换效果，如某宝首页下图。按钮可以先使用div做成正方形，其中加入“>”和“<”代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; }
复制链接

扫一扫