常见前端错误

最新推荐文章于 2024-07-02 17:28:43 发布

筑梦悠然

最新推荐文章于 2024-07-02 17:28:43 发布

阅读量347

点赞数 1

本文链接：https://blog.csdn.net/wuhuagu_wuhuaguo/article/details/74279125

版权

例1:响应式布局

<!doctype html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>点击获取评论内容</title>
<style type="text/css">
	*{
		box-sizing: border-box;
	}
	html,body{
		width: 100%;
	}
	.wap{
		width: 98%;
		margin: 0 auto;
		border: 1px solid #888888;
		border-radius: 3px;
		text-align: center;
	}
	.title{
		width: 100%;
		border-bottom: 1px solid #888888;
	}
	.pinglun{
		width: 100%;
		text-align: center;
		padding: 10px;
	}
	.wap .fuzhizhantie{
		width: 90%;
		margin: 10px auto;
		max-width: 200px;
		background: #0000ff;
		color: #ffffff;
		border-radius: 3px;
	}
	.renwu{
		width: 90%;
		margin: 10px auto;
		background: #0000ff;
		color: #ffffff;
		border-radius: 3px;
	}
	.bottom-area{
		text-align: center;
	}
	.bottom-area p{
		color: #ff0000;
	}
</style>
</head>

<body>
<div class="wap">
	<div class="title">
		游戏很不错
	</div>
	<div class="pinglun">
		好游戏，非常适合坐车玩的游戏。很喜欢，玩了很长时间了，会一直玩的！
	</div>
	<button class="fuzhizhantie">一键复制刷新</button>
</div>
<div class="bottom-area">
	<p>每次刷机前，请做以下2个任务。页面打开时间务必超过一分钟！！！</p>
	<p>(任务执行日期：7月4号到7月10号)</p>
	<button class="renwu">任务1一键复制，贴到浏览器访问，停留超过一分钟</button>
	<button class="renwu">任务2一键复制，贴到浏览器访问，停留超过一分钟</button>
	<br>
	<p>靖江，辽源，秦皇岛做任务3和任务4</p>
	<button class="renwu">任务3一键复制，贴到浏览器访问，停留超过一分钟</button>
	<input class="renwu" type="button" value="任务4一键复制，贴到浏览器访问，停留超过一分钟"/>
</div>
</body>
</html>

1、为何class=wap里面3个，为何在3的外面text-align3个都可以居中对齐，但是如果分别给这3个加text-align，按钮没办法居中呢？

因为给button设置，起作用的是button的内容，为他的父级设置，起作用的是他的父级的内容button标签。修改如下：对button加个display:block;

2、<button class="renwu">任务3一键复制，贴到浏览器访问，停留超过一分钟</button>与<input class="renwu" type="button" value="任务4一键复制，贴到浏览器访问，停留超过一分钟"/>区别？建议使用button对，里面的内容可以自适应

例2：