HTML随便写写啦

原创 已于 2022-03-22 21:40:14 修改 · 326 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

于 2022-03-20 14:13:27 首次发布
这段内容展示了三个不同的HTML页面设计示例：班级座位表、个人简历模板和大学生恋爱观调查问卷。每个示例都包含了基本的HTML结构，使用表格布局，并通过CSS进行了样式定制，如字体大小、颜色和对齐方式等。其中，恋爱观调查问卷包含了多项选择和填空题，用于收集大学生的恋爱观念信息。

按照这个样式进行页面设计

在这里插入图片描述

代码实现：


<!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>testo1</title>
</head>
<body>
    <p style="text-align: center;"> 班级座位表</p>
   
    <table border="1px"  cellspacing="0"   class="lone">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="6"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            
            <td></td>
            <td style="color: red;text-align: center; ">我在这</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
         
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
           
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr >
            <td colspan="8">讲台</td>
            
        </tr>
    

    </table>
</body>
<style type="text/css">
.lone{
    width: 1000px;
    height:500px;
    margin: auto;
    font-size: 13px;

}

tr {
    width: 500px;
    height: 50px;
}

td {
    width: 50px;
    text-align: center;
    font-size: 15px;
}



</style>
</html>

在这里插入图片描述

代码实习：


<!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>testo1</title>
</head>
<body>
    <p style="text-align: center;"> 我的简历</p>
   
    <table border="1px"  cellspacing="0"   class="lone">
        <tr>
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>出生年月</td>
            <td></td>
            <td rowspan="4"></td>
        </tr>
        <tr>
            <td>民族</td>
            <td></td>
            <td>政治面貌</td>
            
            <td></td>
            <td>身高</td>
            <td></td>
        </tr>
        <tr>
            <td>学制</td>
            <td></td>
            <td>学历</td>
            
            <td></td>
            <td>户籍</td>
            <td></td>
        </tr>
        <tr>
            <td>专业</td>
            <td></td>
            <td colspan="2">毕业院校</td>
            
            
            <td></td>
           
            <td></td>
        </tr>
        <tr>
            <td colspan="7">技能、特长、爱好</td>
        </tr>
        <tr>
            <td>外语等级</td>
            <td colspan="2"></td>
            <td>计算机等级</td>
           
          
            <td colspan="3"></td>
        </tr>
        <tr>
            <td colspan="7">联系方式</td>
        </tr>
        <tr >
            <td>通讯地址</td>
            <td colspan="2"></td>
            <td>联系电话</td>
           
          
            <td colspan="3"></td>
            
        </tr>
        <tr >
            <td>E-mail</td>
            <td colspan="2"></td>
            <td>邮编</td>
           
          
            <td colspan="3"></td>
            
        </tr>
        <tr >
            <td></td>
            <td colspan="2"></td>
            <td></td>
           
          
            <td colspan="3"></td>
           
            
        </tr>
        <tr >
            <td colspan="7">自我评价</td>
 
            
        </tr>
        <tr >
            <td colspan="7"></td>

            
        </tr>
    

    </table>



</body>



<style type="text/css">
.lone{
    width: 1000px;
    height:500px;
    margin: auto;
    font-size: 20px;

}

tr {
    width: 200px;
    height: 20px;
}

td {
    width: 20px;
    text-align: center;
    font-size: 10px;
}



</style>
</html>

在这里插入图片描述

代码实习：


<!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>test03</title>
</head>
<body>
    <div class="main">
    <h1 style="color: blue; text-align: center;" >90后大学生恋爱观调查问卷</h1>
    
    
    亲爱的文理学院同学:</br>
    你好，爱情是人与人之间的强烈的依恋、亲近、向往，以及无私专一并且无所不尽其心的情感。</br>
    古诗云，“窈窕淑女，君子好逑”，又有“所谓伊人，在水一方”还有“得成比目何辞死，愿作</br>
    鸳鸯不羡仙”。大学生正值青春年华，对美好的爱情总是充满了憧憬。为此，我们特地做一份关</br>
    于大学生恋爱观的调查问卷。请你仔细阅读题目及答案，根据自己对题目的理解，逐题填写。本</br>
    问卷的答案无所谓好坏对错，且问卷答案只做团体性分析，不做任何个别呈现。对外绝对保密，</br>
    所以请你据实放心填写。感谢你的合作。
    
    <hr style="border:1px dashed #000; height:1px">
    1.你的性别*</br>
        <input id="man" type="radio"  name="1"> A男
        <input id="man" type="radio"  name="1"> B女
        <hr style="border:1px dashed #000; height:1px">
        2.你所在的年纪是*</br>
        <input id="man" type="radio"  name="1"> A大一
        <input id="man" type="radio"  name="1"> B大二
        <input id="man" type="radio"  name="1"> C大三
        <input id="man" type="radio"  name="1"> D大四
        <hr style="border:1px dashed #000; height:1px">
        3.你的家庭结构是*</br>
        <input id="man" type="radio"  name="1"> A健全家庭
        <input id="man" type="radio"  name="1"> B单亲家庭
        <input id="man" type="radio"  name="1"> C重组家庭
        <input id="man" type="radio"  name="1"> D其他 
        <input style="outline: none;"></br>
        4.愿得一人心，白头不分离，你能接受一下哪些恋情*
        <p style="color: blue;">【多选题】</p>
        <input type="checkbox" value="sleep" name="hobby"/>异地恋
	<input type="checkbox" value="code" name="hobby"/>师生恋
	<input type="checkbox" value="chat" name="hobby"/>姐弟恋
	<input type="checkbox" value="game" name="hobby" />网恋
    <input type="checkbox" value="game" name="hobby" />同性恋
    <input type="checkbox" value="game" name="hobby" />忘年恋</br>
    5.关于恋爱,你有哪些看法?或者你存在什么困惑?</br>
    <input type="text" placeholder="有什么困惑或看法" style="width: auto;"></br>

    <hr style="border:1px dashed #000; height:1px">
    <button type="button" c style="background-color: blue;color: aliceblue;" >提交</button>

</div>

</body>



<style type="text/css">


tr {
    width: 200px;
    height: 20px;
}

td {
    width: 20px;
    text-align: center;
    font-size: 10px;
}
.main{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
text-align: center;
}


</style>
</html>

互相点个赞呗！

手把手教你基于HTML、CSS搭建我的相册（下）
官方推荐
03-22 1万+
利用HTML、CSS搭建我的相册
html中写switch,switch语句使用
weixin_42342206的博客
05-31 4582
在C语言中，switch语句是开关语句，一般与case、break、default配合使用，对流程进行控制。 switch语句的语法规则： switch ( 变量表达式 ) { case 常量1 :语句;break; case 常量2 :语句;break; case 常量3 :语句;break; ... case 常量n:语句;brswitch 语句用法 功能：switch语句是多分支选择语句.用...
html中竖线怎么写,网页中竖线的几种做法
weixin_28954859的博客
05-31 7009
Q：网页中竖线的几种做法A：1、用水平线做：一般水平线的是宽长高短color=#000000>，做竖线我们可以反过来宽短高长，width="1"size="1000"color=#000000>，怎么样？竖线出来了吧？不过这个做法我发现好象有个BUG，就是高只能显示100px的，你设的再高也没用！2、用表格做：(1) 代码如下：height="1000" frame=rhs>st...
html中css该如何写,内部样式表css如何写？写在html哪里？
weixin_33637628的博客
05-30 1941
内部样式表css如何写？写在html哪里？先看内部样式表的用法：当单个文件需要特别样式时，就可以使用内部样式表。你可以在html网页的 head 部分通过 标签定义内部样式表，具体写法如下：在与之间添加你要控制标签的属性和对应的值即可，如乐老师举例如下：我随便在html网页里面写上一个h1标签和p标签，默认显示效果如图：假设如乐老师想把h1标签和p标签的字体都变成14像素，颜色为红色，水平对齐方...
html中如何写两层循环,在html中写for循环格式
weixin_34712106的博客
06-02 3796
1.js中的for循环输出,怎么输出到html中的指定位置 循环li需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。2、在index.html中的var a = ['Alice', 'Bob'];for (var i = 0; i < a.length; i++) {$('ul').append...
邮箱注册的html怎么写,邮箱格式怎么写 邮箱的正确写法
weixin_39866741的博客
06-22 6027
邮箱格式是用户名@域名，用户名是注册时的名字，@是分隔符，@后面的域名是提供邮箱注册的网站域名地址，比如QQ邮箱就是QQ号加@qq.com，163邮箱就是用户名加@163.com，126邮箱是用户名加@126.com，139邮箱是用户名加@139.com。邮箱格式怎么写邮箱的格式可不是随便乱写的哦，只有写正确了，这个邮箱才是有效的。邮箱的书写格式都是有要求的，那邮箱格式怎么写?通常邮箱格式是ema...
springboot中写html,springboot如何快速在项目中添加html文件并通过请
weixin_29887801的博客
05-31 2305
如今应用springboot开发设计的项目大部分全是前后端分离的，很多企业java后台管理开发者在项目中看不见有页面文件的存有，全是出示服务项目插口给前端开发去启用那么个方式。可是有的人就是说愿意在项目中加上html页面，并根据电脑浏览器键入详细地址浏览这一html界面，随后在这一html界面中根据js的ajax发get、post恳求去检测启用自身的controller，或是文件上传到自身的con...
vue可不可用html写,可以直接使用html直接写内容,为什么要用vue.js
weixin_34204530的博客
06-17 3487
我也不跟你说废话，有本事就别往下看。为什么要用Vue？因为Vue不用写操作DOM的代码。简简单单一句话。Vue不操作DOM有什么好处？如果你的页面样式要改变(改版)，首先你要改html对吧，要改div里嵌套ul或者div嵌套div等等，改变这些之后你又要改变那些操作DOM的代码或者改动比较大的操作DOM的代码直接删除重新，因为样式变了。操作DOM能不能不要了，答案是可以的于是Vue诞生了(它诞生之...
html写一个简单的浏览页面
m0_48437268的博客
07-07 6163
html写一个简单的浏览页面 模仿百度百度百科来写一个浏览页面 效果图如下 第一步：安装编程软件 编写html文件可以用很多软件甚至记事本都可以，由于记事本使用不方便，这里使用比较常用的vscode，网上下载安装即可 安装之后插件安装，点击最左侧的按钮 在输入框中输入关键词chinese就可以找到汉化包，点击安装即可 下面是我安装的几个常用的插件 第二步：创建html文件 新建文件 将其后缀名改为html，这里将其保存在html命名的文件夹中 生成html框架：！+tab 修改标题 框架
简单写一个html网页，汇总常用网址
Java 领域技术分享
10-23 3915
简单写一个html网页，汇总常用网址
html 长空格怎么写
tanmx219的博客
11-29 2492
经常碰到要写长空格的情况，但使用&nbsp只能有一个空格，10个就得写10次，够傻瓜的吧！ 上网一搜，发现几乎没什么好答案。想了一下，决定这么干 右边留点距离：30px 左边有距离啦，现在随便写点什么
写的一个静态网站随便写的
06-16
标题中的“写的一个静态网站随便写的”表明这是一个关于创建静态网站的主题。静态网站是指由HTML、CSS和JavaScript等静态文件组成，不包含服务器端动态脚本的网站。这些网站的内容在用户请求时不会改变，而是预先...
纯html+css的写的仿windows XP计算器
08-09
无聊随便写了个，没有使用图片，除了个别细节，基本和xp自带的计算器样式非常接近。
ssm框架里面前端拿HTML写,基于SSM框架的web开发——ajax实现先后台数据交互
weixin_39605521的博客
06-08 1213
前台向后台传输数据1丶用传统的form表单提交，举个栗子： 假设在第一个文本框中输入 admin ,在第二个密码框中输入 123 ，那么当点击submit提交按钮时，表单中的数据将会封装成以下格式的一个字符串发送到后台："username=admin&password=123" 。这种字符串就是江湖人称的 url编码字符串(application/x-www-form-urlencode...
HTML+layui表单校验范围值，根据条件显示隐藏某输入框
weixin_58412143的博客
01-06 227
【代码】HTML+layui表单校验范围值，根据条件显示隐藏某输入框。
XML与HTML：结构化数据的基石
csbysj2020的博客
01-06 430
XML是一种用于存储和传输数据的标记语言。它允许用户自定义标签，从而创建结构化的数据格式。HTML是一种用于创建网页的标准标记语言。它通过标记标签来描述网页的结构和内容。XML和HTML都是结构化数据的重要工具。XML为数据存储和交换提供了灵活性和可扩展性，而HTML则为网页开发提供了丰富的标记标签和易于理解的结构。在现代网络技术中，两者发挥着不可替代的作用。了解XML和HTML的特点和应用场景，有助于我们更好地应对各种数据存储和展示需求。
HTML 五子棋实现方法
back_room的博客
01-09 278
使用HTML创建棋盘网格，CSS美化样式，JavaScript处理游戏逻辑。
10.5 PyQuery：jQuery 风格的 Python HTML 解析库
最新发布
专注于ArcGIS实用技巧与二次开发的分享
01-10 155
PyQuery是一个jQuery风格的Python HTML解析库，提供与jQuery相似的API，适合熟悉jQuery语法的开发者使用。文章介绍了PyQuery的安装方法（pip install pyquery）和四种初始化方式（HTML字符串、本地文件、lxml对象、URL请求）。详细讲解了基础操作包括元素选择、遍历、获取属性/文本/HTML内容，以及伪类选择器使用（如:first-child、:contains()）。最后提供了常用选择器速查表，涵盖基础选择器、层级选择器和属性选择器等核心功能，帮助开
【前端Web开发HTML5+CSS3+移动web视频教程】01 html- 标签之文字排版、图片、链接、音视频
m0_72900498的博客
01-07 697
HTML超文本标记语言超文本是什么？链接标记是什么？标记也叫标签。带尖括号的文本。
用html随便写一个网页
04-03
DOCTYPE html> <html> <title>My First Webpage <h1>Welcome to My Webpage <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

我想去拉萨。

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

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

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

打赏作者

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

抵扣说明：

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

余额充值