前端html css
layout三种布局(页面基本都会进行居中)
1.三栏框架或者两栏
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin: 0px;">
<!-- 页面布局 -->
<div style="border: 4px solid blue;width:800px;margin: 50px auto; overflow: hidden;">
<div style="border: 4px solid red;float: left;width: 250px;">左侧</div>
<!-- 高度不会具体设置，会根据内容进行调整。 -->
<div style="float: left;width: 250px;border: 4px solid green;margin-left: 13px;">
中间
</div>
<div style="border: 4px solid red;float: left;width: 250px;margin-left: 13px;">右侧</div>
</div>
<!-- 高度会根据内容进行扩展 -->
</body>
</html>
2.一般网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout02</title>
</head>
<body style="margin: 0px;">
<div style="background:#ccc;width: 1200px;margin: 0px auto;padding: 5px 10px;">
<div style="background: blue;margin-bottom: 10px;">
页头
</div>
<div style="overflow: hidden;">
<div style="background: red; float: left; width:700px;height: 300px;">
左侧
</div>
<div style="background: green;float: right; width: 300px;height: 300px;">
右侧
</div>
</div>
<div style="background: blue;margin-bottom: 10px;margin-top: 10px;">
页尾
</div>
</div>
</body>
</html>
3.大多数的网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout02</title>
</head>
<body style="margin: 0px;">
<div style="background: pink;height: 80px;margin-bottom: 20px;">
aaaa
</div>
<div style="background:#ccc;width: 1200px;margin: 0px auto;padding: 5px 10px;">
<div style="background: blue;margin-bottom: 10px;height: 80px;">
页头
</div>
<div style="overflow: hidden;">
<div style="background: red; float: left; width:700px;height: 300px;">
左侧
</div>
<div style="background: green;float: right; width: 300px;height: 300px;">
右侧
</div>
</div>
<div style="background: blue;margin-bottom: 10px;margin-top: 10px;height: 80px;">
页头
</div>
</div>
<div style="background: pink;height: 80px;margin-top: 20px;">
aaaa
</div>
</body>
</html>
项目实战：个人简历的制作
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 800px;margin: 0px auto;box-shadow: 10px 10px 10px #ccc;background: url(bg1.png) no-repeat right top, url(bg2.png) no-repeat left bottom;">
<!-- box-shadow: 10px 10px 0px red;
前两个是偏移量 第三个值是调节模糊度，
-->
<!-- 最上面 -->
<div style="text-align: center;border-bottom: 3px dotted #ccc;">
<!-- text-align: center;水平对齐 -->
<img src="koala.jpg" alt="" style="border-radius: 50px;border: 4px solid #aaa;">
<!-- border-radius: 50px;用来改变图片形状的，将图片进行内切圆 -->
<p>--<span style="color: pink;">李四</span>--</p>
<h2>求职意向：大数据工程师</h2>
</div>
<!-- 最下面 -->
<div style="overflow: hidden;">
<!-- 左侧 -->
<div style="width: 300px;float: left;padding-left: 7px;padding-top: 7px;">
<img src="1.png" alt="" style="vertical-align: middle;"> 个人信息
<!-- vertical-align: middle;行内标签对齐 -->
<table style="font-size: 12px;line-height: 2;margin-top: 10px;margin-bottom: 20px;">
<!-- 行高写数字不带单位 -->
<tr>
<td>性别：</td><td>男</td>
</tr>
<tr>
<td>家庭住址：</td><td>中国</td>
</tr>
<tr>
<td>联系电话：</td><td>43124</td>
</tr>
<tr>
<td>微信号码：</td><td>3143214</td>
</tr>
</table>
<img src="2.png" alt="" style="vertical-align: middle;"> 教育经历
<!-- vertical-align: middle;行内标签对齐 -->
<table style="font-size: 12px;line-height: 2;margin-top: 10px;">
<!-- 行高写数字不带单位 -->
<tr>
<td>性别：</td><td>男</td>
</tr>
<tr>
<td>家庭住址：</td><td>中国</td>
</tr>
<tr>
<td>联系电话：</td><td>43124</td>
</tr>
<tr>
<td>微信号码：</td><td>3143214</td>
</tr>
</table>
</div>
<!-- 右侧 -->
<div style="border-left: 1px dotted #ccc; width: 450px;float: right;padding-left: 10px;">
<img src="3.png" alt="" style="vertical-align: middle;"> 项目经历
<!-- vertical-align: middle;行内标签对齐 -->
<table style="font-size: 12px;line-height: 2;margin-top: 10px;margin-bottom: 20px;">
<!-- 行高写数字不带单位 -->
<tr>
<td style="width: 120px;">2020年08月-10月：</td><td>基于Javaweb的项目基于Javaweb的项目基于Javaweb的项目基于Javaweb的项目</td>
</tr>
<!-- 一个td变其余的都跟着变，所以只用改一个即可。 -->
<tr>
<td>2020年08月-10月：</td><td>基于Javaweb的项目</td>
</tr>
<tr>
<td>2020年08月-10月：</td><td>基于Javaweb的项目</td>
</tr>
<tr>
<td>2020年08月-10月：</td><td>基于Javaweb的项目</td>
</tr>
</table>
<img src="3.png" alt="" style="vertical-align: middle;"> 作品展示
<!-- vertical-align: middle;行内标签对齐 -->
<table style="font-size: 12px;line-height: 2;margin-top: 10px;">
<!-- 行高写数字不带单位 -->
<tr>
<td style="width: 120px;">冰镇小屋</td><td><a href="index.html" target="_blank">点击查看</a></td>
</tr>
<!-- 一个td变其余的都跟着变，所以只用改一个即可。 -->
</table>
<img src="4.png" alt="" style="vertical-align: middle;margin-top: 100px;"> 友情链接
<!-- 使得两个图片分开 -->
<div style="margin-top: 20px;">
<img src="1.jpg" alt="" style="border-radius: 50%;;border:3px solid #ccc;width:60px;">
<img src="1.jpg" alt="" style="border-radius: 50%;;border:3px solid #ccc;width:60px;">
<img src="1.jpg" alt="" style="border-radius: 50%;;border:3px solid #ccc;width:60px;">
<img src="1.jpg" alt="" style="border-radius: 50%;;border:3px solid #ccc;width:60px;">
</div>
</div>
</div>
</div>
</body>
</html>
7590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
