首页 > 其他分享 >使用float,flex和tailwind实现同一个表单注册效果

使用float,flex和tailwind实现同一个表单注册效果

时间：2024-04-20 09:05:25浏览次数：16  
标签：flex form tailwind margin float 爱好 item 1px border

float方式
html结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <form action="#" class="container">
    <h1>用户注册</h1>
    <div class="form-item">
      <input type="text" placeholder="请输入11位手机号" class="txt"/>
    </div>

    <div class="form-item clearfix">
      <div class="left fl">
        <input type="text" placeholder="请填写验证码" class="txt"/>
      </div>
      
      <button type="button" class="fr">发送验证码</button>
    </div>

    <div class="form-item">
      <input type="password" placeholder="请输入密码" class="txt"/>
    </div>

    <div class="form-item">
      <input type="password" placeholder="请再次确认密码" class="txt"/>
    </div>

    <div class="form-item" style="height: 100px;">
      <select multiple>
        <option>爱好1</option>
        <option>爱好2</option>
        <option>爱好3</option>
        <option>爱好4</option>
        <option>爱好5</option>
        <option>爱好6</option>
        <option>爱好7</option>
        <option>爱好8</option>
        <option>爱好9</option>
        <option>爱好10</option>
      </select>
    </div>

    <div class="form-item clearfix">
      <div class="fl title">性别</div>
      <div class="fl">
        <label class="label">
          <input type="radio" name="sex" />
          <span>男</span>
        </label>

        <label class="label">
          <input type="radio" name="sex" />
          <span>女</span>
        </label>
      </div>
    </div>

    <div class="form-item" style="height: 100px;">
      <textarea placeholder="请填写个人简介"></textarea>
    </div>

    <div class="form-item">
      <label>
        <input type="checkbox" />
        <span class="privacy">同意台湾是中国领土不可分割的一部分</span>
      </label>
    </div>

    <div class="form-item clearfix">
      <button class="fl">立即注册</button>
      <button type="reset" class="fr">重置表单</button>
    </div>
  </form>
</body>
</html>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #071218;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.container {
  width: 400px;
  margin: 30px auto;
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.container h1 {
  text-align: center;
  margin-bottom: 25px;
}
/* //父元素只设置高度和margin */
.form-item {
  height: 35px;
  margin: 20px 0;
}

/* //边框设置在子元素的input上 */
.form-item .txt {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
}

.form-item .left{
  width: 50%;
}

.form-item button {
  width: 45%;
  height: 40px;
  border-radius: 5px;
  border: none;
  background: #4a7ded;
  color: #fff;
}

.form-item input:focus {
  outline: 1px solid #4a7ded;
}

.form-item select {
  width: 100%;
  height: 100px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px;
}

.form-item select:focus {
  outline: 1px solid #4a7ded;
}

.form-item .title {
  margin-right: 20px;
}

.form-item .label {
  padding: 10px;
}

.form-item textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
}

.form-item textarea:focus {
  outline: 1px solid #4a7ded;
}

.form-item input[type="checkbox"] {
  outline: none;
  font-size: 12px;
}

.form-item .privacy {
  color: #ccc;
}

flex方式
html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="flexindex.css">
</head>
<body>
  <form class="container">
    <h1>用户注册</h1>

    <div class="form-item">
      <input type="text" class="txt" placeholder="请输入11位手机号">
    </div>

    <div class="form-item m-flex flex-between column-gap-10">
      <input type="text" class="txt captcha-item"  placeholder="请填写验证码">
      <button type="button" disabled>发送验证码</button>
    </div>

    <div class="form-item">
      <input type="password" class="txt"  placeholder="请输入密码">
    </div>

    <div class="form-item">
      <input type="password" class="txt"  placeholder="请再次输入密码">
    </div>

    <div class="form-item">
      <select multiple class="favorite-item">
        <option>爱好1</option>
        <option>爱好2</option>
        <option>爱好3</option>
        <option>爱好4</option>
        <option>爱好5</option>
        <option>爱好6</option>
        <option>爱好7</option>
        <option>爱好8</option>
        <option>爱好9</option>
        <option>爱好10</option>
      </select>
    </div>

    <div class="form-item m-flex item-center">
      <span class="sex-title">性别</span>

      <div>
        <label class="label">
          <input checked class="m-vertical-align" type="radio" name="sex">
          <span>男</span>
        </label>
        
        <label class="label">
          <input class="m-vertical-align"  type="radio" name="sex">
          <span>女</span>
        </label>
      </div>
    </div>

    <div class="form-item">
      <textarea class="txt profile-item"  placeholder="请填写个人简介"></textarea>
    </div>

    <div class="form-item">
      <label class="label">
        <input  class="m-vertical-align" type="checkbox">
        <span>同意台湾是中国领土不可分割的一部分</span>
      </label>
    </div>

    <div class="form-item m-flex flex-center column-gap-50">
      <button disabled>立即注册</button>
      <button type="reset">重置表单</button>
    </div>
  </form>
</body>
</html>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #071218;
}

.container {
  width: 400px;
  margin: 30px auto;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
}

.m-flex {
  display: flex;
}

.flex-between {
  justify-content: space-between;
}

.flex-center {
  justify-content: center;
}

.column-gap-10 {
  column-gap: 10px;
}

.column-gap-50 {
  column-gap: 50px;
}
.item-center {
  align-items: center;
}


.container h1{
  text-align: center;
  margin-bottom: 30px;
}

.form-item {
  margin: 10px 0;
}

.txt {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 5px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #ccc;
  font-size: 14px;
}

.txt:focus {
  border-color: #4a7ded;
}

.captcha-item {
  width: 100%;
}

button {
  width: 60%;
  height: 40px;
  background: #4a7ded;
  color: #fff;
  border-radius: 5px;
  padding: 5px 35px;
  border: 1px solid #ccc;
  outline: none;
  cursor: pointer;
  font-size: 14px;
}

.m-vertical-align {
  vertical-align: -1px;
}

button:disabled {
  background: #92ace4;
  cursor: not-allowed;
}

.favorite-item {
  width: 100%;
  height: 150px;
  padding: 5px;
  outline: none;
  border: 1px solid #ccc;
  font-size: 14px;
}

.favorite-item option {
  margin: 3px;
}

.sex-title {
  font-size: 16px;
  margin-right: 20px;
}

.label {
  font-size: 14px;
  margin-right: 5px;
}

.profile-item {
  height: 100px;
  resize: none;
}

tailwind
只有html,因为都是原子css,而且是自适应的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      prefix: 'link-',
      darkMode: 'selector',
      theme:{
        extend: {
          colors: {
            'dark':'#071218',
            'border':'#4a7ded',
            'gray':'#ccc',
            'border-disabled':'#92ace4',
          }
        }
      }
    }
  </script>
</head>
<body class="link-bg-dark">
  <form class="link-bg-white link-rounded-lg link-mx-auto link-my-5 link-w-1/4 link-p-5">
    <h1 class="link-text-center link-text-2xl link-font-bold link-mb-5">用户注册</h1>
    <div class="link-my-5">
      <input type="text" placeholder="请输入11位手机号" class="focus:link-border-border link-text-sm link-px-2 link-h-10 link-w-full link-rounded-md link-border-gray link-outline-none link-border" />
    </div>

    <div class="link-flex link-justify-between link-my-5">
      <input type="text" placeholder="请输入验证码" class="focus:link-border-border link-text-sm link-px-2 link-h-10 link-w-40 link-rounded-md link-border-gray link-outline-none link-border" />
      <button type="button" disabled class="link-cursor-pointer disabled:link-cursor-not-allowed disabled:link-bg-border-disabled link-rounded-md link-h-10 link-bg-border link-text-white link-px-10 link-py-2">发送验证码</button>
    </div>

    <div class="link-my-5">
      <input type="password" placeholder="请输入密码" class="focus:link-border-border link-text-sm link-px-2 link-h-10 link-w-full link-rounded-md link-border-gray link-outline-none link-border" >
    </div>

    <div class="link-my-5">
      <input type="password" placeholder="请再次输入密码" class="focus:link-border-border link-px-2 link-text-sm 
      link-h-10 link-w-full link-rounded-md link-border-gray link-outline-none link-border" >
    </div>

    <div class="link-my-5">
      <select multiple class="link-w-full link-h-40 link-p-2 focus:link-border-border link-border link-border-gray link-outline-none">
        <option class="link-m-1 link-text-sm">爱好1</option>
        <option class="link-m-1 link-text-sm">爱好2</option>
        <option class="link-m-1 link-text-sm">爱好3</option>
        <option class="link-m-1 link-text-sm">爱好4</option>
        <option class="link-m-1 link-text-sm">爱好5</option>
        <option class="link-m-1 link-text-sm">爱好6</option>
        <option class="link-m-1 link-text-sm">爱好7</option>
        <option class="link-m-1 link-text-sm">爱好8</option>
        <option class="link-m-1 link-text-sm">爱好9</option>
        <option class="link-m-1 link-text-sm">爱好10</option>
      </select> 
    </div>

    <div class="link-my-5 link-flex link-items-center">
      <span class="link-mr-5">性别</span>
      <div>
        <label class="link-mr-2">
          <input type="radio" checked name="sex" class="link-align-middle">
          <span class="link-text-sm">男</span>
        </label>

        <label>
          <input type="radio" name="sex" class="link-align-middle">
          <span class="link-text-sm">女</span>
        </label>
      </div>
    </div>

    <div class="link-my-5">
      <textarea placeholder="请输入个人简介" class="focus:link-border-border link-w-full link-resize-none link-h-24 link-border link-border-gray"></textarea>
    </div>

    <div class="link-my-5">
      <label>
        <input type="checkbox" class="link-align-middle"/>
        <span class="link-text-sm">同意台湾是中国领土不可分割的一部分</span>
      </label>
    </div>

    <div class="link-my-5 link-flex link-justify-between">
      <button disabled class="link-cursor-pointer link-w-40 disabled:link-cursor-not-allowed disabled:link-bg-border-disabled link-rounded-md link-h-10 link-bg-border link-text-white link-px-10 link-py-2">立即注册</button>
      <button type="reset" class="link-cursor-pointer link-w-40 disabled:link-cursor-not-allowed disabled:link-bg-border-disabled link-rounded-md link-h-10 link-bg-border link-text-white link-px-10 link-py-2">重置表单</button>
    </div>
  </form>
</body>
</html>

感觉小项目还是使用float或者flex

标签：flex,form,tailwind,margin,float,爱好,item,1px,border
From： https://www.cnblogs.com/lybaobei/p/18147140

相关文章

  • 《Pyramid Codes: Flexible Schemes to Trade Space for Access Efficiency in Reliab
    问题1：Introduction部分，第五段，[16，12]ERC和3-Copy达到了相同的可靠性，在每一个块独立失败概率为0.01的情况下，这个是怎么证明的。问题2：同上，第五段后半部分，那么多的IO次数是怎么计算出来的。在系统中，要分清各种性能指标，读和写是不一样的，第六段提到的是写性能，主要方法就是先用复制的方......
  • tailwindcss
    TailwindCSS是一个为快速创建定制化UI组件而设计的实用型框架。与其他CSS框架或库不同，TailwindCSS组件没有预先设置好样式。可以使用Tailwind的低级实用类来为CSS元素设置样式，如margin、flex、color等。自从2017年发布以来，TailwindCSS越来越受欢迎，因为它允许开......
  • Flex弹性盒子与容器属性
    目录Flex弹性盒子与容器属性flex布局flex容器属性Flex项目属性Flex弹性盒子与容器属性flex布局Flex布局（弹性盒子布局）是一种用于在容器中进行布局的模型，它使得容器的子元素能够以弹性的方式排列，可以配合rem处理尺寸以适应不同屏幕尺寸和设备。Flex布局在前端开发中得到了......
  • 庄子之棰 float 和 double 精度不同导致的误差
    结论：计算小数时优先选double，而不是float《庄子·天下》一尺之棰，日取其半，万世不竭。一米的棍子，一天砍掉一半，问第n天(1~20)时被砍掉的总长度是多少？类似的有小球落地反弹一半的路程，下面的代码求的是小球从50米高空落地反弹的路程，结果保留十位小数，代码看起来没啥问题，当输入......
  • scanf 中给 double 用 %f 时赋值异常, float lf, char s 同理
    结论scanf的变量要匹配对应的格式化字符串。floatf,doublelf,charc编译器提示的错误要消除，不消除不能运行；同时尽量消除警告doublefc语言中，给double类型的变量用scanf%f输入赋值时，会发生逻辑上的错误，请看代码#include<stdio.h>intmain(){doublevalue......
  • tailwindcss/React 性能优化
    tailwindcssvscode空格才出提示https://v2ex.com/t/1027326#reply4"editor.quickSuggestions":{"strings":true}React性能优化实用技巧在开发React应用时，性能优化是一个永恒的话题。本文将分享几个实用的工具和技巧，帮助你提升React应用的性能。ReactDeveloperToo......
  • Tailwind写法总结
    在使用TailwindCSS编写类时，通常按照以下一般顺序排列类，以确保代码的清晰性和易读性：定位类：包括控制元素位置的类，如absolute,relative,fixed,static,sticky等。盒模型类：包括控制元素内边距、外边距、宽度和高度的类，如p-,m-,w-,h-等。背景类：包括控制元素背景颜色、......
  • 移动WEB开发之flex布局
    一、flex布局体验传统布局兼容性好，布局繁琐，局限性，不能再移动端很好布局flex弹性布局操作方便，布局极为简单，移动端应用广泛，PC端浏览器支持情况较差建议：如果是PC端页面布局，我们还是传统布局如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局二、flex......
  • 基于 FlexLua 开源代码4G远程上报水表电表数值
    基于FlexLua开源代码4G远程上报水表电表数值1采集器和电表、水表连接方式采集器通过485总线可连接不同的水表和电表，每个表的RS485Modbus地址设置为不同即可。采集器通过4G无线传输方式，将采集到的电表数据（比如：三相电压，三相电流，功率因素，有功功率，频率）、水表（用水量）这些数......
  • Siemens 西门子 PLC Modbus写入float字节排列
    写保存寄存器功能码16示意：在西门子PLC中，实数，float，的保存方式遵循“高字节低地址，低字节高地址”的方式。假设使用16功能码向PLC的40005写入一个float，先利用BitConverter.GetBytes(f)得到要写的float的byte[]A。根据PLC中的存储方式，要想获得正确的float，在字40005的低......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99