HTML与CSS实战练习——全国大学生四六级报名网的仿写

最新推荐文章于 2025-04-29 09:41:00 发布

people&tiger

最新推荐文章于 2025-04-29 09:41:00 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44029057/article/details/84995332

本文是一篇关于HTML与CSS实战练习的教程，通过仿写全国大学生四六级报名网来讲解布局、HTML结构搭建及CSS内容完善。在实践中，作者提到了遇到的两个问题：1) display:inline 对同级元素的影响；2) 使用浮动可能导致的父级元素坍缩及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML与CSS实战练习

学了不久的基础中的基础了，今天就打算将理论转换为实践。下面是我仿造全国大学生四六级报名网仿写的网页。
[全国大学生四六级报名网](http://cet.etest.net.cn/) 步骤：

观察网页，想好如何布局。
做好准备工作，用HTML搭建一个大致的结构。
逐步完善每一个板块的内容。

PS：注意从整体到局部，这样不会出现太大的问题。
HTML代码部分

<div class="top">
	<div class="header">
		<div class="logo">CET</div>
		<div class="text">
			<p>全国大学英语四、六级考试(CET)<br>
			College English Text Band4 and Band6</p></div>
		<div class="contract">
		<p>客服电话 <br><span>010-62987880</span> </p>
		</div></div></div>
<div class="middle">
  <div class="nav">
		<ul>
			<li><img src="image/1.png">&nbsp &nbsp &nbsp首页</li>
			<li>考试简介</li>
			<li>考生须知</li>
			<li>考试时间</li>
			<li>报名流程</li>
			<li>常见问题</li>
			<li>特别提示</li>
		</ul></div>