前端使用html+css,表单型效果自我实现

最新推荐文章于 2022-11-28 09:58:30 发布
最新推荐文章于 2022-11-28 09:58:30 发布
阅读量615 收藏
点赞数
分类专栏： 学习前端总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChatHello/article/details/53490214
版权

学习前端开发好长一段时间了,哎,自我感觉进步不是很大,深深感觉压力山大,鉴于现在人才需要,所以就需要努力向全栈工程师的水平前进.每天努力一点点...

今天学习了一个表单型的页面,图片呈现横向排列,所以,努力了将近半天时间,才完成,但是感觉代码太过繁琐,所以贴出来大家一起研究研究吧.欢迎批评指正啊.

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>开发者展示</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="nav">
    <p>产品经理</p>
</div>
<div class="menu">
    <table>
        <tr>
            <td>
            <div>
                <img src="1-xhdpi.png">
                <p>小明</p>
            </div>
            </td>
            <td>
            <div>
                <img src="1-xhdpi.png">
                <p>小明</p>
            </div>
            </td>
            <td>
            <div>
                <img src="1-xhdpi.png">
                <p>小明</p>
            </div>
            </td>
            <td>
            <div>
                <img src="1-xhdpi.png">
                <p>小明</p>
            </div>
            </td>
        </tr>
    </table>
</div>
<div class="nav">
    <p>设计</p>
</div>
<div class="menu">
    <table>
        <tr>
            <td>
            <div>
                <img src="2-xhdpi.png">
                <p>张小妹</p>
            </div>
            </td>
            <td>
            <div>
                <img src="2-xhdpi.png">
                <p>张小妹</p>
            </div>
            </td>
            <td>
            <div>
                <img src="2-xhdpi.png">
                <p>张小妹</p>
            </div>
            </td>
            <td>
            <div>
                <img src="2-xhdpi.png">
                <p>张小妹</p>
            </div>
            </td>
        </tr>
    </table>
</div>
<div class="nav">
    <p>前端</p>
</div>
<div class="menu">
    <table>
        <tr>
            <td>
            <div>
                <img src="3-xhdpi.png">
                <p>徐六</p>
            </div>
            </td>
            <td>
            <div>
                <img src="3-xhdpi.png">
                <p>徐六</p>
            </div>
            </td>
            <td>
            <div>
                <img src="3-xhdpi.png">
                <p>徐六</p>
            </div>
            </td>
            <td>
            <div>
                <img src="3-xhdpi.png">
                <p>徐六</p>
            </div>
            </td>
        </tr>
        <tr>
            <td>
            <div>
                <img src="3-xhdpi.png">
                <p>徐六</p>
            </div>
            </td>
            <td>
            <div>
                <img src="3-xhdpi.png">
                <p>徐六</p>
            </div>
            </td>
            <td>
            <div>
                <img src="3-xhdpi.png">
                <p>徐六</p>
            </div>
            </td>
            <td>
            <div>
                <img src="3-xhdpi.png">
                <p>徐六</p>
            </div>
            </td>
        </tr>
    </table>
</div>
<div class="nav">
    <p>Android</p>
</div>
<div class="menu">
    <table>
        <tr>
            <td>
            <div>
                <img src="4-xhdpi.png">
                <p>张三</p>
            </div>
            </td>
            <td>
            <div>
                <img src="4-xhdpi.png">
                <p>张三</p>
            </div>
            </td>
            <td>
            <div>
                <img src="4-xhdpi.png">
                <p>张三</p>
            </div>
            </td>
            <td>
            <div>
                <img src="4-xhdpi.png">
                <p>张三</p>
            </div>
            </td>
        </tr>
        <tr>
            <td>
            <div>
                <img src="4-xhdpi.png">
                <p>张三</p>
            </div>
            </td>
            <td>
            <div>
                <img src="4-xhdpi.png">
                <p>张三</p>
            </div>
            </td>
            <td>
            <div>
                <img src="4-xhdpi.png">
                <p>张三</p>
            </div>
            </td>
            <td>
            <div>
                <img src="4-xhdpi.png">
                <p>张三</p>
            </div>
            </td>
        </tr>
    </table>
</div>
<div class="nav">
    <p>ios</p>
</div>
<div class="menu">
    <table>
        <tr>
            <td>
            <div>
                <img src="5-xhdpi.png">
                <p>李四</p>
            </div>
            </td>
            <td>
            <div>
                <img src="5-xhdpi.png">
                <p>李四</p>
            </div>
            </td>
            <td>
            <div>
                <img src="5-xhdpi.png">
                <p>李四</p>
            </div>
            </td>
            <td>
            <div>
                <img src="5-xhdpi.png">
                <p>李四</p>
            </div>
            </td>
        </tr>
        <tr>
            <td>
            <div>
                <img src="5-xhdpi.png">
                <p>李四</p>
            </div>
            </td>
            <td>
            <div>
                <img src="5-xhdpi.png">
                <p>李四</p>
            </div>
            </td>
            <td>
            <div>
                <img src="5-xhdpi.png">
                <p>李四</p>
            </div>
            </td>
            <td>
            <div>
                <img src="5-xhdpi.png">
                <p>李四</p>
            </div>
            </td>
        </tr>
    </table>
</div>
<div class="nav">
    <p>接口</p>
</div>
<div class="menu">
    <table>
        <tr>
            <td>
            <div>
                <img src="6-xhdpi.png">
                <p>玄亮</p>
            </div>
            </td>
            <td>
            <div>
                <img src="6-xhdpi.png">
                <p>玄亮</p>
            </div>
            </td>
            <td>
            <div>
                <img src="6-xhdpi.png">
                <p>玄亮</p>
            </div>
            </td>
            <td>
            <div>
                <img src="6-xhdpi.png">
                <p>玄亮</p>
            </div>
            </td>
        </tr>
    </table>
</div>
<div class="nav">
    <p>后台</p>
</div>
<div class="menu">
    <table>
        <tr>
            <td>
            <div>
                <img src="7-xhdpi.png">
                <p>徐褚</p>
            </div>
            </td>
            <td>
            <div>
                <img src="7-xhdpi.png">
                <p>徐褚</p>
            </div>
            </td>
            <td>
            <div>
                <img src="7-xhdpi.png">
                <p>徐褚</p>
            </div>
            </td>
            <td>
            <div>
                <img src="7-xhdpi.png">
                <p>徐褚</p>
            </div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

style.css:

body{
    margin: 0;
}
.nav {
    background-color: #f5f5f5;
    color: #696969;
    height: 60px;
    text-align: left;
    padding-left: 40px;
    padding-top: 40px;
    margin-top: -15px;
}
table {
    background-color: #fff;
    width: 100%;
}
td {
    text-align: center;
}
img {
    padding-top: 30px;
    border-collapse: separate;
}

效果图如下:


ChatHello
关注
专栏目录
《前端框架开发技术》HTML+CSS+JavaScript (个人简介 5页 响应式)
qq_524614081的博客
11-19 361
个人设计web前端大作业 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
使用html+css+js实现一个静态页面（含源码）
VX_WJ88950106的博客
08-15 1118
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站......
html+js+css自我介绍
07-18
html+js+css自我介绍，滑动滚轮进行界面的更换
HTML简单实例加表单的显示效果
web开发
02-27 328
HTML可以说是一种十分简单的标记语言，但是对于Web开发还是必不可少的，所以对HTML的标记进行适当的了解 还是十分有必要的。下面我们来演示一下基本的HTML效果和一些简单的标签，以及在表单界面的各种提交方式。 首先是HTML的常用简单标签。 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;...
前端之HTML
qq_774952435的博客
04-28 2432
html基础
前端之表格表单以及一些特效
上善若水
09-28 2426
一,表格 特点:1,表头垂直水平居中 2,单元格垂直居中 3,cellspacing控制单元格之间的间距 4,table的显示特性:内容不超过规定的宽高则采用规定的宽高,当内容显示区域的宽高超过规定的宽高,表格的宽高由内容显示区域决定 5,rules:边框规则,设置后会合并边框(cellspacing失效):groups分组带有边框 all所有带有边框,rows行带有边框,cols列带...
web前端技术总结——HTML（包括html5）
weixin_44660087的博客
04-08 716
WEB前端技术总结——HTML（包括html5） 目录WEB前端技术总结——HTML（包括html5）一：HTML基础知识1：常用标签2：meta标签的作用3：内联框架4：表格重要属性二：canvas画布1: js定义画布画笔2: canvas绘制矩形3：canvas绘制路径4：canvas绘制三角形5：save和restore6：canvas画圆7：canvas中的变换8：canvas的...
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
- **项目目标**：通过完成此作业，学生将能够掌握基本的网页设计原理，学会使用HTML、CSS和JavaScript来创建功能齐全且视觉效果良好的网页。 ### 二、项目特点与内容 - **项目特点**： - 本项目覆盖了多种主题，...
《前端框架开发技术》HTML+CSS+JavaScript 制作个人简历简单个人主页
最新发布
qq_524614081的博客
11-28 2593
F
前端系列之HTML（网页整体结构）
十二指环的博客
01-18 4418
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html案例</title> </head> <body> <!--头部内容--> <div> <!--logo--> <div><img src="image\logo.png"></div> <!--导航-->
6个非常精美的Web前端表单提交以及搜索框（一）
08-18
在线效果：http://ynif.v099.10000net.cn/demo/biaodan/1/biaodan/index.html
一个表单设计器前端代码
08-29
一个表单设计器前端代码只用来学习用。学习点：拖拉、页签等
漂亮的前台页面，HTML+div+css
07-16
网页美观。大家想要学习，制作网站的，可以参考。
前端 HTML 简介
weixin_30824277的博客
03-20 121
HTML HTML是一个网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础。 HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数...
前端html使用总结-1
quietbxj的博客
11-02 170
html用来编写前端页面，一直在发展和更新。 html5的新特性 在增加绘图的canvas标签。 增加媒体处理video和audio元素。 对本地离线存储有更好的支持。 新增特殊内容：footer，header，nav等。 新增表单控件，calendar，date，time，email，search等。 使用<!DOCTYPE html>来声明。 html元素 从开始标签到结束标签的所有内容。 支持嵌套。 标题级别设置：<h1>... 段落：<p>
html表单应用效果,form表单中属性及功能应用
weixin_28520495的博客
06-03 326
form表单中属性及功能应用通俗的讲form标签是用来进行表单提交用的，那么大家知道form表单中属性及功能应用是怎样的呢?下面一起来看看!form表单属性介绍1. 详解form标签中的method属性浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。2. form中的lable标签小伙伴们，在你们学习表单各种控件的时候，有没...
浅谈前端html基本用法
master_ning的博客
03-22 334
今天更新一些html基本用法：代码要求，&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&qu
HTML表单效果实现
m0_51516839的博客
12-12 358
首先，先来看一看要做的表单的样式 接下来进行相应的代码编写 /*部分代码*/ <h1><b>我的表单</b></h1> <a1>账号：<input type="text" name="name1"></a1><br><br> <a2>密码：<input type="text" name="password"></a2><br><br&
HTML 表单的应用
m0_46335802的博客
04-22 531
HTML表单的内容以及应用（密码框的实现）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值