盒子模型

最新推荐文章于 2021-12-22 14:39:04 发布

拙劣。

最新推荐文章于 2021-12-22 14:39:04 发布

阅读量128

点赞数

分类专栏：边框盒子

本文链接：https://blog.csdn.net/weixin_44017414/article/details/85100366

版权

边框同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

盒子

1 篇文章 0 订阅

订阅专栏

①设置屏幕满屏背景，用 html，body 设置 100%的宽高和背景颜色即可。

②盒子在背景中设置垂直margin，则背景会塌陷，应该直接在背景中设置padding。

③若使盒子居中，给盒子设置margin：0px（上下） auto（左右，居中自适应）

④字的中间加隔断 |，用border而非符号，用padding调距离。

⑤word-spcing 改变单词之间的距离，letter-spacing改变字母之间的距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>长盒子</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			html,body{
				width: 100%;
				height: 100%;
				background-color: black;
			}
			.a{
				padding-top: 500px;
				
			}
			.box{
				width: 1000px;
				background-color: #004003;
				margin:0px auto;
				padding: 20px 0px 20px 40px;
				
			}
			[href]{
				color:white;
				text-decoration: none;
				border-right:2px solid white ;
				padding-right: 15px;
				padding-left: 5px;
			}
		</style>
	</head>
	<body>
		<div class="a">
			<div class="box">
				<a href="https://mp.csdn.net/">首页</a>
				<a href="#">中国军情</a>				
				<a href="#">国际军情</a>				
				<a href="#">军事图库</a>				
				<a href="#">论坛</a>				
				<a href="#">博客</a>				
				<a href="#">钓鱼岛动态</a>				
				<a href="#">南海局势</a>				
				<a href="#">军事图书</a>				
				<a href="#">微博</a>				
				<a href="#">排行</a>				
				<a href="#">航空</a>				
				<a href="#" style="border: none;">回顾页面</a>
			</div>
		</div>
	</body>
</html>

运行效果如下：

拙劣。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

①设置屏幕满屏背景，用 html，body 设置 100%的宽高和背景颜色即可。②盒子在背景中设置垂直margin，则背景会塌陷，应该直接在背景中设置padding。③若使盒子居中，给盒子设置margin：0px（上下） auto（左右，居中自适应）④字的中间加隔断 |，用border而非符号，用padding调距离。⑤word-spcing 改变单词之间的距离，lette...
复制链接

扫一扫