CSS

		<style type="text/css">      			*{      				padding: 0;      				margin: 0;      			}      			body{      				padding-bottom:100px ;      			}      			header{      				width: 980px;      				height: 130px;      				border: 2px solid dodgerblue;      				margin: 0 auto;      			}      			nav{      				width: 980px;      				height: 40px;      				border: 5px solid green;      				margin: 0 auto;      			}      			nav a{      				display: block;      				float: left;      				text-decoration: none;      				font-size: 20px;      				text-align: center;      				line-height: 40px;      				color: blue;      				width: 100px;      			}      			/*大区域开始*/      			#myur{      				width: 980px;      				height: 400px;      				border: 3px solid blue;      				margin: 0 auto;      			}      			#myur aside{      				width: 220px;      				height: 400px;      				background: blueviolet;      				float: left;      			}      			#myur article{      				width: 750px;      				height: 400px;      				background: palegreen;      				float: right;      			}      			footer{      				width: 980px;      				height: 100px;      				border: 5px solid green;      				margin: 0 auto;      			}      		</style>

HTML

<!--头部-->      <header>      头部用 header 标签      </header>      <!--头部结束-->      <!--导航条-->      <nav>      <a href="">导航条</a>      <a href="">导航条</a>      <a href="">导航条</a>      <a href="">导航条</a>      <a href="">导航条</a>      <a href="">导航条</a>			      </nav>      <!--导航条结束-->      <!--大区域开始-->      <div id="myur">      <!--侧边栏开始-->      <!--侧边栏用aside-->      <aside>      下拉列表:      <br />      <select>      <!--用optgroup对下拉列表分组   label标签; 标记-->      <optgroup label="云浮">      <option>云城区</option>	      <option>云安区</option>	      <option>郁南县</option>	      <option>新兴县</option>	      <option>罗定市</option>	      </optgroup>      <optgroup label="肇庆市">      <option>肇庆市</option>	      <option>端州区</option>	      <option>鼎湖区</option>	      <option>广宁县</option>	      <option>怀集县</option>	      </optgroup>      </select>      <!--<progress> 标签标示任务的进度（进程）。 prograss 进步; 前进意思; -->      <!--简单理解 prograss  进度条-->      <!--max最大值100,value当前值33-->      <progress max="100" value="33"></progress>      <!--min最小0 max最大100   low小于多少的意思 成度轻的 high大于80     类列一般用来衡量密码强度的那种效果-->      <!--value="55"取值是中度的：小于30是轻的，30到80是中的，大于80是大的-->      <!--meter计量器; 计量仪  也是进度条，进度条一般用得很少-->      <meter min="0" max="100" low="30" high="80" value="55"></meter>      </aside>      <!--侧边栏结束-->  <!--article 表示显示文章内容区域标签-->      <article>      <h1>丈夫在家打游戏不管任何事, 说是为了教好孩</h1>      <!--time这个标签用来指定发表文章内容的日期-->      <!--属性pubdate：指示<time>元素中的日期/时间是文档（或最近的前辈<article>元素）的发布日期-->      发表时间:<time pubdate="2018.04.27">2018.04.27</time>      <!--属性datetime: 规定日期、时间，否则，由元素的内容给定日期、时间。-->      <!--非当前时间用datetime声明-->      <!--<time datetime="2020.06.06">2020.06.06</time>      2020年大家看奥运会呀 -->      <!--section 字面上理解为“块” 、“部分”。在html5网页中表现的意思跟字面理解差不多，即部分、块、模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。-->		      <section>      <h2>在家打游戏</h2>      <p>不能这样打游戏的......《永恒之塔》从一月末开始便逐步回升，通过春节版本、春季活动等不断推出的内容重获玩家好感。据悉，4月末该游戏将推出樱花庆典，这将让其市场占有率进一步上涨。</p>      </section>      <section>      <h2>对于理解他们作为玩家乃至消费者的角色至关重要</h2>      <!--mark 突出显示文本，标注一下  默认是加黄色，这个是可以改的-->      <!--ins：用下划线定义已经被插入文档如的文本，简单理解用下划线去强调的-->      <!--del 理解为加删除线标注-->      <p>中国的核心PC玩家每周<mark>花42个小时玩游戏</mark>，大部分都<ins>喜欢在高端PC上玩</ins>竞技类的游戏；与此同时，<del>核心手游玩家</del>每周玩游戏时长平均为25个小时，他们钟爱的游戏类型则是智能手机上玩法更为复杂的手游作品。</p>      </section>      </article>      </div>      <!--大区域结束-->      <!--底部开始-->      <!--底部专门的标签footer-->      <footer>      底部专门的标签footer      <!--address字面理解为“地址”，在html5中，它用于文档或者文章作者或拥有者的联系信息。注意，这里放的不是字面上理解的“地址”，而是指“联系信息”，可以包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。-->      <address>广东云浮市郁南县什么街门牌号56号</address>      <!--code表示用于标识程序代码   原样展示出来的代码     页面中放一些代码用code-->      <code>arler('你好');</code>      </footer>      <!--底部结束-->

代码效果图片：

原文链接：https://www.qiquanji.com/post/7726.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。