前端三剑客实验1-2--复盘

已于 2023-12-17 16:01:35 修改
阅读量186 收藏
点赞数 5
分类专栏： html 文章标签： 前端 javascript 开发语言
于 2023-12-02 23:01:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52495761/article/details/134759245
版权

实验一

源码文件(不提供word)，详见文章末尾，免费自提
  1. 根据下图所示，使用网页表格标签编制学生信息登记表。
  2. 编制一个网页数据表单，尽量用上尽可能多的输入组件标签。
    在这里插入图片描述

自我实现图

在这里插入图片描述

代码实现： 亮点是实现了通过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

-Z_Nuyoah
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Docker-学习总结（三剑客之Docker-compose）
01-20
文章目录相关网站背景概念相关命令docker-compose.yml文件中的命令练习 相关网站 ...背景 Docker Compose 的前身是 Fig。Fig 是一个由 Orchard 公司开发的强有力的工具，在当时是进行多容器管理的最佳方案。...
Docker三剑客之docker-machine(自动化部署docker)
01-07
一、docker-machine是什么？ 什么是docker-machine，简单...docker-machine就是docker公司官方提出的，用于在各种平台上快速创建具有docker服务的虚拟机的技术2.docker-machine命令 2、docker-machine命令 docker-mac
草根三剑客之CMS -ASP源码.zip
12-16
ASP源码，压缩包解压密码：www.cqlsoft.com
day032-前端三剑客-H5快速入门+VScode.zip
09-05
day032-前端三剑客-H5快速入门+VScode.zip
《python三剑客项目》-外星人入侵游戏，python全代码
10-24
《python三剑客项目》——外星人入侵游戏，python全代码
日常工作记录目录
最新发布
与海
06-21 103
EasyExcel实现二维码下载与展示
webClient + fastJSON2 获取json格式的数据，同时解析至java class 并 下划线转驼峰
qq_46662528的博客
06-17 211
决定返回值是什么格式一般情况可以不写，但这里要获取JSON格式的。可以将JSON和java的class属性自动进行匹配。webClient中。fastJSON2中。
netcore 生成验证码
qq_51172697的博客
06-20 172
提供一个生成验证码和校验的接口。
快速压缩前端项目
lyd的博客
06-15 474
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
Web前端写随机抽奖：技术与创意的碰撞
yvnmth_025y的博客
06-16 316
这些创意构思不仅能够提升抽奖活动的趣味性和互动性，还能够吸引更多的用户参与。除了基本的抽奖功能和界面设计外，我们还需要关注用户的交互体验。同时，我们还要确保抽奖过程的公平性和透明度，避免出现任何作弊行为。通过构建合理的抽奖逻辑、设计美观的界面、优化交互体验以及拓展创意构思，我们可以为用户带来更加有趣和丰富的抽奖体验。在Web前端的世界里，随机抽奖功能不仅是一种常见的交互元素，更是技术与创意的完美结合。下面，我们将从四个方面、五个方面、六个方面和七个方面，深入探讨Web前端实现随机抽奖的技术要点和创意构思。
qml实现点击按钮往Columnt添加一个组件对象
海涛高软
06-17 185
FR：徐海涛(hunkxu)
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 257
【element 】修改下拉菜单
【React】React 的StrictMode作用是什么，怎么使用？
读心悦
06-17 170
React的是一个用于在开发环境中检测潜在问题的工具，它可以帮助开发者在开发阶段识别并解决一些常见的编码问题，从而提高代码质量和应用的可靠性。以下是。
前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理
inksnowHL的博客
06-20 174
前端深拷贝非常优质的函数，包含函数、循环引用，Set、Map、Date、自定义构造函数等处理。
React.FC`＜ChildComponentProps＞`解释
weixin_63681863的博客
06-18 492
通过使用进行类型注解，你可以确保组件的 props 类型安全，并享受更好的开发体验，包括智能提示和自动补全。这种类型注解在团队合作和大型项目中尤其重要，因为它可以显著减少由于类型错误引起的 bug。
vue格网图
南北粉面馆
06-16 323
【代码】vue格网图。
vue3 中传递 fromData 格式的写法
阿乐的博客
06-19 202
在我们前端调用接口的使用中 我们会传递参数 大部分是json 格式的 但是有的时候 回事 formData 的格式的 那我们前端就需要修改一下 传递对应的东西。如果不传递 paramsFormdata 就默认是json 传就是formData 的格式的。我说一下我使用Taro 框架中的写法 就是移动端 和小程序中的写法。我这里有一个判断 当我需要传递这个 formData 的格式的时候。我说一下在web端中的使用 我使用的是tdesign 的框架。人家封装好的request 的文件我就不写了。
Vue3中的常见组件通信（超详细版）
m0_63165331的博客
06-19 940
本文详细讲述了vue3中常用的组件通信使用方法。主要包括props、自定义事件、mitt、v-model、$attrs、$refs和$parent、probide和inject、pinia、插槽。
第二十四节:带你梳理Vue2 : Vue具名插槽/作用域插槽/v-slot指令
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-20 441
没有使用具名插槽的问题: 有的时候我们在使用子组件时,在子组件模板上不同的位置插入不同的内容, 只有一个插槽显然没法满足我们的需求
文本处理三剑客grep -E使用方法
11-23
grep -E是grep命令的扩展正则表达式版本，它支持更多的正则表达式语法。下面是grep -E的使用方法： 1. 搜索单个文件中的匹配行： ``` grep -E 'pattern' filename ``` 其中，pattern是要搜索的正则表达式，filename是要搜索的文件名。 2. 搜索多个文件中的匹配行： ``` grep -E 'pattern' file1 file2 ... ``` 其中，pattern是要搜索的正则表达式，file1、file2等是要搜索的文件名。 3. 搜索某个目录下所有文件中的匹配行： ``` grep -rE 'pattern' directory ``` 其中，pattern是要搜索的正则表达式，directory是要搜索的目录名。 4. 搜索某个目录下所有文件中的匹配行，并显示匹配行所在的文件名： ``` grep -rEl 'pattern' directory ``` 其中，pattern是要搜索的正则表达式，directory是要搜索的目录名。 5. 搜索某个目录下所有文件中的匹配行，并显示匹配行所在的文件名和行号： ``` grep -rEn 'pattern' directory ``` 其中，pattern是要搜索的正则表达式，directory是要搜索的目录名。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-Z_Nuyoah

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值