网页制作

最新推荐文章于 2024-03-06 17:57:10 发布

任由天高

最新推荐文章于 2024-03-06 17:57:10 发布

阅读量342

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/fantasy_geek/article/details/104593188

版权

作业一：
HTML+CSS代码（内嵌式）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,hr,h2,p,dl,dt,dd,img{padding: 0;margin: 0;border: 0;}
			h2,.udtime{
				text-align: center;
			}
			hr{
				width: 67.5%;
				border: 2px solid;
				margin: auto;
			}
			.udtime{
				margin: 20px auto 10px;
			}
			.box{
				width: auto;
				height: 300px;
			}
			.box dt{
				float: left;
				width: 910px;
				height: 300px;
			}
			img{
				width: 660px;
				height: 280px;
				margin-left:250px ;
				margin-top: 10px;
				border: 1px solid lightgray;
			}
			.box dd{
				float: left;
				width: 360px;
				margin-left:20px;
			}
			p{
				text-indent: 2em;
				margin:12px 10px ;
			}
		</style>
	</head>
	<body>
		<h2>传智播客设计学院简介</h2>
		<p class="udtime">更新时间：2015年07月28日14时08分 来源：传智播客</p>
		<hr />
		<dl class="box">
			<dt><img src="img/cuanzhiboke.png"/></dt>
			<dd>
				<p><strong>传智播客设计学院</strong>专注于平台设计师、网页设计实、UI设计师的培训。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循环渐进、充实饱满，结合大量的案例和实战项目，毕业后相当与两年工作经验。</p>
				<p><strong>传智播客设计学院</strong>交给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，成为平面、网页、UI设计都精通的全能设计师。</p>
				<p>迄今为止<strong>传智播客设计学院</strong>已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。</p>
			</dd>
		</dl>
	</body>
</html>

效果图：在这里插入图片描述作业二：
HTML+CSS代码（内嵌式）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{font-size: 12px;font: "宋体";}
			body,table,form,input{padding: 0;margin: 0;border: 0;}
			#box{
				width: 696px;
				height: 442px;
				background-color: #FFC0CB;
				border: 5px solid #9DB5F3 ;
				margin: 50px auto 0;
			}
			.header{text-align: center;}
			.content{
				margin:10px 40px 0;
			}
			tr{
				margin: 3px;
			}
			.txt00{
				background-color:#EBEBE3 ;
			}
			.txt00,.txt01{
				width:225px ;
				height:27px;
				border: 2px solid #9DB5F3;
			}
			.txt02{
				width:112px;
				height: 35px;
				padding: 4px;
				background-color: #EBEBE3;
				border: 2px solid #9DB5F3;
			}
			.space{
				height: 10px;
			}
			.submit,.reset{
				width: 110px;
				height: 30px;
				background-color: #EBEBE3;
				border: 2px solid #9DB5F3;
			}
			.reset{
				margin: auto 90px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h1 class="header">员工信息登记表</h1>
			<form action="#" method="post" class="biaodan">
				<table class="content">
					<tr>
						<td>用户登录名：</td>
						<td><input type="text" placeholder="wcz@163.com" class="txt00" /></td>
					</tr>
					<tr>
						<td>真实姓名：</td>
						<td><input type="text" placeholder="王传智" class="txt01" />（ 必须，只能输入汉字 ）</td>
					</tr>
					<tr>
						<td>真实年龄：</td>
						<td><input type="text" class="txt01" />（ 必填 ）</td>
					</tr>
						<td>出生日期：</td>
						<td><input type="date" value="   年  /月/日" class="txt01" />（ 必填 ）</td>
					<tr>
						<td>电子邮箱：</td>
						<td><input type="email" placeholder="123456@126.com" class="txt01" />（ 必填 ）</td>
					</tr>
					<tr>
						<td>身份证号：</td>
						<td><input type="text" class="txt01" />（ 必填，能够以数字、字母x结尾的短身份证号 ）</td>
					</tr>
					<tr>
						<td>手机号码：</td>
						<td><input type="text" class="txt01" />（ 必填 ）</td>
					</tr>
					<tr>
						<td>幸运颜色：</td>
						<td><input type="color" class="txt02" />（ 请选择你喜欢的颜色 ）</td>
					</tr>
					<tr><td class="space" colspan="3"></td></tr>
					<tr>
                        <td></td>
						<td>
							<input type="submit" value="提交" class="submit" />
							<input type="reset" value="重置" class="reset" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>