实验一
源码文件(不提供word),详见文章末尾,免费自提
- 根据下图所示,使用网页表格标签编制学生信息登记表。
- 编制一个网页数据表单,尽量用上尽可能多的输入组件标签。
自我实现图
代码实现: 亮点是实现了通过input的标签自定义输入,将border与input之间的边框取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息登记表</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px;
text-align: left;
min-width: 80px; /* 设置最小宽度,根据实际需要调整 */
}
th {
text-align: center;
}
textarea {
width: calc(100%);
border: 0; /*隐藏 输入框的边框*/
padding: 6px;
box-sizing: border-box;
height: 100%; /* Set the height to 100% to fill the entire cell */
resize: vertical;
}
input[type="text"] {
width: calc(100%); /* Adjust the input field width */
border: 0;/*隐藏多行输入框的边框*/
padding: 6px; /* Adjust the padding for better appearance */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.vertical-text {
writing-mode: vertical-rl; /* 设置垂直显示 */
text-align: center;
}
</style>
</head>
<body>
<h3 style="text-align: center;">2013-2014年度第一学期国土资源学院学生信息登记表</h3>
<table style="margin: auto;height: 100vh;width: auto;">
<tr>
<th>姓名</th>
<td><input type="text" name="name"></td>
<th>性别</th>
<td><input type="text" name="gender"></td>
<th>出生年月</th>
<td><input type="text" name="birthdate" ></td>
<td rowspan="4" style="width: 180px;"></td>
</tr>
<tr>
<th>年级班</th>
<td><input type="text" name="grade"></td>
<th>专业</th>
<td><input type="text" name="major"></td>
<th>学号</th>
<td><input type="text" name="studentId"></td>
</tr>
<tr>
<th>联系方式</th>
<td><input type="text" name="contact"></td>
<th>寝室号</th>
<td><input type="text" name="dormitory"></td>
<th>政治面貌</th>
<td><input type="text" name="politicalStatus"></td>
</tr>
<tr>
<th>身份证号</th>
<td colspan="5"><input type="text" name="idNumber"></td>
</tr>
<tr>
<th>家庭住址</th>
<td colspan="6"><input type="text" name="homeAddress"></td>
</tr>
<tr>
<th rowspan="2">家长电话</th>
<td colspan="6"><input type="text" name="parentContact1"></td>
</tr>
<tr>
<td colspan="6"><input type="text" name="parentContact2"></td>
</tr>
<tr>
<th>紧急联系人</th>
<td><input type="text" name="emergencyContactName"></td>
<th>联系方式</th>
<td><input type="text" name="emergencyContactNumber"></td>
<th>与本人关系</th>
<td colspan="2"><input type="text" name="emergencyContactRelationship"></td>
</tr>
<tr>
<th class="vertical-text" rowspan="5">上期情况</th>
<th>获奖情况</th>
<td colspan="5"><input type="text" name="award"></td>
</tr>
<tr>
<th>任职情况</th>
<td colspan="5"><input type="text" name="position"></td>
</tr>
<tr>
<th>过级情况</th>
<td colspan="5"><input type="text" name="promotion"></td>
</tr>
<tr>
<th>考证情况</th>
<td colspan="5"><input type="text" name="certification"></td>
</tr>
<tr>
<th>实践情况</th>
<td colspan="5"><input type="text" name="practice"></td>
</tr>
<tr>
<th class="vertical-text">本期目标</th>
<td colspan="6" rowspan="5"><textarea name="goals"></textarea></td>
</tr>
</table>
</body>
</html>
实验二
1、实现如下图所示的信封
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,div,span{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "微软雅黑";
}
#letter{
width: 800px;
height: 380px;
border:5px solid blue;
margin: 140px auto;
box-shadow: 10px 10px 5px #666;;
position: relative;
}
#recevier-postcode{
position: absolute;
left: 5px;
top: 5px;
/* border:1px solid red; */
}
#sender-postcode{
position: absolute;
right: 5px;
bottom: 5px;
/* border:1px solid red; */
}
#recevier-postcode>span,#sender-postcode>span{
display: inline-block;
width: 45px;
height: 42px;
margin-left: 5px;
border:3px solid black;
text-align: center;
line-height: 42px;
font-size: 26px;
}
#address{
position: absolute;
left: 20px;
top: 120px;
width: 95%;
}
#address>span{
display: block;/*分行的一种办法,将span设置成一个块,独占一行*/
border-bottom:3px solid black;
margin-top: 15px;
padding-bottom: 5px;
font-size:30px;
font-weight: bold;
}
#address>span:first-child{
padding-left: 50px;
}
#address>span:nth-child(2){
text-align: right;
padding-right: 50px;
}
#stamp{
width: 100px;
height: 120px;
display: inline-block;
/* border:1px solid red; */
position: absolute;
right: 5px;
top: 5px;
background-image: url(./stamp.jpg);
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="letter">
<div id="recevier-postcode">
<span>3</span>
<span>5</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>9</span>
</div>
<div id="sender-postcode">
<span>3</span>
<span>5</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>1</span>
</div>
<div id="address">
<span>福建农林大学金山学院计算机系</span>
<span>王海涛(收)</span>
</div>
<span id="stamp"></span>
</div>
</body>
</html>
2、实现如下图所示的图文链接
具体实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "微软雅黑";
}
body{
background-image: url(imgs/bg.jpg);
background-repeat:repeat;
}
#imgLink{
width: 890px;
height: 130px;
/* border:1px solid red; */
margin: 100px auto;
background: url(imgs/ico1.png) left center no-repeat,
url(imgs/ico2.png) right center no-repeat;
}
#linkList{
list-style-type: none;
margin-left: 60px;
}
#linkList>li{
width: 135px;
height: 130px;
/* border:1px solid blue; */
float: left;
position: relative;
}
#linkList>li>a{
display: inline-block;
width: 86px;
height: 130px;
/* background-color: yellowgreen; */
text-decoration: none;
color: #666;
text-align: center;
font-size: 13px;
background: url(imgs/ico4.png) 0px 25px no-repeat;
}
#linkList>li>a:hover{
color:red;
background: url(imgs/ico5.png) 0px 25px no-repeat;
}
#linkList>li>a>img{
position: absolute;
left: 0px;
top: 28px;
z-index: -1;
}
#linkList>li>.bg{
display: inline-block;
width: 49px;
height: 130px;
/* background-color: brown; */
position: absolute;
right: 0px;
top: 0px;
background: url(imgs/ico3.png) left center repeat-x;
}
</style>
</head>
<body>
<div id="imgLink">
<ul id="linkList">
<li>
<a href="#">
甜美清新 <img src="./imgs/1.jpg">
</a>
<span class="bg"></span>
</li>
<li>
<a href="#">
甜美清新 <img src="./imgs/2.jpg">
</a>
<span class="bg"></span>
</li>
<li>
<a href="#">
甜美清新 <img src="./imgs/3.jpg">
</a>
<span class="bg"></span>
</li>
<li>
<a href="#">
甜美清新 <img src="./imgs/4.jpg">
</a>
<span class="bg"></span>
</li>
<li>
<a href="#">
甜美清新 <img src="./imgs/1.jpg">
</a>
<span class="bg"></span>
</li>
<li>
<a href="#">
甜美清新 <img src="./imgs/2.jpg">
</a>
<span class="bg"></span>
</li>
</ul>
</div>
</body>
</html>
源码自提(若过期,请私信留言
)
实验一
链接:https://pan.baidu.com/s/1wnZT5yOSYjLBWtoLDeX7CA?pwd=9vmq
提取码:9vmq
实验二
链接:https://pan.baidu.com/s/17UkqwmGpi8BUvusB_yVAZw?pwd=9q7r
提取码:9q7r