实训第二天：表单与快速入门css

最新推荐文章于 2024-09-10 12:43:55 发布
最新推荐文章于 2024-09-10 12:43:55 发布
阅读量85 收藏
点赞数 2
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45647409/article/details/117486296
版权

一.表单
1.简介
（1） HTML 表单是 HTML 文档中的一个区域
（2）HTML 表单这个区域中包含了一系列的可交互元素
（3）HTML 表单主要用于收集用户输入信息
2.表单元素
表单提交后，服务端响应地址 发送数据方式:post/get

<from>
...
</from>

3.常用元素
表单交互元素
（1）文本输入元素：<input type="text">
（2）单选框元素：<input type="radio"
（3）复选框元素：<input type="checkbox">
（4）文本去元素：<textarea>...</textarea>
（5）下拉选择元素：<select>...</select>
（6）按钮元素：<button type="XXX">
4.练习——个人简历

<!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>个人简历</title>
</head>

<body>
    <form action="">
        <table border="1" align="center">
            <h2 align="center">个人简历</h2>
            <tr align="center">
                <td style="font-weight:bold;">姓名</td>
                <td><input type="text"></td>
                <td style="font-weight:bold;">性别</td>
                <td><input type="text"></td>
                <td style="font-weight:bold;">出生年月</td>
                <td><input type="text"></td>
                <td rowspan="4"><input type="file" style="font-weight:bold;"></td>
            </tr>
            <tr align="center">
                <td style="font-weight:bold;">民族</td>
                <td><input type="text"></td>
                <td style="font-weight:bold;">政治面貌</td>
                <td><input type="text"></td>
                <td style="font-weight:bold;">身高</td>
                <td><input type="text"></td>
            </tr>
            <tr align="center">
                <td style="font-weight:bold;">学制</td>
                <td><input type="text"></td>
                <td style="font-weight:bold;">学历</td>
                <td><input type="text"></td>
                <td style="font-weight:bold;">户籍</td>
                <td><input type="text"></td>
            </tr>
            <tr align="center">
                <td style="font-weight:bold;">专业</td>
                <td><input type="text"></td>
                <td colspan="2" style="font-weight:bold;">毕业学校</td>
                <td colspan="2" style="font-weight:bold;"><input type="text" style="width: 97%; height: 100%"></td>
            </tr>
            <tr align="center">
                <td colspan="7" style="font-weight:bold;">技能、特长或爱好</td>
            </tr>
            <tr align="center">
                <td style="font-weight:bold;">外语等级</td>
                <td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
                <td style="font-weight:bold;">计算机</td>
                <td colspan="3"><input type="text" style="width: 98%; height: 100%"></td>
            </tr>
            <tr align="center">
                <td colspan="7" style="font-weight:bold;">个人履历</td>
            </tr>
            <tr align="center">
                <td style="font-weight:bold;">时间</td>
                <td colspan="2" style="font-weight:bold;">单位</td>
                <td colspan="4" style="font-weight:bold;">经历</td>
            </tr>
            <tr align="center">
                <td><input type="text"></td>
                <td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
                <td colspan="4"><input type="text" style="width: 98%; height: 100%"></td>
            </tr>
            <tr align="center">
                <td><input type="text"></td>
                <td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
                <td colspan="4"><input type="text" style="width: 98%; height: 100%"></td>
            </tr>
            <tr align="center">
                <td><input type="text"></td>
                <td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
                <td colspan="4"><input type="text" style="width: 98%; height: 100%"></td>
            </tr>
            <tr align="center">
                <td colspan="7" style="font-weight:bold;">联系方式</td>
            </tr>
            <tr align="center">
                <td style="font-weight:bold;">通信地址</td>
                <td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
                <td style="font-weight:bold;">联系电话</td>
                <td colspan="3"><input type="text" style="width: 98%; height: 100%"></td>
            </tr>
            <tr align="center">
                <td style="font-weight:bold;">E-mail</td>
                <td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
                <td style="font-weight:bold;">邮编</td>
                <td colspan="3"><input type="text" style="width: 98%; height: 100%"></td>
            </tr>
            <tr align="center">
                <td colspan="7" style="font-weight:bold;">自我评价</td>
            </tr>
            <tr align="center">
                <td colspan="7"><textarea name="" id="" cols="30" rows="10" style="width: 99%; height: 100%"></textarea></td>
            </tr>

        </table>
    </form>
</body>

</html>

效果：
个人简历
二.css
1.简介
（1）CSS 是 Cascading Style Sheets 的缩写，即：层叠样式表单
（2）CSS 是 HTML 语言的一种扩展，其主要作用为：
（3）定义 Web 页面布局以及页面中元素的显示方式
（4）利用 CSS 样式实现 HTML 内容(结构)与表现(格式)的分离
2.引入方式
（1）内嵌式：又称行内式，在HTML标签上编写样式，如：<p style="color:red">
（2）内部式：包含在HTML的中，只对当前页面有效，如:<style>...</style>
（3）外部式：链接引入外部样式表文件，如：<link href="style.css" ...>
3.选择器
选择器用于定位(选择)需要添加样式的网页元素
（1）标签选择器 ：HTML标签名(元素)作为选择器名称，如：div 、h1 、p …

<style type="text/css">    
    div {        
        color: blue;   /* 蓝色  */
        font-size: 30px;    
    }
</style>

（2）类选择器：类(class)用于描述一组标签的样式，class 可以用在多个标签中

<html>
…
<style type="text/css">    
    .title {        
        color: red;    /* 红色  */
        font-size: 30px;    
    }
</style>
<body>
   <div class=“title”>CSS</div>
   <div class=“title” >快速入门</div>  
   <div>CSS选择器！</div>   
</body>
</html>

（3）ID选择器：ID选择器用于为标有特定ID的HTML标签设置样式

<html>
…
<style type="text/css">    
    #title {        
        color: green;   /* 绿色  */
        font-size: 30px;    
    }
</style>
<body>
   <div id=“title”>CSS</div>
   <div id=“subtitle” >快速入门</div>  
   <div>CSS选择器</div>   
</body>
</html>

（4）通配选择器：利用 * 为指定范围内的所有标签设置样式

<html>
…
<style type="text/css">    
    * {        
        color: purple; /* 紫色  */
        font-size: 30px;    
    }
</style>
<body>
   <div id=“title”>CSS</div>
   <div id=“subtitle” >快速入门</div>  
   <div>CSS选择器</div>   
</body>
</html>

（5）包含选择器：HTML中为父元素(标签)下的子元素设置样式

<html>
…
<style type="text/css">    
   div p {        
        color: gold;  /* 金色  */       
        font-size: 30px;    
    }
</style>
<body>
   <div>
       <p>CSS</p>
   </div>
   <div>快速入门</div>  
</body>
</html>

（6）选择器分组：为一组元素设置相同样式，利用逗号分割多个选择器

<html>
…
<style type="text/css">    
   #title , .logo {        
        color: brown;   /* 棕色  */
        font-size: 30px;    
    }
</style>
<body>
   <div id=“title”>CSS</div>
   <div class=“logo”>CSS快速入门</div>  
</body>
</html>

4.超链接
CSS中可以根据超链接元素的状态，设置不同的样式属性
下面为4种超链接状态：
（1）a:link - 正常状态，未访问过的超链接状态
（2）a:visited - 已访问过状态，用户已访问过的超链接状态
（3）a:hover - 鼠标放上状态，当用户鼠标放在超链接上时状态
（4）a:active - 点击状态，超链接被点击的那一刻状态

<html>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">    
    .title {        
        color: #FFFFFF; /* 白色字体 */        
        background-color: blue; /* 蓝色背景 */        
        font-size: 34px; /* 34px 字体 */        
        text-decoration: none;/* 去掉链接文字的下划线 */
        cursor:wait; /* 改变鼠标形状 */    
    }    
</style>
<body>
    <a href="#">CSS</a>    
    <a href="#" class="title">CSS超链接</a>    
</body>
</html>

5.练习–五彩导航

<!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>css</title>
    <style>
        button{
            width: 120px;
            height: 60px;
            border: none;
            font-size: 20px;
            text-align: center;
        }

        .first{
            background-image: url(bg1.png);
            background-repeat: no-repeat;
            background-size: auto;
           

        }
        .first:hover{
            background-image: url(bg6.png);
        }
        .two{
             
            background-image: url(bg2.png);
            background-repeat: no-repeat;
            background-size: auto;
          

        }
        .two:hover{
            background-image: url(bg5.png);
        }
        .three{
            background-image: url(bg3.png);
            background-repeat: no-repeat;
            background-size: auto;
           

        }
        .three:hover{
            background-image: url(bg2.png);
        }
        .four{
          
            background-image: url(bg5.png);
            background-repeat: no-repeat;
            background-size: auto;
            
           

        }
        .four:hover{
            background-image: url(bg1.png);
        }

    </style>

</head>
<body>
    <button  class="first" >五彩导航</button>
    <button  class="two" >五彩导航</button>
    <button  class="three" >五彩导航</button>
    <button  class="four" >五彩导航</button>
    
</body>
</html>

效果：鼠标放上去，背景颜色会改变
五彩导航
总结：对css的知识点还不太熟悉，接下来继续加油学习！！

公子卿辞
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python实训第二天
Stacey的博客
07-02 228
#Python 实训第二天 只要是客服端向服务器端发送得都叫做<请求> 只要是服务器端向客服端发送得都叫做<响应> Django 采用了 MVT 的软件设计模式，即模型（Model），视图（View）和模板（Template) MVT 和 MVC 的比较 了解Django 准备好开发环境 使用入门 C/S Client/Server 比如QQ软件, CF软件, 英雄联盟软件, WPS软件, 等等 B/S Browser/Server 在浏览器中使用程序, 直接通过浏览器和服务器
[JSP暑假实训] 二.JSP网站创建及Servlet实现注册表单提交、计算器运算
杨秀璋的专栏
07-01 9354
本系列文章是作者暑假给学生进行实训分享的笔记，主要介绍MyEclipse环境下JSP网站开发，包括JAVA基础、网页布局、数据库基础、Servlet、前端后台数据库交互、DAO等知识。 本篇文章开始讲解MyEclipse环境下创建JSP网站，并实现注册表页面的创建及Servlet获取提交的数据，基础性文章。非常基础的文章，希望对读者有所帮助 ，尤其是我的学生。
CSS基础&表单
weixin_52032313的博客
03-02 1099
css基础&表单
实训第四天CSS的简单应用
qq_45284063的博客
06-04 118
目标： 1、掌握CSS基础属性 2、根据需求搜索对应CSS属性 知识： 1.CSS常用选择器 2.字体属性 3.行高属性 4.宽度
python实训计划_Python新手自学计划
weixin_39950083的博客
12-20 861
作为目前最火也是最实用的编程语言，Python不仅是新手入门程序界的首选，也逐渐成为了从大厂到小厂，招牌需求list的必要一条。当然，自学Python这件事情，估计好多人和我一样，已经下了一百次决心，但是最后都“从入门到放弃”。究其原因，很可能是没有明确的学习目标，或者学习目标太过“宏伟”，所以总是阵亡在了introduction视频到第一行代码之前。那么，从小白成为大师，到底需要多长时间?真的有...
TML5期末大作业：美丽家乡网站设计——美丽家乡-含论文(4页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业
12-28 2917
HTML5期末大作业：美丽家乡网站设计——美丽家乡-含论文(4页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求,
简单的动漫网页成品 HTML+CSS静态网页作业 DW动漫网页设计与制作素材成品代做 海贼王主题网页设计制作6个页面
VX_WJ88950106的博客
08-05 4023
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有： 等总共6个页面html下载。：此作品为学生个人主页网页设计题材，代码为简单学生
【HTML5期末大作业】制作一个简单HTML我的班级网页（HTML+CSS+JS）
aghewugwe的博客
08-12 6081
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站...
数据结构-栈、队列-相关练习
2401_86587256的博客
09-05 1454
数据结构初阶部分，栈和队列的相关练习。
HTML转义字符对照表
云博客_资源宝分享
09-10 495
HTML转义字符对照表
深入解析`node-html-to-image`的`main.ts`源码：实现HTML到图片的转换
软考鸭
09-09 696
的主要功能是将HTML字符串或文件渲染为图片。它支持多种输出格式（如PNG、JPEG等），并提供了一系列配置选项，如图片质量、透明度等。该库利用Puppeteer（一个无头Chrome浏览器）来实现HTML的渲染和截图功能。Cluster：来自库，用于管理无头浏览器的并发执行。Screenshot：自定义的截图模型。：执行截图操作的函数。Options和：类型定义，用于确保传入参数的合法性。本文通过对的main.ts源码的深入解析，揭示了该库如何将HTML内容转换为图片的内部工作原理。
html备忘录
lulei5153的博客
09-05 1064
【代码】html备忘录。
(代码可运行)Bootstrap框架的HTML示例
最新发布
Keep trying, keep going
09-10 475
Bootstrap：一套流行的前端开发框架，基于HTML、CSS和JavaScript，适用于快速构建响应式Web应用。等类），可以快速构建一个美观且响应式的Web应用。请将这段代码复制到一个HTML文件中，并在浏览器中打开以查看效果。这个示例展示了一个简单的响应式布局，包括一个居中的标题和三个卡片组件。通过使用Bootstrap的栅格系统（以下是一个使用Bootstrap构建的。
HTML生日蛋糕
兔子王
09-07 1886
用HTML语言实现生日蛋糕效果的完整代码。
【HTML】可展开的顶层菜单栏
weixin_51649465的博客
09-07 336
【代码】【Html】可展开的顶层菜单栏。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4020
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
HTML元素拓展：data-*属性的应用与实践
会思想的苇草i的博客
09-06 963
本文深入探讨了HTML5中data-*属性的功能与使用方法，通过实例展示如何利用data-*属性增强网页元素的语义化，以及在JavaScript与CSS中的数据存储和获取技巧。学习如何合理应用data-*属性，可以提升网页的可维护性与用户体验，是每一个前端开发者不可错过的实用指南。
【2024】前端学习笔记1-HTML主体框架-文本标签
皮皮的博客
09-10 957
本文讲了HTML主题框架，标签含义及标题、段落、加粗、斜体、下划线、上标、下标、内置容器、换行等标签的基本使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值