CSS 基础学习-234 css三列响应式布局

hrs, 5 九月, 2023

实例代码:


<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			*{
				box-sizing:border-box;
			}
			.div-header{
				width:100%;
				background-color:#daa1a1;
				text-align:center;
				padding:15px 0px;	
			}
			.div-nav{
				width:100%;
				background-color:black;


			}
			.div-nav a {
				text-decoration:none;
				display:inline-block;
				padding:10px 5px;
				color:white;
			}
			.div-nav a:hover{
				background-color:#ddd;
				color:black;
					
			}
			.div-content{
				width:100%;
    			float:left;  
				padding:10px;
				background-color:wheat;

			}
			 .column{
				float:left; 
				width:33%;
				padding:10px;

				background-color:
			}
			 h2{
				text-align:center;
			}
			 p{
				text-indent:2em;
				font-size:10px;
			
			}
		@media screen and (max-width: 600px) {
 			 .column {
   				 width: 100%;
				 float:none;
  			}
		}				
		

		</style>
	</head>
	<body>
		<div class="div-header">
			<h1>Header</h1>
			<p>请调整浏览器窗口的大小以查看响应效果。</p>

		</div>
		<div class="div-nav">
			<a href="#">Home</a>
			<a href="#">Download</a>
			<a href="#">Video</a>
			<a href="#">About</a>
		</div>

		<div class="div-content">
			<div class="column">
				<h2>文章-1</h2>
				<p>就是 利用 我们 头顶 天空 和 角色 地面 进行 专场 首先 我们 先 跟 的 模特 拍摄 他 向前走 的 尽头 在 镜头 的 木纹 的 项目 的 手机 指向 天空 而 记住 要 保证 天空 没有 杂物 不能 有 房子 和 数 什么 的 无语音 接下来 是 这个 场景 我们 先 从 天空 进行 拍摄 然后 像 大 行走 的 手机 到 的 模特 身上 继续 跟着 我们 的 模特 总 时候 我们 将 那个 镜头 衔接 在一起 看看 效果 无语音 与 之 对应 的 是 地面 三场 我们 三 是 模特 拍摄 一段 向前走 的 尽头 在 尽头 的 最后 呢 让 我们 的 手机 此项 地面 对 镜头 同样 的 道理 我们 在 另外 一个 场景 从 地面 开始 拍摄 然后 逐渐 缓慢 移动 到 模特 身上 无语音 然后 将 两个 镜头 连接 在一起 起来 的 成片</p>
			</div>
			<div class="column">
				<h2>文章-2</h2>
				<p> 的 场景 首先 宝宝 的 稳定器 倒置 先 稳定 的 的 
角度 拍摄 模式 在 哪 能 让 我们 的 手机 尽可能 地 贴近 地面 然后 让 我 的 模特 走过 我们 的 尽头 中间 的 时候 呢 同时 将 我们 手机 向下 移动 到 地面 是 想 当 守则 镜头 完全 被 地面 挡住 画面 的 时候 呢 第一个 镜头 就 拍摄 完成 了 令人 心疼 的 我 下线 拉长 手机 我 的 呀 
经常 干 这样 能 让 手机 尽可能 地 靠着 天花板 同样 的 样子 的 模特 向前走 同时 呢 让 的 手机 从 天花板 上 向下 了 记住 一定要 有 这么 一个 之 党务 然后 我们 将 两个 镜头 形式 在一</p>
			</div>
			<div class="column">
				<h2>文章-3</h2>
				<p>按照 这样 的 方式 其实 不 一定 非 要是 背包 或者 衣服 只要 是 模特 的 某 一部分 比如 我们 可以 让 模特 拿着 手机 用 手机 来 挡住 镜头 或者 像 这样 有 帽子 导致 尽头 
无语音
实现 转场 遮挡 分厂 用 墙面 挡住 镜头 实现 传唱 祖先 当 母校 找 一个 这样 的 墙面 让 模特 朝着 墙面 的 一侧 自行 移动 的 同时 呢 让 我们 的 手机 逐渐 向 墙面 靠近 知道 强 完全 挡住 的 手机 镜头 接下来 这个 镜头 我们 同样 需要 找 一个 跟 
之前 墙面 颜色 相近 的 墙面 我们 先 让 手机 镜头 完全 被 墙面 挡住 然后 从 墙面 一 出来 还是 我们 的 主体 我们 在 将 这 两个 镜头 呢 显示 在 一起 看看 效果 
无语音 </p>
			</div>
		</div>
	</body>
</html>

 

运行效果:

layout.png

标签

评论