多条告白如次剧本只需引入一次
一、网页构造
网页构造有很多种办法，普遍分为以次几个局部：头部地区、菜单导航地区、实质地区、底部地区。
1. 头部地区
头部地区坐落所有网页的顶部，普遍用来树立网页的题目大概网页的 logo：
例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS 名目(runoob.com)</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>body { margin: 0;}/* 头部款式 */.header { background-color: #f1f1f1; padding: 20px; text-align: center;}</style></head><body><div class="830e-0207-e968-c8c2 header"> <h1>头部地区</h1></div></body></html>2. 菜单导航地区
菜单导航条包括了少许链接，不妨启发用户欣赏其余页面：
例
/* 导航条 */.topnav { overflow: hidden; background-color: #333;} /* 导航链接 */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;} /* 链接 - 窜改脸色 */.topnav a:hover { background-color: #ddd; color: black;}3. 实质地区
实质地区普遍有三种情势:
1 列：普遍用来挪动端。2 列：普遍用来枯燥摆设。3 列：普遍用来 PC 桌面摆设。不十分的列
不十分的列普遍是在中央局部树立实质地区，这块也是最大最重要的，安排两次侧不妨动作少许导航等关系实质，这三列加起来的宽窄是 100％。
例：
.column { float: left;} /* 安排侧栏的宽窄 */.column.side { width: 25%;} /* 中央列宽窄 */.column.middle { width: 50%;} /* 相应式构造 - 宽窄小于600px时树立左右构造 */@media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; }}4. 底部地区
底部地区在网页的最下方，普遍包括版权消息和接洽办法等。
例
.footer { background-color: #F1F1F1; text-align: center; padding: 10px;}二、相应式网页构造
经过以高等进修咱们来创造一个相应式等页面，页面包车型的士构造会按照屏幕的巨细来安排：
案例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>名目</title><style>* { box-sizing: border-box;} body { font-family: Arial; padding: 10px; background: #f1f1f1;} /* 头部题目 */.header { padding: 30px; text-align: center; background: white;} .header h1 { font-size: 50px;} /* 导航条 */.topnav { overflow: hidden; background-color: #333;} /* 导航条链接 */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;} /* 链接脸色窜改 */.topnav a:hover { background-color: #ddd; color: black;} /* 创造两列 *//* Left column */.leftcolumn { float: left; width: 75%;} /* 右侧栏 */.rightcolumn { float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px;} /* 图像局部 */.fakeimg { background-color: #aaa; width: 100%; padding: 20px;} /* 作品卡片功效 */.card { background-color: white; padding: 20px; margin-top: 20px;} /* 列反面废除浮动 */.row:after { content: ""; display: table; clear: both;} /* 底部 */.footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px;} /* 相应式构造 - 屏幕尺寸小于 800px 时，两列构造改为左右构造 */@media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; }} /* 相应式构造 -屏幕尺寸小于 400px 时，导航等构造改为左右构造 */@media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; }}</style></head><body><div class="0207-e968-c8c2-b63e header"> <h1>我的网页</h1> <p>重置欣赏器巨细察看功效。</p></div><div class="e968-c8c2-b63e-b368 topnav"> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> <a href="#" style="float:right">链接</a></div><div class="c8c2-b63e-b368-f89c row"> <div class="b63e-b368-f89c-0fcf leftcolumn"> <div class="6590-f7fe-ea8b-34bf card"> <h2>作品题目</h2> <h5>xx 年xx月 xx日</h5> <div class="f7fe-ea8b-34bf-bfb2 fakeimg" style="height:200px;"><img src="img/bird.png"></div> <p>文本...</p> <p>当赤诚形成风气，畏缩和忧伤即无处安身。不足赤诚的人也没有精确的目的。赤诚使设想的轮子转化。一部分不足赤诚就象公共汽车没有汽油。 长于安置玩乐和处事，两者维持赤诚，即是最痛快的人。赤诚使卑鄙的话题变得灵巧。！</p> </div> <div class="ea8b-34bf-bfb2-8fd4 card"> <h2>作品题目</h2> <h5>xx 年 xx 月xx日</h5> <div class="34bf-bfb2-8fd4-d62a fakeimg" style="height:200px;"><img src="img/border.png"></div> <p>文本...</p> <p>十足事没辙探求完备，只有探求不遗余力。如许心无压力，出来的截止相反会更好！</p> </div> </div> <div class="bfb2-8fd4-d62a-b85e rightcolumn"> <div class="8fd4-d62a-b85e-aeea card"> <h2>对于我</h2> <div class="d62a-b85e-aeea-b506 fakeimg" style="height:100px;"></div> <p>6666</p> </div> <div class="b85e-aeea-b506-830e card"> <h3>抢手作品</h3> <div class="aeea-b506-830e-0207 fakeimg"><img src="img/fy2_wp.png"></div> </div> <div class="b506-830e-0207-e968 card"> <h3>关心我</h3> <p>本站颁布的体例与软硬件仅为部分进修尝试运用，请鄙人载后24钟点内简略， 不得用来任何贸易用处，要不成果自夸，请扶助购置正版软硬件！如侵吞到您的权力,请准时报告咱们,咱们会准时处置。证明：为非获利性网站 不接收任何扶助和告白。</p> </div> </div></div><div class="830e-0207-e968-c8c2 footer"> <h2>底部地区</h2></div></body></html>三、归纳
正文重要引见了Html的网页构造构造，怎样去领会搜集的构造，引见了罕见的挪动摆设的三种网页形式，结果经过一个小名目，归纳之前解说的实质。
代码很大略，蓄意不妨扶助你进修。