前端第二周

最新推荐文章于 2024-07-11 17:37:13 发布

yuan200424

最新推荐文章于 2024-07-11 17:37:13 发布

阅读量364

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/yuan200424/article/details/134747095

版权

提交按扭:<form name=" input" action="路径" method="get">

</form>

怪异盒模型

box-sizing:content-box(默认值); border-box

弹性盒子:1,子元素默认横向排布.

2,行内元素变成块状元素

3,只有一个元素时候,magin:auto自动居中.

修改主轴方向:flex-direction:column;竖直方向,row水平方向,row-reverse方向取反,column-reverse.

调整主轴方向:justify-content:flex-start; flex-end,center,space-between两端对齐,srace-arounddeng等距相隔.

调整侧轴:align-items:flex-end; flex-start,center

侧轴不支持:space-between ,space-around

折行与行间距:flex-wrap:wrap;

align-content:flex-start; ,flex-end,center,space-around,space-between

平移transform:translate(); 放缩:transform:scale(); 旋转:transform:rotate();

&emsp; 占据的宽度正好是1个中文宽度

文本居中text-indent:center;

文本缩进:text-indent:20px;

及时当勉励,岁月不待人.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin:0;
			}
			.box{
				height: 900px;
				width:500px;
				margin: 0 auto;
				display: flex;
				background-color: yellow;
				flex-direction: column;
			}
			header{
				height: 128px;
				background-color: black;
				display: flex;
			}
			header i{
				width: 100px;
				height: 128px;
				line-height: 128px;
				text-align: center;
				color: aliceblue;
			}
			header span{
				flex: 1;
				height: 128px;
				line-height: 128px;
				color: aliceblue;
			}
			footer{
				height: 124px;
				background-color: gray;
				display: flex;
			}
			footer div{
			flex: 1;
			border: 1px solid red;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			color: aliceblue;
			}
			footer div p{
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			footer div span{
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			footer div:hover{
				color: #06a9ee;
			}
			section{
				flex: 1;
			}
			.main{
				display: flex;
				height: 100px;
				background-color: black;
				justify-content: space-around;
				align-items: center;
			}
			.main div{
				width: 60px;
				height: 100px;
				display: flex;
				 flex-direction: column; 
				justify-content: space-around;
				color: aliceblue;
			}
			.main div p{
				font-size:20px;
				text-align: center;
			}
			.main div span{
				font-size: 20px;
				text-align: center;
			}
			.list{
				display: flex;
				flex-wrap: wrap;
				background-color: aliceblue;
			}
			.list div{
				width: 25%;
				height: 150px;
				border: 1px solid red;
				box-sizing:border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.list div p{
				height: 70px;
				line-height: 70px;
				text-align: center;
				font-size: 40px;
				color: bisque;
			}
			.list div span{
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
			.pic img{
			width: 100%;
			height:150px;
		
			}
		</style>
	</head>
	<body>
		<div class="box">
			<header>
				<i>1111</i>
				<span>账单</span>
				<i>2222</i>
				<i>3333</i>
			</header>
			<section>
				<div class="main">
					<div>
					<p>4444</p>	
					<span>扫一扫</span>
					</div>
					<div>
						<p>4444</p>
						<span>扫一扫</span>
					</div>
					<div>
						<p>4444</p>
						<span>扫一扫</span>
					</div>
					<div>
						<p>4444</p>
						<span>扫一扫</span>
					</div>
				</div>
				<div class="list">
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
					<div>
						<p>9999</p>
						<span>信用卡还款</span>
					</div>
				</div>
				<div class="pic">
					<img src="img/prj01.jpg"/>
				</div>
			</section>
			<footer>
				<div>
					<p>0000</p>
					<span>支付宝</span>
				</div>
				<div><p>0000</p>
					<span>支付宝</span></div>
				<div><p>0000</p>
					<span>支付宝</span></div>
				<div><p>0000</p>
					<span>支付宝</span></div>
			</footer>
		
	</body>
</html>

yuan200424

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端第二周

调整主轴方向:justify-content:flex-start;flex-end,center,space-between两端对齐,srace-arounddeng等距相隔.修改主轴方向:flex-direction:column;竖直方向,row水平方向,row-reverse方向取反,column-reverse.调整侧轴:align-items:flex-end;box-sizing:content-box(默认值);侧轴不支持:space-between ,space-around。
复制链接

扫一扫