跟着实训学习HTML CSS的第二天

最新推荐文章于 2023-06-29 20:59:40 发布
最新推荐文章于 2023-06-29 20:59:40 发布
阅读量88 收藏 1
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58821630/article/details/117473511
版权

在练习五彩导航条的时候，许多同学都卡住了，最后经过分享，大家掌握了许多的方法来解决这个问题，还是很有帮助的。下面就是代码的实现部分：

<!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>04五彩导航</title>

<style>

button{

width:120px;

height:58px;

border:none;

 

}

#b1{

background-image: url("images/bg1.png");

background-color: #000000;

}

#b2{

background-image: url(images/bg2.png);

background-color: #000000;

}

#b3{

background-image: url(images/bg3.png);

background-color: #000000;

}

#b4{

background-image: url(images/bg4.png);

background-color: #000000;

}

 

#b1:hover{

background-image: url(images/bg5.png);

 

}

#b2:hover{

background-image: url(images/bg6.png);

 

}

#b3:hover{

background-image: url(images/bg7.png);

 

}

#b4:hover{

background-image: url(images/bg3.png);

 

}

</style>

</head>

<body>

<button type="button" id="b1">五彩导航</button>

<button type="button" id="b2">五彩导航</button>

<button type="button" id="b3">五彩导航</button>

<button type="button" id="b4">五彩导航</button>

</body>

</html>

 

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>表单</title>

<!--样式表的作用是单元格内容自适应宽度，单元格内容对齐，以及去除表单的边框-->

<style>

td

{

white-space: nowrap;

text-align: center;

}

input

{

border: 0;

}

</style>

</head>

<body>

<form action="#" method="POST">

<table align="center" border="1">

<caption><b>个人简历</b></caption> <!--目标表格应该是一个15行7列的表格进行的合并 需要用到colspan横向合并和rowspan纵向合并-->

<tr>

<td>姓名</td>

<td><input type="text" name="name"></td>

<td>性别</td>

<td><input type="text" name="sex"></td>

<td>出生年月</td>

<td><input type="text" name="birth"></td>

<td rowspan="4"><input type="file" name="file"></td>

</tr>

<!--第二行-->

<tr>

<td>民族</td>

<td><input type="text"></td> <!--没有连接到后台数据就没写每个input的name了-->

<td>政治面貌</td>

<td><input type="text"></td>

<td>身高</td>

<td><input type="text"></td>

</tr>

<!--第三行-->

<tr>

<td>学院</td>

<td><input type="text"></td>

<td>学历</td>

<td><input type="text"></td>

<td>户籍</td>

<td><input type="text"></td>

</tr>

<!--第四行-->

<tr>

<td>专业</td>

<td><input type="text"></td>

<td colspan="2">毕业院校</td>

<td colspan="2"><input type="text"></td>

</tr>

<!--第五行 技能特产-->

<tr>

<td colspan="7"><b>技能特长或爱好</b></td>

</tr>

<!--第六行-->

<tr>

<td>外语等级</td>

<td colspan="2"><input type="text"></td>

<td>计算机</td>

<td colspan="3"><input type="text"></td>

</tr>

<!--第七行 个人履历-->

<tr>

<td colspan="7">个人履历</td>

</tr>

<!--第八行-->

<tr>

<td>时间</td>

<td colspan="2">单位</td>

<td colspan="4">履历</td>

</tr>

<tr>

<td><input type="text"></td>

<td colspan="2"><input type="text"></td>

<td colspan="4"><input type="text"></td>

</tr>

<tr>

<td><input type="text"></td>

<td colspan="2"><input type="text"></td>

<td colspan="4"><input type="text"></td>

</tr>

<tr>

<td><input type="text"></td>

<td colspan="2"><input type="text"></td>

<td colspan="4"><input type="text"></td>

</tr>

<!--联系方式-->

<tr>

<td colspan="7">联系方式</td>

</tr>

<tr>

<td>通信地址</td>

<td colspan="2"><input type="text"></td>

<td>联系电话</td>

<td colspan="3"><input type="text"></td>

</tr>

<tr>

<td>E-mail</td>

<td colspan="2"><input type="text"></td>

<td>联系电话</td>

<td colspan="3"><input type="text"></td>

</tr>

<tr>

<td colspan="7">自我评价</td>

</tr>

</table>

<p align="center"><input type="submit"></p>

</form>

</body>

</html>

 

 

m0_58821630
关注
HTML总结&CSS学习总结
m0_65791148的博客
06-21 1609
HTML总结&CSS学习总结
css+js+jq实训笔记
weixin_42757570的博客
07-02 1386
css+js+jq实训笔记css第一天css第二天css第三天css第四天css第五天css第六天js第一天js第二天js第三天js第四天js第五天js第六天jq第一天jq第二天jq第三天 css第一天 1、平时有空多记单词（很多新单词） 2、用谷歌浏览器调试代码 3、多看看公众号和网站（对面试有很大的帮助，也可以帮助了解前端） 4、爱果果（可以去玩一下） 5、egret白鹭科技（游戏开发） 6、小程序API，要学会读懂文档、手册 7、学习PS 8、提高自己的审美 9、计算机网络、数据结构 考研408 10
HTML&CSS学习总结
m0_72435248的博客
06-29 407
除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。（1）开始标签（Opening tag）：包含元素的名称（此处为 p），被左、右角括号所包围。原因是：在 HTML 中，某些字符是预留的。引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐)。
node.js实训
qq_45676798的博客
07-12 639
第一天： 音乐门户网站数据采集 搜索列表数据采集 歌曲MP3地址的获取 node环境安装 node环境的安装 — node安装包下载 https://nodejs.org/en/ visual studio code 编辑器的安装 官网地址下载并直接安装即可 https://code.visualstudio.com/ node服务器搭建 桌面上新建一个文件夹 node_server_demo 终端 cd 到 新建的文件夹中 通过 npm init 指令， 将 普通文件夹 node_ser
php实训心得体会doc,php实训报告心得体会php实训报告心得体会
weixin_39608300的博客
03-10 3815
php实训报告心得体会php实训报告心得体会Tag内容描述：1、php实训心得】php心得体会 php实训心得 PHP 是一种 HTML 内嵌式的语言，PHP与微软的ASP颇有几分相似，都是一种在服务器端执行的嵌入HTML文档的脚本语言，下面是学习啦带来的php实训心得体会，仅供参考。 php实训心得一： 1、关于输出：echo不是函数，只是一个语言结构，因此不需要用括号把后面的参数括起来，当然，...
第一天 CSDN实训
huayi211113006的专栏
04-19 1371
2012年4月18日，一个风和日丽——早上有点凉中午挺热的这一天，久违的CSDN再次光临本班。还是那个眼睛有点小的李伟老师，以及有点含蓄加内敛的李玲老师（名字不知是否是这样写的，老师未公布啊！！）。有了上一次的实训经验，这次相当的激动、期待，同时也有点小无奈（毕竟整天对着电脑，有点。。头晕）OK，下面是第一天的笔记及课堂感受！                 本次实训：         HT
HTML网页设计制作大作业（div+css）---浩瀚天文 (13页有二级菜单)
而风不止
11-17 2022
web前端开发技术 web前端大一实训 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
HTML+CSS(婚纱公司网站)静态网页设计
qq_524614081的博客
11-18 131
web网页设计实例作业 html实训大作业 HTML+CSS 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
实训笔记第九天
qq_32781063的博客
07-07 187
JSP 在javaweb编程中，可以在四个不同大小的可访问范围（时间、空间）中设置属性对象。即将一个对象绑定到一个字符串上。 JavaWeb中四大域对象的作用范围 ServletRequest : 作用范围是整个一次请求链（包括将此请求转发到的其它页面），也即从客户端发来一次请求开始，到本次服务端响应结束。 对应内置对象是request，EL中可用requestS
web期末大作业：基于html+css+js制作 学校班级网页制作
qq_524614081的博客
11-15 891
HTML：结构CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
基于asp.net的工作流程审批系统设计与实现.docx
09-30
基于asp.net的工作流程审批系统设计与实现.docx
这是各种对象检测数据集的预处理相关工具脚本的集合.zip
09-30
这是各种对象检测数据集的预处理相关工具脚本的集合
基于asp.net的驾校理论考试网上模拟系统设计与实现.docx
09-30
基于asp.net的驾校理论考试网上模拟系统设计与实现.docx
基于Python与Shell的阿里巴巴智能运维竞赛排名14设计源码
09-30
该项目为阿里巴巴智能运维竞赛排名14的设计源码，采用Python和Shell两种编程语言，共包含27个文件，包括2个Python脚本、1个PDF文档、1个Markdown文件、1个文本文件、1个CSV文件、1个Shell脚本以及5个特定数据模型文件。该解决方案旨在提升运维效率，适用于大型企业的智能运维场景。
DRF完整项目及uwsgi部署配置
最新发布
09-30
DRF完整项目及uwsgi部署配置
2022国庆旅游消费趋势报告.pdf
09-30
2022国庆旅游消费趋势报告.pdf
模型预测控制（MPC）在混合动力汽车能量管理策略开发上的运用 1利用车速预测模型（BP或者RBF神经网络，预测模型资料也有
09-30
模型预测控制（MPC）在混合动力汽车能量管理策略开发上的运用。 [1]利用车速预测模型（BP或者RBF神经网络，预测模型资料也有发在其他链接）根据预测的信息对车辆进行优化控制，可以对混动汽车的能量管理具有一定的参考意义。 [2]动态规划算法作为全局优化的代表，恰好作为模型预测控制的算法求解器，再与车速预测模型结合实现基于模型预测（MPC）的能量管理策略的预测时预内的局部最优近似全局最优的优化效果，实现混动车辆的燃油经济性最优 和模型预测MPC结合运用，加上预测模型可实现在线预测近似实时最优 逆向迭代，正向求解（混动整车能量管理做到全局最优） 提供动态规划算法程序（DP） 神经网络预测模型程序（GA-BP RBF）=模型预测控制
基于SSM框架与layui的前后端分离校园论坛设计源码
09-30
本项目为校园论坛设计源码，采用SSM框架与layui实现前后端分离。源码共包含874个文件，涵盖198个JavaScript文件、193个PNG图片文件、94个GIF图片文件、84个CSS样式文件、79个HTML文件、56个Java文件、50个XML文件、15个JAR包文件、14个JPG图片文件、14个Less样式文件。前端采用HTML、CSS、JavaScript、jQuery和layui，集成百度富文本编辑器，实现前后端数据交互，后端返回数据格式为JSON。
HTML与CSS基础学习指南
"HTML和CSS是构建网页的基础，本学习笔记主要涵盖了HTML的基本概念、结构、标签语法以及常用标签的介绍。HTML是超文本标记语言，通过标签定义网页内容和结构，如<!DOCTYPEhtml>用于声明文档类型，<html>是根元素，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值