菜单 搜索
首页 前端知识 网页设计 第九章DIV与CSS

网页设计 第九章DIV与CSS

2025-03-10 12:03:31 前端知识 前端哥 104 700 我要收藏

1. div 元素

div（division）元素是 HTML 中用于组合文档内容的通用容器，它可以将 HTML 文档分割为独立的、不同的部分。

例子：
<div id="header">
  <!-- 页眉内容 -->
</div>
<div id="content">
  <!-- 主内容 -->
</div>
<div id="footer">
  <!-- 页脚内容 -->
</div>

2. CSS 布局

CSS 布局涉及多种属性和方法，以下是一些关键的布局技术：

2.1 盒模型（Box Model）
  • margin：元素外边距
  • border：元素边框
  • padding：元素内边距
  • width 和 height：元素宽度和高度
例子：
#content {
  margin: 10px;
  border: 1px solid #000;
  padding: 20px;
  width: 80%;
  height: 300px;
}
2.2 定位（Positioning）
  • static：默认定位，没有特别的定位，遵循正常的文档流。
  • relative：相对定位，相对于其正常位置进行定位。
  • absolute：绝对定位，相对于最近的已定位祖先元素进行定位。
  • fixed：固定定位，相对于浏览器窗口进行定位。
例子：
#header {
  position: fixed;
  top: 0;
  width: 100%;
}
2.3 浮动（Float）
  • float: left;：元素向左浮动
  • float: right;：元素向右浮动
例子：

css

2.4 Flexbox 布局

Flexbox 是一种用于在容器内分配和对齐元素的一维布局方法。

例子：

css 

.container {
  display: flex;
  justify-content: space-between; /* 水平方向对齐 */
  align-items: center; /* 垂直方向对齐 */
}
2.5 Grid 布局

CSS Grid 布局是一种用于创建复杂网页布局的二维布局方法。

例子：

css

复制

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 定义三列 */
  gap: 10px; /* 列与列之间的间隔 */
}

 

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .container {
    display: flex;
  }
  .left-column {
    flex: 1; /* 占据剩余空间 */
    background-color: lightgrey;
    padding: 20px;
  }
  .right-column {
    flex: 2; /* 占据两倍于 left-column 的空间 */
    background-color: lightblue;
    padding: 20px;
  }
</style>
</head>
<body>

<div class="container">
  <div class="left-column">
    <h2>左侧栏</h2>
    <p>这是左侧栏的内容。</p>
  </div>
  <div class="right-column">
    <h2>右侧栏</h2>
    <p>这是右侧栏的内容。</p>
  </div>
</div>

</body>
</html>

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>完整布局示例</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .header {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-align: center;
  }
  .nav {
    background-color: #444;
    color: white;
    padding: 10px;
  }
  .nav ul {
    list-style-type: none;
    padding: 0;
  }
  .nav ul li {
    display: inline;
    margin-right: 20px;
  }
  .nav ul li a {
    color: white;
    text-decoration: none;
  }
  .nav ul li a:hover {
    text-decoration: underline;
  }
  .main {
    float: left;
    width: 70%;
    padding: 15px;
    background-color: #f1f1f1;
  }
  .sidebar {
    float: left;
    width: 30%;
    padding: 15px;
    background-color: #ddd;
  }
  .footer {
    clear: both;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
  }
</style>
</head>
<body>

<div class="header">
  <h1>我的网站</h1>
</div>

<div class="nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">联系我们</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</div>

<div class="main">
  <h2>主体内容</h2>
  <p>这是主体内容区域。在这里可以放置文章、图片、视频等内容。</p>
</div>

<div class="sidebar">
  <h2>侧边栏</h2>
  <p>这是侧边栏区域。通常用来放置广告、搜索框、链接列表等。</p>
</div>

<div class="footer">
  <p>版权所有 &copy; 2023 我的网站</p>
</div>

</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例9.10</title>
		<style>
			.all {
				width: 1000px;
				height: 400px;
				border: 2px solid red;
				margin: 0px auto;
			}

			.top {
				width: 1000px;
				height: 50px;
				background-color: lightcyan;
			}

			.main {
				width: 1000px;
				height: 320px;
			}

			.main .left {
				width: 230px;
				height: 300px;
				background-color: yellow;
				float: left;
				margin: 10px;
			}

			.main .right {
				width: 730px;
				height: 300px;
				background-color: lightgreen;
				float: left;
				margin: 10px;
			}

			.footer {
				width: 1000px;
				height: 30px;
				background-color: lightgrey;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			<div class="main">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例9.11</title>
		<style>
			* {
				margin: 10px auto;
				padding: 0px auto;
				font-size: large;
			}

			.all {
				background-color: red;
				width: 700px;
				height: 500px;
			}

			.left,
			.main,
			.right {
				text-align: center;
				height: 480px;
				line-height: 480px;
				float: left;
			}

			.left {
				background-color: antiquewhite;
				width: 150px;
			}

			.main {
				background-color: lightcyan;
				width: 400px;
			}

			.right {
				background-color: antiquewhite;
				width: 150px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="left">导航菜单</div>
			<div class="main">视觉集中区域，主要内容</div>
			<div class="right">表单或链接</div>
		</div>
	</body>
</html>

 

 

<html>
	<head>
		<meta charset="utf-8" />
		<title>示例9.12</title>
		<style>
			* {
				margin: 0px auto;
				padding: 0px auto;
				font-size: large;
			}

			.all {
				background-color: red;
				text-align: center;
				width: 700px;
				height: 500px;
			}

			.top {
				background-color: antiquewhite;
				width: 680px;
				height: 80px;
				line-height: 80px;
			}

			.main {
				background-color: lightcyan;
				width: 680px;
				height: 340px;
				line-height: 340px;
			}

			.footer {
				background-color: antiquewhite;
				width: 680px;
				height: 80px;
				line-height: 80px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">导航或者横幅广告</div>
			<div class="main">视觉集中区域，主要内容</div>
			<div class="footer">版权信息</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例9.13</title>
		<style>
			* {
				margin: 0px auto;
				/*设置浏览器元素水平居中*/
				padding: 0px auto;
				width: 100%;
				height: 100%;
				/*先设置父元素的宽度和高度为100%。*/
			}

			.all {
				border: 2px dashed red;
				width: 95%;
				height: 98%;
			}

			.top {
				background-color: pink;
				width: 100%;
				height: 15%;
			}

			.main {
				width: 100%;
				height: 75%;
			}

			.left {
				background-color: yellow;
				width: 20%;
				float: left;
			}

			.center {
				background-color: lightcyan;
				width: 60%;
				float: left;
			}

			.right {
				background-color: yellow;
				/*中间div的右侧div宽度自适应*/
			}

			.footer {
				background-color: pink;
				width: 100%;
				height: 10%;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			<div class="main">
				<div class="left"></div>
				<div class="center"></div>
				<div class="right"></div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px auto;
				
			}
			.all{
				width: 1000px;
				height: 840px;
				background-image: url(img/764b371b5324c91d88b1f28d5990272.jpg);
			}
			.top{
				width: 1000px;
				height: 150px;
			} 
			.main{
				background-color: aliceblue;
				width: 1000px;
				height: 630px;
			}
			.left{
				padding-top: 30px;
				padding-left: 20px;
				width: 200px;
				height: 580px;
				float: left;
			}
			.center{
				border-left: 2px dashed blue;
				border-right: 2px dashed blue;
				padding-top: 50px;
				width: 500px;
				height: 580px;
				float: left;
			}
			.right{
				padding-left: 20px;
				width: 250px;
				height: 630px;
				float: left;
			}
			.footer{
				width: 1000px;
				height: 60px;
				font-family: "kaiti";
				font-size: 18px;
				text-align: center;
				line-height: 30px;
			}
			a,span{
				color: red;
				font-weight: 700px;
				text-align: center;
			}
			p{
				font-family: "heiti";
				font-weight: 700px;
				color: blue;
				font-size: 28px;
				text-align: center;
			}
			table{
				font-family: "heiti";
				font-weight: 700px;
				color: blue;
				font-size: 20px;
				line-height: 55px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"><img src="img/193e2e36174140fb579e64fd1bb8261.jpg"/></div>
			<div class="main">
				<div class="left">
					<p><img src="img/b3477344cbdad25e19df7d149143532.jpg"/></p >
					<p><img src="img/5d59b0d40f6757467060be8fb992cfa.jpg"/></p >
					<p><img src="img/83962f84c2fa955e20eea0f96511aaa.jpg"/></p >
					<p><img src="img/a0272700a36e6465f8dd586cd85e04a.jpg"/></p >
					<p>相关信息</p >
					四大学历提升方案<br />
					新报考解读击<br />
					六大类专业报考指南<br />
					更多信息请点击
				</div>
				<div class="center">
					<p>入学报名表</p >
					<form id="form2" name="form2" method="post" action="">
					<table width="400" border="0" align="center" cellpadding="0" cellpadding="0">
						<tr>
							<td width="158" align="right">姓名：<label for="textfield"></label>
							</td>
							<td width="242"><input type="text" name="textfield" id="textfield"/>
							</td>
						</tr>
						<tr>
							<td align="right">联系电话：
							</td>
							<td><input type="text" name="textfield2" id="textfield2"/>
							</td>
						</tr>
						<tr>
							<td align="right">邮箱：
							</td>
							<td><input type="text" name="textfield3" id="textfield3"/>
							</td>
						</tr>
						<tr>
							<td align="right">资料邮寄地址：
							</td>
							<td><input type="text" name="textfield4" id="textfield4"/>
							</td>
						</tr>
						<tr>
							<td align="right">最高学历：
							</td>
							<td>
								<select name="select2" id="select2">
									<option>本科</option>
									<option>大专</option>
									<option>高中</option>
									<option>初中</option>
									<option>小学</option>
								</select>
							</td>
						</tr>
						<tr>
							<td align="right">选择的课程：
							</td>
							<td><input type="text" name="textfield6" id="textfield6"/>
							</td>
						</tr>
						<tr>
							<td align="right">意向学习方式：
							<label for="select2"></label>
							</td>
							<td>
								<select name="select2" id="select2">
									<option>网络授课</option>
									<option>周末班</option>
									<option>全日制</option>
							</td>
						</tr>
						<tr>
							
							<td colspan="2" align="center">
								<input type="image" name="imageField" id="imageField" src="img/14d973bfdab7a2aa75f0a63fffc2d69.jpg"/>
							</td>
						</tr>
					</table>
					</form>
				</div>
				<div class="right">
					<img src="img/273602823a329f55bbed6bd74beab68.jpg"/>
					<img src="img/8924bbc559c839db4a1eb1fc5e06e76.jpg"/>
					<img src="img/8e900644243bacf6c62d44139d7dc93.jpg"/>
					<img src="img/adfeb4204b794bf21add758e896c24b.jpg"/>
				</div>
			</div>
			<div class="footer">
				<span>免费电话：</span>400-XXX-XXX(18条线)！！
				<span>(北京校区)</span>北京路xx大厦一楼0000号；||
				<span>(上海校区)</span>上海路XX科技园7栋9999号<br />
				此网站信息最终解释权&copy;众诚远程教育
			</div>
		</div>
	</body>
</html>

 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/23135.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

面试题之强缓存协商缓存

2025-03-11 15:03:21

关于webpack的文件打包分割，并防止js文件缓存

2025-03-11 15:03:20

Pytorch实现之利用CGAN鉴别真假图像

2025-03-11 15:03:19

【C语言】数组篇

2025-03-11 15:03:19

正则表达式（2）匹配规则

2025-03-11 15:03:18

正则表达式(复习)

2025-03-11 15:03:17

vue打包编译【自动删除node_modules下的.cache缓存文件夹】

2025-03-11 15:03:17

联核科技AGV无人叉车有哪些安全防护措施？

2025-03-11 15:03:17

笔记:代码随想录算法训练营day39:LeetCode 198.打家劫舍,213.打家劫舍II,337.打家劫舍III

2025-03-11 15:03:17

宇树科技嵌入式面试题及参考答案（春晚机器人的公司）

2025-03-11 15:03:16

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！