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

HTML与CSS实战练习


学了不久的基础中的基础了,今天就打算将理论转换为实践。下面是我仿造全国大学生四六级报名网仿写的网页。
[全国大学生四六级报名网](http://cet.etest.net.cn/) 步骤:
  1. 观察网页,想好如何布局。
  2. 做好准备工作,用HTML搭建一个大致的结构。
  3. 逐步完善每一个板块的内容。

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>
	
	<div class="photo">
		<img src="image/2.png" style="padding-top:5px;width:100%">
		<div class="photo2"><img src="image/3.png"></div>
</div>
	</div>

<div class="bottom">
	<div class="col-1">
		<ul>
			<li><a href="#"><img src="image/banner1.png"><p>进入报名</p>
				<p>ENTER</p>
			</a></li>
			<li><a href="#"><img src="image/banner2.png">注册新用户</a></li>
			<li><a href="#"><img src="image/banner3.png">找回已报名账号</a></li>
			<li><a href="#"><img src="image/banner4.png">补办成绩证明</a></li>
			<li><a href="#"><img src="image/banner5.png">快速打印准考证</a></li>
		</ul>
	</div>
	<div class="col-2">
		<img src="image/5.png"">
	</div>
	<div class="col-3">
		<img src="image/4.jpg">
		<h4>2018年下半年考试时间</h4>
		笔试:2018-12-15<br>
		上午:英语四级<br>
		下午:英语六级<br>
		口试:<br>
		2017-11-17:英语四级 &nbsp &nbsp 2018-11-18:英语六级
		<hr>
		<h4>2018年下半年考试报名提示</h4>
		1:2018年下半年考试报名仅限<span>北京、天津、河北、吉林、上海、安徽、河南、湖北、山东、福建、广东、广西、海南、重庆、四川、云南、甘肃、青海、澳门(口语)</span><br>
		2:报名未开始前,考生可进行注册及学籍信息验证操作,具体报名时间以各学校通知为准。<br>
		3:已完成CET4或CET6考试科目报名及缴费后,由于口语考位已满或暂未开放,可能会造成暂时无法报考对应口语科目,请随时再次登录系统进行查看。<br>
		4:<span>预计9月17日9:30,9月18日9:30,9月19日11:30,9月26日13:00及14:30,9月27日10:00为报名高峰时段,请各位考生结合自身情况,选择错峰报名,如遇网络拥堵,请稍后再试。</span><br><br>

	</div>
</div>


<div class="footer">
	<hr>
	<p class="p1">COPYRIGHT 中华人民共和国教育部考试中心 All RIGHTS RESERVED
		<p class="p2">京ICP备05031027号 (Powered by :49100493)</p>
   <p class="p3">建议浏览器:火狐浏览器、谷歌浏览器、IE9+、360浏览器(选择极速模式)</p>
</div>

CSS代码部分

*{
	margin: 0px;
}
.top{
	width: 70%;
	margin: 0 auto;
	
}
a{ 
	text-decoration: none;
	color: #5e5e5e;
	
}
.logo{
	font-weight:10px;
	font-size: 30px;
	border: 1px solid black;
	border-radius:70%;
	width: 100px;
	height:50px;
	text-align: center;
	line-height:50px;
}
.header{
	display: block;
}
 .text,.logo{
 	display: inline-block;
}

.text{
	
	margin:15px;
	color:#666;
}
.contract {
	float: right;


}
.contract p{
	color: darkgray;
	margin: 15px;
}
.contract span{
	font-size: 24px;
	font-weight: bold;
	color: #666;
 
}
.nav{
	width: 100%;
	background-color:#ccc;

}
.nav ul{
	width: 70%;
	margin: 0 auto;
	list-style: none;
	height: 40px;
}
.nav ul li{
	display: inline-block;
	font-weight: bold;
	font-size: 15px;
	width:100px;
	height: 40px;
	margin-right:10px;
	text-align: center;
	line-height: 40px;
	}
.nav ul li:hover{
	color: #ab4f92;
}
.middle{
	background-color:#ab4f92;}
.photo2{
	width: 70%;
	margin: 0 auto;
}
.bottom{
	width: 75%;
	margin: 0 auto;
	clear:both;
	overflow: auto;
}
.col-1,.col-2,.col-3{
	width:25%;
	float: left;
	
}
.col-1,.col-2{
	margin-left:20px;
	margin-top: 25px;
}

.col-1{
	margin-top: 10px;
}

.bottom ul{
	list-style: none;
	margin-top: 20PX;
}
.bottom  ul li{
	font-size: 20px;
	width: 250px;
	background-color: #e9e9e9;
	margin-top: 10px;
	
}
.bottom ul li:hover,.bottom ul a:hover{
	background-color:#ab4f92;
	color: white;
}
.bottom a,.bottom p{
	display: inline-block;
}
.col-3{
	margin-left:30px;
	margin-top:20px;
	font-size: 12px;
	line-height:2;
	width: 370px;


}
.col-3 span{
	color: red;
	font-weight: bold;
}
.footer {
	width: 75%;
	margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 50px;
}
.p1,.p2,.p3{
	text-align: center;
}
.p1{
	font-weight: bold;
    color: #666;
    font-size: 14px;
    line-height: 2em;
}
.p2{
	font-size: 12px;
	color: #666;

}
.p3{
	color: red;
	font-size: 12px;
}

我遇到的问题

  1. 在使用

display:inline ;

这一语句时,将父级元素和子级元素一起作用,结果当然不会有效果。应为同级元素才能作用。

2.在使用浮动时,会使父级元素坍缩,应使用

overflow:auto;

来清除浮动。


小结:不能一直看理论,应该时常找一些网页来练一练手,开始感觉很费时间,那是因为你对知识运用的还不够熟悉,多写几次应该就会好很多了。
  • 1
    点赞
  • 0
    评论
  • 9
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论
请先登录 后发表评论~
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

people&tiger

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值