HTML&CSS

最新推荐文章于 2023-05-20 20:12:52 发布
最新推荐文章于 2023-05-20 20:12:52 发布
阅读量182 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37854641/article/details/61412368
版权



1.利用margin值为负数

左右宽度固定中间自适应。补充：background-color填充：content、padding、border。

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/http; charset=utf-8">  
  5.         <title>测试页</title>  
  6.         <style type="text/css">  
  7.         body{  
  8.             margin: 0;  
  9.             padding: 0;  
  10.         }  
  11.         .main{  
  12.             background-color: black;  
  13.             padding:0 300px;  
  14.             height: 700px;  
  15.         }  
  16.         .main-left{  
  17.             width: 300px;  
  18.             height: 500px;  
  19.             background-color: #98FF1A;  
  20.             float: left;  
  21.             margin-left:-300px;  
  22.         }         
  23.         .main-center{  
  24.             background-color: #8E8DCC;  
  25.             height: 500px;  
  26.         }  
  27.         .main-right{  
  28.             width: 300px;  
  29.             height: 500px;  
  30.             background-color:#7CC0FF;  
  31.             float: right;  
  32.             margin-right: -300px;  
  33.         }  
  34.       
  35.         </style>  
  36.     </head>  
  37.     <body>  
  38.         <div class="main">  
  39.             <div class="main-left"></div>  
  40.             <div class="main-right"></div>  
  41.             <div class="main-center"></div>  
  42.         </div>  
  43.     </body>  
  44. </html>  
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.main{
			background-color: black;
			padding:0 300px;
			height: 700px;
		}
		.main-left{
			width: 300px;
			height: 500px;
			background-color: #98FF1A;
			float: left;
			margin-left:-300px;
		}		
		.main-center{
			background-color: #8E8DCC;
			height: 500px;
		}
		.main-right{
			width: 300px;
			height: 500px;
			background-color:#7CC0FF;
			float: right;
			margin-right: -300px;
		}
	
		</style>
	</head>
	<body>
		<div class="main">
			<div class="main-left"></div>
			<div class="main-right"></div>
			<div class="main-center"></div>
		</div>
	</body>
</html>

2.利用绝对定位

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/http; charset=utf-8">  
  5.         <title>测试页</title>  
  6.         <style type="text/css">  
  7.         body{  
  8.             margin: 0;  
  9.             padding: 0;  
  10.         }  
  11.         .main{  
  12.             background-color: black;  
  13.             margin:0 auto;  
  14.             height: 700px;  
  15.         }  
  16.         .main-left{  
  17.             width: 300px;  
  18.             height: 500px;  
  19.             background-color: #98FF1A;  
  20.             float: left;  
  21.             position: absolute;  
  22.             left: 0;  
  23.         }         
  24.         .main-center{  
  25.             background-color: #8E8DCC;  
  26.             height: 500px;  
  27.         }  
  28.         .main-right{  
  29.             width: 300px;  
  30.             height: 500px;  
  31.             background-color:#7CC0FF;  
  32.             float: right;  
  33.             position: absolute;  
  34.             right: 0;  
  35.         }  
  36.       
  37.         </style>  
  38.     </head>  
  39.     <body>  
  40.         <div class="main">  
  41.             <div class="main-left"></div>  
  42.             <div class="main-right"></div>  
  43.             <div class="main-center"></div>  
  44.         </div>  
  45.     </body>  
  46. </html>  
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.main{
			background-color: black;
			margin:0 auto;
			height: 700px;
		}
		.main-left{
			width: 300px;
			height: 500px;
			background-color: #98FF1A;
			float: left;
			position: absolute;
			left: 0;
		}		
		.main-center{
			background-color: #8E8DCC;
			height: 500px;
		}
		.main-right{
			width: 300px;
			height: 500px;
			background-color:#7CC0FF;
			float: right;
			position: absolute;
			right: 0;
		}
	
		</style>
	</head>
	<body>
		<div class="main">
			<div class="main-left"></div>
			<div class="main-right"></div>
			<div class="main-center"></div>
		</div>
	</body>
</html>

3.混合布局。

先弄成一列布局的：有head、main和foot。它们都要设置高度、宽度。

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/http; charset=utf-8">  
  5.         <title>测试页</title>  
  6.         <style type="text/css">  
  7.         body{  
  8.             margin: 0;  
  9.             padding: 0;  
  10.         }  
  11.         .head{  
  12.             height: 80px;  
  13.             background-color:black;  
  14.         }  
  15.         .main{  
  16.             height: 500px;  
  17.             width: 800px;  
  18.             background-color: red;  
  19.             margin: 0 auto;  
  20.             position: relative;  
  21.         }  
  22.         .foot{  
  23.             height: 100px;  
  24.             width:800px;  
  25.             background-color:#ddd;  
  26.             margin:0 auto;  
  27.         }  
  28.           
  29.         </style>  
  30.     </head>  
  31.     <body>  
  32.         <div class="head"></div>  
  33.         <div class="main">  
  34.         </div>  
  35.         <div class="foot"></div>  
  36.           
  37.     </body>  
  38. </html>  
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.head{
			height: 80px;
			background-color:black;
		}
		.main{
			height: 500px;
			width: 800px;
			background-color: red;
			margin: 0 auto;
			position: relative;
		}
		.foot{
			height: 100px;
			width:800px;
			background-color:#ddd;
			margin:0 auto;
		}
		
		</style>
	</head>
	<body>
		<div class="head"></div>
		<div class="main">
		</div>
		<div class="foot"></div>
		
	</body>
</html>


然后把main进行分割。

分成两列，宽度都固定，采用绝对定位。一个在左上角，一个在右上角。而main本身要弄成相对定位（如果不弄成相对定位，它的子元素会以body为准进行left、top、right的定位）。
[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/http; charset=utf-8">  
  5.         <title>测试页</title>  
  6.         <style type="text/css">  
  7.         body{  
  8.             margin: 0;  
  9.             padding: 0;  
  10.         }  
  11.         .head{  
  12.             height: 80px;  
  13.             background-color:black;  
  14.         }  
  15.         .main{  
  16.             height: 500px;  
  17.             width: 800px;  
  18.             background-color: red;  
  19.             margin: 0 auto;  
  20.             position: relative;  
  21.         }  
  22.         .foot{  
  23.             height: 100px;  
  24.             width:800px;  
  25.             background-color:#ddd;  
  26.             margin:0 auto;  
  27.         }  
  28.         .left{  
  29.             width: 200px;  
  30.             height: 600px;  
  31.             float: left;  
  32.             position: absolute;  
  33.             top: 0;  
  34.             left: 0;  
  35.             background-color: #cef;  
  36.         }  
  37.         .right{  
  38.             height: 800px;  
  39.             width:600px;  
  40.             float: right;  
  41.             position: absolute;  
  42.             right: 0;  
  43.             background-color: orange;  
  44.         }  
  45.         </style>  
  46.     </head>  
  47.     <body>  
  48.         <div class="head"></div>  
  49.         <div class="main">  
  50.             <div class="left"></div>  
  51.             <div class="right"></div>  
  52.         </div>  
  53.         <div class="foot"></div>  
  54.           
  55.     </body>  
  56. </html>  
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.head{
			height: 80px;
			background-color:black;
		}
		.main{
			height: 500px;
			width: 800px;
			background-color: red;
			margin: 0 auto;
			position: relative;
		}
		.foot{
			height: 100px;
			width:800px;
			background-color:#ddd;
			margin:0 auto;
		}
		.left{
			width: 200px;
			height: 600px;
			float: left;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #cef;
		}
		.right{
			height: 800px;
			width:600px;
			float: right;
			position: absolute;
			right: 0;
			background-color: orange;
		}
		</style>
	</head>
	<body>
		<div class="head"></div>
		<div class="main">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="foot"></div>
		
	</body>
</html>



还可以把main的右边再分栏：

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/http; charset=utf-8">  
  5.         <title>测试页</title>  
  6.         <style type="text/css">  
  7.         body{  
  8.             margin: 0;  
  9.             padding: 0;  
  10.         }  
  11.         .head{  
  12.             height: 80px;  
  13.             background-color:black;  
  14.         }  
  15.         .main{  
  16.             height: 500px;  
  17.             width: 800px;  
  18.             background-color: red;  
  19.             margin: 0 auto;  
  20.             position: relative;  
  21.         }  
  22.         .foot{  
  23.             height: 100px;  
  24.             width:800px;  
  25.             background-color:#ddd;  
  26.             margin:0 auto;  
  27.         }  
  28.         .left{  
  29.             width: 200px;  
  30.             height: 500px;  
  31.             float: left;  
  32.             position: absolute;  
  33.             top: 0;  
  34.             left: 0;  
  35.             background-color: #cef;  
  36.         }  
  37.         .right{  
  38.             height: 500px;  
  39.             width:600px;  
  40.             float: right;  
  41.             position: absolute;  
  42.             right: 0;  
  43.             background-color: orange;  
  44.         }  
  45.         .right-1{  
  46.             width: 400px;  
  47.             background-color: #0ff;  
  48.             float: left;  
  49.             height: 500px;  
  50.         }  
  51.         .right-2{  
  52.             width: 200px;  
  53.             height: 500px;  
  54.             background-color: #ff0;  
  55.             float: right;  
  56.         }  
  57.         </style>  
  58.     </head>  
  59.     <body>  
  60.         <div class="head"></div>  
  61.         <div class="main">  
  62.             <div class="left"></div>  
  63.             <div class="right">  
  64.                 <div class="right-1"></div>  
  65.                 <div class="right-2"></div>  
  66.             </div>  
  67.         </div>  
  68.         <div class="foot"></div>  
  69.           
  70.     </body>  
  71. </html>  
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.head{
			height: 80px;
			background-color:black;
		}
		.main{
			height: 500px;
			width: 800px;
			background-color: red;
			margin: 0 auto;
			position: relative;
		}
		.foot{
			height: 100px;
			width:800px;
			background-color:#ddd;
			margin:0 auto;
		}
		.left{
			width: 200px;
			height: 500px;
			float: left;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #cef;
		}
		.right{
			height: 500px;
			width:600px;
			float: right;
			position: absolute;
			right: 0;
			background-color: orange;
		}
		.right-1{
			width: 400px;
			background-color: #0ff;
			float: left;
			height: 500px;
		}
		.right-2{
			width: 200px;
			height: 500px;
			background-color: #ff0;
			float: right;
		}
		</style>
	</head>
	<body>
		<div class="head"></div>
		<div class="main">
			<div class="left"></div>
			<div class="right">
				<div class="right-1"></div>
				<div class="right-2"></div>
			</div>
		</div>
		<div class="foot"></div>
		
	</body>
</html>


qq_37854641
关注
HTML & CSS 概述_1
qq_45370222的博客
04-10 3246
HTML & CSS 笔记_1
HTML & CSS设计与构建网站 ([美]达科特) PDF原版​
randyjin的博客
04-21 1317
HTML &amp; CSS 设计与构建网站采用有别于许多传统编程书籍的新颖编排方式，将使您收到事半功倍的学习效果。每一页都在短小精悍的示例代码的引导下，简明直观、直截了当地阐述一个新主题。《HTML &amp; CSS 设计与构建网站》还提供关于如何组织和设计网页的实用信息，以便帮助您创建充满魅力、易于使用的网站。HTML &amp; CSS 设计与构建网站 目录第1章　结构　 第2章　文本　 ...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
galaxy的博客
09-21 1829
meta是html中的元标签，其中包含了对应html的相关信息，客户端浏览器或服务器端的程序会根据这些信息进行处理。 HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。 content（内容类型）：重要！！这个网页的格式是文本的，网页模式 charset（编码）：特别重要！！！这个网页的编码是utf-8，中文编码，需要注意的是这个是网页...
HTML&CSS登录界面及讲解
weixin_54627824的博客
04-20 1万+
PS:该源码非原创，原文章来自(2条消息) HTML+CSS登录界面_桐艾的博客-CSDN博客_登录页面 这里只做源码讲解 页面效果如下： 首先是login.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="./login.css"/>...
html&css实现按钮图标样式
weixin_49596018的博客
08-30 2569
页面中按钮效果的实现 样式一：实心圆 HTML代码： css代码 样式二：圆环 html代码：
怎样用HTML&CSS写出一个简单的网页
qq_66912943的博客
07-01 3408
制作一个简易的HTML
【HTML＆CSS】如何设置透明的div盒子？
m0_60364956的博客
05-20 9696
有时候我们想把盒子的背景设置成透明的，或者半透明的，看起来更美观。这就需要我们给颜色加一个透明度。
使用HTML&css创建二级导航栏
qq_45915712的博客
11-08 9244
使用HTML&css创建二级导航栏创建一级导航栏创建二级导航栏 创建一级导航栏 使用 创建一个无序列表，即为一级导航栏 <ul> <li><a href="#">首页</a></li> <li><a href="#">学校概况</a></li> <li><a href="#">师资队伍</a></li> <--!省略多个li
笔记33-HTML&CSS
热门推荐
terence的博客
06-30 7万+
今日内容： 1. HTML标签：表单标签 2. CSS： HTML标签：表单标签 * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较常用 * get：
Html&css&js 图片轮播，加箭头
qq_44331253的博客
03-04 1万+
轮换图箭头案例 方向箭头在图片上，应该使用绝对定位 父级盒子应该使用相对定位 Html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link href="../css/imgmove.css" rel="stylesheet"/> </head> <body> <div
HTML & CSS设计与构建网站 完整中文版带目录.pdf
09-06
HTML & CSS设计与构建网站 完整中文版带目录.pdf 个人收集电子书，仅用学习使用，不可用于商业用途，如有版权问题，请联系删除！ 前言 v 第1章　结构 1 第2章　文本 29 第3章　列表 51 第4章　链接 63 第5章　图像 ...
HTML & CSS 核心教程：（103集实战教学，从入门到精通）
11-21
HTML & CSS 核心教程：（103集实战教学，从入门到精通）
Web前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历.zip
05-09
Web前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历 Web前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历 Web前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历 Web前端静态...
HTML&CSS 设计与构建网站 完整版（中英两种版本）par3
12-17
HTML&CSS 设计与构建网站 完整版par3，有中英文两种，由于英文版是高清版，所以比较大，分为三个压缩文件，需要的朋友自取。
HTML & CSS 设计与构建网站
05-10
HTML & CSS 设计与构建网站 中文本，高清扫描版，带目录！
基于JavaScript的human-resource-backend后端开发源码设计
10-05
该项目是一款以JavaScript为主语言的HR（人力资源）后端开发源码，集成了Java、CSS、Vue和HTML等多种语言，共计1035个文件。具体文件构成如下：236个Java文件、179个JavaScript文件、104个PNG图片文件、59个CSS文件、56个Vue文件、54个GIF动画文件、42个类文件、41个XML文件、36个SVG文件、35个HTML文件。该后端系统旨在构建一个高效的人力资源管理平台。
基于Java的SpringCloud脚手架及Vue前端设计源码
10-05
该项目是一款基于Java的SpringCloud微服务架构的脚手架，同时融合了Vue前端技术。项目包含131个文件，其中Java源代码文件50个，Vue组件文件19个，JavaScript和HTML/CSS相关文件共计38个，XML配置文件13个，YAML文件8个，JSON文件4个，图片文件3个，Git忽略配置文件2个，Markdown文件2个，HTML文件2个。项目结构清晰，功能完善，适用于快速开发和部署微服务应用。
长治医学院在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
留守儿童爱心网站 毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
最新发布
10-05
留守儿童爱心网站 毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV11ktveuE2d
HTML&CSS入门指南：构建完美网站
"这是一本名为《使用HTML&CSS正确构建自己的Web网站》的书籍，适合初学者入门，教导读者如何使用HTML和CSS创建并美化自己的网站。书中涵盖了从设置基础到高级功能的多个主题，包括创建网页、添加样式、使用图片、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值