前端css弹性布局，响应式布局，多列布局

最新推荐文章于 2024-07-18 15:09:36 发布

m0_56476250

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量130

点赞数

分类专栏：布局文章标签： html5

本文链接：https://blog.csdn.net/m0_56476250/article/details/115919212

版权

布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端css弹性布局，响应式布局，多列布局

主页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
				
			body{
				background-color: aliceblue;
			}
			.shou
			{
				margin-top: 0px;
				background-color: blue;
				display: flex;
			}
			.shou>div{
				flex:1;
				text-align: center;
				background:skyblue;
				line-height: 100px;
			}
			@media screen and (max-width: 1000px){
				.shou{
					flex-direction: column;
				}
			}
			.shou>div>a{
				width:100%;
				height: 100%;
				text-decoration: none;
				color: black;
				font-size: 20px;
				display: block;
			}
			.shou>div:hover{
				background:lightblue;
			}
			.body{
			    display: flex;
			}
			.body>div{
				float:left;
				width: 500px;
				height: 570px;
				background-color: white;
				text-align: center;
				margin-left: auto;
	            margin-right:auto;
			}
			.body>.left>ul>li{
				list-style: none;
				float:left;
			}
			.body>.left>ul>li>img{
				width:166px;
			}
				
			.body>.right>video{
				width:100%;
			}
		</style>
	</head>
	<body>
		<div class="shou">
			<div><a href="首页.html">首页</a></div>
			<div><a href="文字.html">文字</a></div>
			<div><a href="图形.html">图形</a></div>
			<div><a href="视频音频.html">视频音频</a></div>
		</div>
		<div class="body">
			<div class="left">
				<h1>最新商品</h1>
		        <ul>
					<li><img src="./img/1.png" alt=""></li>
		            <li><img src="./img/1.png" alt=""></li>
		            <li><img src="./img/1.png" alt=""></li>
		            <li><img src="./img/1.png" alt=""></li>
		            <li><img src="./img/1.png" alt=""></li>
		            <li><img src="./img/1.png" alt=""></li>
		            <li><img src="./img/1.png" alt=""></li>
		            <li><img src="./img/1.png" alt=""></li>
					<li><img src="./img/1.png" alt=""></li>
				</ul>
			</div>
			<div class="right">
				<h1>商品介绍</h1>
				<video src="./img/m1.mp4" controls autoplay muted loop="loop"></video>
				<p>这是你的第一台小米折叠屏手机</p>
				<p>是首个小米智能工厂独立研发制造的手机</p>
                <p>是首个使用澎湃C1专业影像芯片的手机</p>
                <p>这就是 MIX FOLD</p>
			</div>
		</div>
	</body>
</html>

音频视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
				
			body{
				background-color: aliceblue;
			}
			.shou
			{
				margin-top: 0px;
				background-color: blue;
				display: flex;
			}
			.shou>div{
				flex:1;
				text-align: center;
				background:skyblue;
				line-height: 100px;
			}
			@media screen and (max-width: 1000px){
				.shou{
					flex-direction: column;
				}
			}
			.shou>div>a{
				width:100%;
				height: 100%;
				text-decoration: none;
				color: black;
				font-size: 20px;
				display: block;
			}
			.shou>div:hover{
				background:lightblue;
			}
			.main{
			    display: flex;
				justify-content: space-around;
				margin-top: 100px;
			}
			.main>div{
				width: 1000px;
				height: 550px;
				background-color: white;
				text-align: center;
				border-radius: 10px;
			}
			.main>div>audio{
				width: 300px;
				height: 50px;
			}
			.main>div>video{
				width: 100%;
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<div class="shou">
			<div><a href="首页.html">首页</a></div>
			<div><a href="文字.html">文字</a></div>
			<div><a href="图形.html">图形</a></div>
			<div><a href="视频音频.html">视频音频</a></div>
		</div>
		<div class="main">
			<div>
				<audio src="./img/稻香-周杰伦-440613.mp3" controls="controls"></audio>
				<video src="img/m1.mp4" autoplay="autoplay" loop="loop"></video>
		    </div>
		</div>
	</body>
</html>

图形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
				
			body{
				background-color: aliceblue;
			}
			.shou
			{
				margin-top: 0px;
				background-color: blue;
				display: flex;
			}
			.shou>div{
				flex:1;
				text-align: center;
				background:skyblue;
				line-height: 100px;
			}
			@media screen and (max-width: 1000px){
				.shou{
					flex-direction: column;
				}
			}
			.shou>div>a{
				width:100%;
				height: 100%;
				text-decoration: none;
				color: black;
				font-size: 20px;
				display: block;
			}
			.shou>div:hover{
				background:lightblue;
			}
			.main>.one{
				width: 200px;
				height: 200px;
				background:red;
				margin: 100px auto;
				text-align: center;
				line-height: 200px;
				color: white;
			}
			.main>.one:hover{
				border-radius: 100px;
				transition: 1s;
			}
			.main>.two{
				width: 200px;
				height: 200px;
				background:blue;
                margin: 0 auto;
				text-align: center;
				line-height: 200px;
				color: white;
			}
			.main>.two:hover{
				transform: rotate(360deg); 
				transition: 1s;
				width: 100px;
				height: 100px;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="shou">
			<div><a href="首页.html">首页</a></div>
			<div><a href="文字.html">文字</a></div>
			<div><a href="图形.html">图形</a></div>
			<div><a href="视频音频.html">视频音频</a></div>
		</div>
		<div class="main">
			<div class="one">移鼠标进来</div>
			<div class="two">移鼠标进来</div>
		</div>
	</body>
</html>

文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
				
			body{
				background-color: aliceblue;
			}
			.shou
			{
				margin-top: 0px;
				background-color: blue;
				display: flex;
			}
			.shou>div{
				flex:1;
				text-align: center;
				background:skyblue;
				line-height: 100px;
			}
			@media screen and (max-width: 1000px){
				.shou{
					flex-direction: column;
				}
			}
			.shou>div>a{
				width:100%;
				height: 100%;
				text-decoration: none;
				color: black;
				font-size: 20px;
				display: block;
			}
			.shou>div:hover{
				background:lightblue;
			}
			.main{
			    display: flex;
			}
			.main>p{
				column-count: 3;
				margin: 10px 100px;
				column-rule:darkblue outset 10px;
			}
			.main2{
				display: flex;
				justify-content: space-around;
				margin-top: 100px;
			}
			.main2>img{
				width: 500px;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div class="shou">
			<div><a href="首页.html">首页</a></div>
			<div><a href="文字.html">文字</a></div>
			<div><a href="图形.html">图形</a></div>
			<div><a href="视频音频.html">视频音频</a></div>
		</div>
		<div class="main">
			<p>内屏：8.01″ 2K+折叠屏,外屏：6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,
			首发澎湃C1自研专业影像芯片,高通骁龙™888,WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,
			大屏高效交互,隐私保护,内屏：8.01″ 2K+折叠屏,外屏：6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,
			首发澎湃C1自研专业影像芯片,高通骁龙™888,WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,大屏高效交互,隐私保护,
			内屏：8.01″ 2K+折叠屏,外屏：6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,首发澎湃C1自研专业影像芯片,
			高通骁龙™888,WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,大屏高效交互,隐私保护,内屏：8.01″ 2K+折叠屏,
			外屏：6.52″90Hz 柔性屏,哈曼卡顿立体声四扬声器,108MP主摄 + 液态镜头 + 超广角镜头,首发澎湃C1自研专业影像芯片,高通骁龙™888,
			WiFi 6 增强版 + LPDDR5满血版 + UFS3.1,5020mAh电池,67W快充,大屏高效交互,隐私保护
			</p>
			
		</div>
		<div class="main2">
			<img src="./img/lei.jpg" alt="">
		</div>
	</body>
</html>

m0_56476250

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端css弹性布局，响应式布局，多列布局

前端css弹性布局，响应式布局，多列布局主页<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0px; padding: 0px; } body{ background-color: aliceblue; } .shou
复制链接

扫一扫