【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

insignificant555

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量171

点赞数

文章标签：其他

本文链接：https://blog.csdn.net/qq_66351622/article/details/124281282

版权

学习目标：

一周掌握基本前端页面布局

学习内容：

双飞翼布局及position属性

学习产出：

技术笔记
网页博客
下面为网页demo代码：

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
  	<title></title>
  	<style>
  		*{
  			margin: 0;
  			padding: 0;
  		}
  		body{
  			min-width: 700px;
  		}
  		.middle{
  			background-color: #00b1d4;
  			width: 100%;
  			height: 200px;
  			float: left;
  		}
  		.left{
  			background-color: blue;
  			width: 200px;
  			height: 200px;
  			float: left;
  			margin-left: -100%;
  		}
  		.right{
  			background-color: blue;
  			width: 200px;
  			height: 200px;
  			float: right;
  			margin-left: -200px;
  		}
  		.mid{
  			padding: 0 200px;
  		}
  	</style>
  </head>
  <body>
  	<div class="middle">
  		<div class="mid">勾指起誓
  			<p>你是信的开头诗的内容
                  童话的结尾
                  你是理所当然的奇迹
                  你是月色真美
                  你是圣诞老人送给我
                  好孩子的礼物
                  你是三千美丽世界里
                  我的一瓢水
                  所以让我再靠近一点点
                  因为你太温暖
                  我会再变得坚强一点点
                  因为你太柔软
                  交换无名指金色的契约
                  给彼此岁月
                  说好从今以后都牵着手
                  因为要走很远
                  你是我万水千山的冒险
                  要找的标记点</p>
  		</div>
  	</div>
  	<div class="left">left
          <p>左边栏</p>
      </div>
  	<div class="right">right
          <p>右边栏</p>
      </div>
  </body>
</html>

运行结果如图：在这里插入图片描述

insignificant555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

学习目标：一周掌握基本前端页面布局学习内容：双飞翼布局及position属性学习产出：技术笔记网页博客下面为网页demo代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0;
复制链接

扫一扫