表单界面

最新推荐文章于 2024-04-22 10:35:30 发布
最新推荐文章于 2024-04-22 10:35:30 发布
阅读量136 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42049884/article/details/101278396
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="JQuery/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        body {

        }
       #b1 {
           background: url("背景.jpg");
       }
        #b2 {
            width: 1140px;
            height: 40px;
            margin-top: 10px;
        }

    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <img src="timg.jpg" alt="" style="width: 160px;height: 50px;">
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">华为官网</a></li>
                <li><a href="#">荣耀官网</a></li>
                <li><a href="#">花粉俱乐部</a></li>
                <li><a href="#">企业购</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        更多精彩
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">EMUI</a></li>
                        <li><a href="#">应用市场</a></li>
                        <li><a href="#">华为终端云空间</a></li>
                        <li><a href="#">开发者联盟</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="2.jpeg" alt="First slide" style="height: 400px;width: 100%;">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="1.jpg" alt="Second slide"style="width: 100%;height: 400px;">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="3.jpg" alt="Third slide" style="width: 100%;height: 400px;">
                <div class="carousel-caption"></div>
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div id="app" >
        <div id="b2">
            品牌：<input type="text" v-model="name">
            型号：<input type="text" v-model="sex">
            <button @click="add">添加</button>
            品牌：<input type="text" v-model="searchName">
            <button @click="search">查询</button>
        </div>
        <div>

        </div>
        <table id="b1" style="width: 1140px">
            <thead>
            <tr>
               <td></td>
                <td>品牌</td>
                <td>型号</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr  v-for="(user,index) in search() ">
                <td></td>
                <td>{{user.name}}</td>
                <td>{{user.sex}}</td>
                <td><button v-on:click="del(index)">取消</button></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="container" style="margin-top: 15px;">
        <div class="row footer-top">
            <div class="col-md-6 col-lg-6">
                <h4>
                    <img src="101.png">
                </h4>
                <p>隐私声明 服务协议 COOKIES Copyright © 2012-2019 华为终端有限公司 版权所有 粤ICP备19015064号|粤公网安备 44190002003939号
                    增值电信业务经营许可证：粤B2-20190762|备案主体编号：44201919072182</p>
            </div>
            <div class="col-md-6  col-lg-5 col-lg-offset-1">
                <div id="footer-bottom" class="row about">
                    <div class="col-sm-3">
                        <h5>关于</h5>
                        <ul class="list-unstyled">
                            <li><a href="#">购物指南</a></li>
                            <li><a href="#">配送方式</a></li>
                            <li><a href="#">支付方式</a></li>
                            <li><a href="/#/">常见问题</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-3">
                        <h5>保修与退换货</h5>
                        <ul class="list-unstyled">
                            <li><a href="#" title="" target="_blank">保修政策</a></li>
                            <li><a href="#">退换货政策</a></li>
                            <li><a href="#">退换货流程</a></li>
                            <li><a href="#">保修状态查询</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-3">
                        <h5>维修技术支持</h5>
                        <ul class="list-unstyled">
                            <li><a href="#">售后网点</a></li>
                            <li><a href="#">预约维修</a></li>
                            <li><a href="#">手机寄修</a></li>
                            <li><a href="#">上门服务</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-3">
                        <h5 style="">特色服务</h5>
                        <ul class="list-unstyled">
                            <li><a href="#">防伪查询</a></li>
                            <li><a href="#">以旧换新</a></li>
                            <li><a href="#">礼品包装</a></li>
                        </ul>
                    </div>

                </div>

            </div>
        </div>
        <hr>
        <div class="row footer-bottom">
            <ul class="list-inline text-center">
                <li><a href="">华为集团</a></li><span>|</span><li><a href="">华为CBG官网</a></li><span>|</span><li><a
                    href="">荣耀官网</a></li><span>|</span><li><a href="">花粉俱乐部</a></li><span>|</span><li><a href="">华为应用市场</a></li><span>|</span>
                <li><a href="">EMUI</a></li><span>|</span><li><a href="">华为终端云空间</a></li><span>|</span><li><a
                    href="">开发者联盟</a></li><span>|</span><li><a href="">华为商城手机版</a></li><span>|</span>
                <li><a href="">网站地图</a></li>
            </ul>
        </div>
    </div>
    </footer>
</div>
</div>
-好喜欢你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PHP动态网站开发任务-表单界面设计及数据验证.pptx
11-14
在设计表单界面时，需要使用 `…</form>` 标记生成表单容器，并在该容器中添加各种表单元素或非表单元素。表单元素的生成需要使用 `<input>` 标记生成，设置 `type` 属性取值分别是 `text`、`password`、`radio`、`...
登录表单界面样式大全
12-23
登录表单界面样式大全，包含多种样式的表单登录
Bootstrap表单的使用
Debug的博客
02-26 2466
HTML中表单是网页和应用程序不可缺少的一部分，Bootstrap通过预定义的类极大的简化了表单组件的样式及使用方式。
Bootstrap表单及表单布局
记录和分享属于我的“IT”时光
02-07 761
Bootstrap4 支持二种表单布局方式：堆叠表单（垂直方向），内联表单（水平方向）。
一个简单的form表单登录界面
m0_37732829的博客
07-27 5829
这个表单挺不错的，适合大多数登录了，分享一下 <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" type="text/css" href="css/login.css"> </head> <body...
Bootstrap系列之表单（Forms）
老__L的博客
06-13 5442
表单控件样式、布局选项和用于创建各种表单的自定义组件的示例和使用指南。Bootstrap 表单控件通过类来扩展我们的表单样式。使用这些类可以选择使用它们的定制显示，以便在浏览器和设备之间实现更一致的呈现。确保在所有输入中使用适当的type属性(例如，用于电子邮件地址，用于数字信息)，以利用较新的输入控件，如电子邮件验证、数字选择等。这里有一个演示Bootstrap表单样式的快速示例。 文本表单控件，如、和都使用类进行样式化。包括一般外观、焦点状态、大小等样式。一定要探索我们的自定义表单以进一步样式化。 对
WEB前端网页设计-Bootstrap4 表单
君逍遥o
04-12 725
WEB前端网页设计-Bootstrap4 表单
批量添加数据的表单界面（表单含树形下拉框）vue + element
03-24
批量添加数据的表单界面（表单含树形下拉框）vue + element 通过【npm install】自行下载资源，生成node_modules文件夹
扁平风格登录注册表单界面
03-28
登录注册表单界面的HTML结构如下： <form > <input type="text" placeholder="用户名" id="r_user_name"/> <input type="password" placeholder="密码" id="r_password" /> <...
登陆界面表单
10-28
随手写的一个小登录界面系统，里面一些url 可以自己调整自己喜欢的背景图片 加油
Bootstrap 5 保姆级教程（十五）：表单
最新发布
Flag少侠的博客
04-22 863
was-validated 或 .needs-validation 添加到 元素中，input 输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。使用 .needs-validation，它将在表单提交之后验证缺少的内容。.valid-feedback 或 .invalid-feedback 类用来告诉用户缺少什么信息，或者在提交表单之前需要完成什么。我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。
html表单界面设计,ui界面表单设计的三个方面
weixin_28340315的博客
06-05 1440
表单是界面设计中重要组件之一，在表单页中用户往往需要填写不同的信息来完成操作，这些操作往往复杂亢长，所以我们都希望表单能被设计的更好用一点。下面从三个方面，和大家聊一聊表单设计中值得注意的一些设计细节。01 布 局一个合格的表单，从一个好的布局开始。在信息选项较多时，有的设计师会倾向于，把表单设计成为两列。这样的做法虽然能够大大缩短表单的长度。但用户在使用表单的时候，通常会按照Z字扫描的阅读模式进...
创建一个简单美观的bootstrap表单全过程
weixin_37974649的博客
01-02 1万+
参考文献 Bootstrap表单布局样式 bootstrap创建登录注册页面 Bootstrap登录框自适应水平居中+垂直居中 新建和导入 本人使用eclipse。 创建一个空白的网页项目，创建index.jsp。 导入bootStrap和jQuery &amp;amp;lt;script src=&amp;quot;//cdn.bootcss.com/jquery/1.11.3/jquery.min.js&amp;quot;&amp;amp;gt;&amp;amp
表单form界面
lulu17862078553的博客
11-12 768
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;表单元素&lt;/title&gt; &lt;/head&gt; &lt;body background="壁纸25.jpg"&gt; &lt;for
微信小程序设置表单界面
算法与编程之美
06-03 6757
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！问题描述表单在...
注册界面表单
如何心安理得的在老板眼皮下摸鱼
09-17 711
代码： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author" content=&q
QMUI Android框架使用8-使用自身主题样式做出表单界面（添加编辑页面）
大路的博客
06-20 1万+
QMUI Android框架的官方说，QMUIGroupListView一般用于设置页面，如下图所示是官方说的。但是官方给出的样例demo仅仅也就展示了4个样例，显示文本、箭头、开关和加载效果。一个设置中心要放置的表单元素种类太多了，官方连最基本的文本编辑框EditView居然都没有给出样例。虽然最后面的loading加载效果使用的所自定义的视图，但是这个视图也是官方自己封装的，而且没有数据获取演...
bootstrap创建登录注册页面
热门推荐
ITDragon博客
12-15 15万+
用bootstrap做登入注册页面，使用validate做表单验证 技术：bootstrap，font-awesome，jquery-validate； 特点：响应式布局，表单验证（用户两次密码是否相同，必填信息是否填写）背景图片自适应屏幕大小； 宗旨：从实战中学知识。 个人主页：http://www.itit123.cn/ 更多干货等你来拿 （微信小程序入门教程：入门教程系列 ，提供免费的api接口，无需考虑服务端代码问题）。
App互动表单界面设计
05-19
在设计App互动表单界面时，需要考虑以下几个方面： 1. 界面布局：表单应该采用简洁清晰的布局，让用户一目了然地看清楚每个字段的含义和输入方式。 2. 输入方式：根据不同的字段类型，选择合适的输入方式，如文本...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值