Html——选项框、立方体与选项框

最新推荐文章于 2024-05-03 11:17:45 发布
最新推荐文章于 2024-05-03 11:17:45 发布
阅读量4.7k 收藏 26
点赞数 1
分类专栏： html 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43547255/article/details/121273648
版权

Html——选项框、立方体与选项框

一、html选项框

1.单选框
name值相同为一个选项，只会有一个内容被选中类型为radio
2.复选框
同一个选项name值要相同，但是可以有多个内容被选上checkbox

<!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>Document</title>
</head>
<style>
.demo{
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
#bgcolor:checked~.demo{
    background-color: skyblue;
}
</style>
<body>
    <form action="" method="POST">
        女生
        <input type="radio" value="女" name="gender" id="bgcolor">
        男生
        <input type="radio" value="男" name="gender">
        <hr>
        西瓜<input type="checkbox" value="西瓜" name="fruit" ">
        菠萝<input type="checkbox" value="菠萝" name="fruit" >
        哈密瓜<input type="checkbox" value="哈密瓜" name="fruit">
        <hr>
        <input type="submit" value="提交">
        <hr>
        <div class="demo"></div>
    </form>
</body>
</html>

label可以绑定输入框，for绑定选项id

<!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>Document</title>
  </head>
  <style>
    .control{
        width: 300px;
        height: 300px;
        margin: 100px auto;
    }
    .demo {
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    #bgyellow:checked ~ .demo {
      background-color: rgb(247, 250, 49);
    }
    #bgblue:checked ~ .demo {
      background-color: rgb(52, 143, 218);
    }
    #bggreen:checked ~ .demo {
      background-color: rgb(92, 250, 184);
    }
  </style>
  <body>
<div class="control">
    <form action="" method="POST">
      <label for="bgyellow">
        选择为黄色
      </label>
      <label for="bgblue">
        选择为蓝色
      </label>
      <label for="bggreen">
        选择为绿色
      </label>
      <h4>选择你喜欢的颜色</h4>
      黄色
      <input type="radio" value="黄色" name="gender" id="bgyellow" /><br />
      蓝色
      <input type="radio" value="蓝色" name="gender" id="bgblue" /><br />
      绿色
      <input type="radio" value="绿色" name="gender" id="bggreen" /><br />
      <div class="demo"></div>
    </form>
</div>
  </body>
</html>

请添加图片描述

label设置按钮样式

<!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>Document</title>
  </head>
  <style>
    .control {
      width: 600px;
      height: 300px;
      margin: 100px auto;
    }
    .demo {
      width: 100px;
      height: 80px;
    }
    #bgyellow:checked ~ .demo {
      background-color: rgb(247, 250, 49);
    }
    #bgblue:checked ~ .demo {
      background-color: rgb(52, 143, 218);
    }
    #bggreen:checked ~ .demo {
      background-color: rgb(92, 250, 184);
    }
    label {
    /* 本身是行元素设置为行块元素 */
      display: inline-block;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-family: "宋体";
      box-shadow: 0px 0px 0px #424242;
      transition: 0.5s;
      border-radius: 10px;
      margin: 20px;
    }
    label:hover {
      box-shadow: 0px 0px 10px #424242;
    }
  </style>
  <body>
    <div class="control">
      <form action="" method="POST">
        <h4>选择你喜欢的颜色</h4>
        <label for="bgyellow">
          选择为黄色
        </label>
        <label for="bgblue">
          选择为蓝色
        </label>
        <label for="bggreen">
          选择为绿色
        </label>
        <input
          type="radio"
          value="黄色"
          name="gender"
          id="bgyellow"
          hidden
        />
        <input
          type="radio"
          value="蓝色"
          name="gender"
          id="bgblue"
          hidden
        />
        <input type="radio" value="绿色" name="gender" id="bggreen" hidden />
        <div class="demo"></div>
      </form>
    </div>
  </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>Document</title>
    <link rel="stylesheet" href="../css/cubestyle.css" />
  </head>
  <body>
    <div class="control">
      <input type="radio" id="front" hidden="hidden" name="selectone" />
      <input type="radio" id="back" hidden="hidden" name="selectone" />
      <input type="radio" id="left" hidden="hidden" name="selectone" />
      <input type="radio" id="right" hidden="hidden" name="selectone" />
      <input type="radio" id="top" hidden="hidden" name="selectone" />
      <input type="radio" id="bottom" hidden="hidden" name="selectone" />
      <input type="radio" id="big" hidden="hidden" name="selectone" />
      <input type="radio" id="small" hidden="hidden" name="selectone" />
      <div class="cube">
        <div class="content front"></div>
        <div class="content back"></div>
        <div class="content left"></div>
        <div class="content right"></div>
        <div class="content top"></div>
        <div class="content bottom"></div>
      </div>
      <br />
      <br />
      <br />
      <div class="choose">
        <label for="front" class="btn">前面</label>
        <label for="back" class="btn">后面</label>
        <label for="left" class="btn">左面</label>
        <label for="right" class="btn">右面</label>
        <label for="top" class="btn">上面</label>
        <label for="bottom" class="btn">下面</label>
        <label for="small" class="btn">缩小</label>
        <label for="big" class="btn">放大</label>
      </div>
    </div>
  </body>
</html>


body {
  perspective: 1000px;
}
.control {
  margin: 100px auto;
}
.cube {
  margin: 0px auto;
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 1, 0deg);
  transition: all 5s;
}
.cube:hover {
  transform: rotate3d(0, 1, 1, 720deg);
}
.content {
  position: absolute;
  opacity: 0.6;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
}
.front {
  background-image: url("../imag/a.jpg");
  background-size: 100% auto;
  transform: translateZ(50px);
}
.back {
  background-image: url("../imag/b.jpg");
  background-size: 100% auto;
  transform: translateZ(-50px);
}
.left {
  background-image: url("../imag/c.jpeg");
  background-size: auto 100%;
  transform: rotateY(-90deg) translateZ(50px);
}
.right {
  background-image: url("../imag/f.jpeg");
  background-size: auto 100%;
  transform: rotateY(90deg) translateZ(50px);
}
.top {
  background-image: url("../imag/d.jpg");
  background-size: auto 100%;
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background-image: url("../imag/e.jpeg");
  background-size: auto 100%;
  transform: rotateX(-90deg) translateZ(50px);
}
.choose {
  width: 700px;
  height: 100px;
  text-align: center;
  margin: 0 auto;
}
.btn {
  width: 80px;
  height: 40px;
  font-size: 20px;
  color: #424242;
  border-radius: 10px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 40px;
  display: inline-block;
}
#front:checked ~ .cube {
  transform: rotate3d(0, 0, 0, 0deg);
}
#back:checked ~ .cube {
  transform: rotate3d(0, 1, 0, 180deg);
}
#left:checked ~ .cube {
  transform: rotate3d(0, 1, 0, 90deg);
}
#right:checked ~ .cube {
  transform: rotate3d(0, 1, 0, -90deg);
}
#top:checked ~ .cube {
  transform: rotate3d(1, 0, 0, 90deg);
}
#bottom:checked ~ .cube {
  transform: rotate3d(1, 0, 0, -90deg);
}
#big:checked ~ .cube {
  transform: scale(1.3) rotate3d(1, 0, 0, -90deg);
}
#small:checked ~ .cube {
  /* 放大倍数translateZ() */
  transform: scale(0.5) rotate3d(1, 0, 0, -90deg);
}
#front:checked ~ .choose [for="front"] {
  background: #ccc;
  box-shadow: 0 0 10px #424242;
  color: #fff;
}
#back:checked ~ .choose [for="back"] {
  background: #ccc;
  box-shadow: 0 0 10px #424242;
  color: #fff;
}
#left:checked ~ .choose [for="left"] {
  background: #ccc;
  box-shadow: 0 0 10px #424242;
  color: #fff;
}
#right:checked ~ .choose [for="right"] {
  background: #ccc;
  box-shadow: 0 0 10px #424242;
  color: #fff;
}
#top:checked ~ .choose [for="top"] {
  background: #ccc;
  box-shadow: 0 0 10px #424242;
  color: #fff;
}
#bottom:checked ~ .choose [for="bottom"] {
  background: #ccc;
  box-shadow: 0 0 10px #424242;
  color: #fff;
}
#big:checked ~ .choose [for="big"] {
  background: #ccc;
  box-shadow: 0 0 10px #424242;
  color: #fff;
}
#small:checked ~ .choose [for="small"] {
  background: #ccc;
  box-shadow: 0 0 10px #424242;
  color: #fff;
}

在这里插入图片描述

可可鸭~
关注
  • 1
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML中文本框\单选框\按钮\多选框
爪哇人的博客
10-23 4210
【代码】HTML中文本框\单选框\按钮\多选框。
html中正方形选择,html中正方形的单选框怎么设置
weixin_29534421的博客
06-07 1万+
1.html语言制作网页单选框………………………… 根据上面的三行应该可以看出规律来了吧，根据这个规律往下写就是了。2.html 怎么设置单选框的样式1、首先打开编辑器，然后新建一个html文件，编写入基本的框架。2、然后用form,input和label创建一个单项选择题。3、创建一个新的css文件，并且用link标签关联HTML文件。4、然后撤销一下原来按钮的样式。nput[type="rad...
html怎么写下拉选择框
最新发布
m0_65659549的博客
05-03 390
代表下拉列表中的一个选项。在实际应用中，你可以根据需要添加更多选项，并根据实际情况调整。在HTML中创建下拉选择框，通常使用。
HTML基础用法
SwitchD的博客
09-03 3109
目录 一、HTML 二、HTML、CSS、JavaScript区别 三、支持HTML的软件 四、DOM树结构 五、HTML在VSCode上相关快捷键 六、HTML常见标签 1.标题标签（h1-h6） 2.段落标签（P标签） 3.换行标签 （br标签） 4.格式化标签 5.图片标签（img） 6.超链接（a标签） 7.表格标签（table标签） 8.列表标签 9.表单标签 （1）form标签 （2）input标签 （3）label标签 （4）select标签 （5）textarea 多行编辑框 10.div
html表单和常用属性
qq_57064821的博客
01-19 913
html5中新增的表单属性及应用，input输入框得类型，html日期、音视频、图片、邮箱、网址输入，html输入内容验证
HTML——选择器总结（直观 一目了然）
weixin_68917948的博客
03-31 5762
看了就会的css选择器的总结与使用，简单，直观
将html的radio单选框自定义样式为正方形和对号
_小郑有点困了的博客
12-13 1116
改成自定义的样式呢？比如想要把他变成正方形，选中的时候是对号。
立方体城市会员登录框响应式网页模板
01-22
立方体城市会员登录框响应式网页模板
HTML5 3D立方体按钮翻转特效
06-24
HTML5 3D立方体按钮翻转特效是一款在鼠标滑过按钮时，按钮会3D旋转到另外一个面上，显示不同的内容。
HTML5 3D立方体旋转动画特效代码
03-20
HTML5 3D立方体旋转动画是一款绚丽的HTML5 3D立方体旋转动画，这款立方体的色彩看上去非常艳丽，旋转起来的动画效果也十分流畅，是一款很不错的HTML5 3D动画效果。
计算机图形学——立方体旋转 VC MFC
10-17
计算机图形学——立方体旋转 VC MFC
双层旋转立方体.rar
08-17
用html+css写的双层旋转立方体照片墙动画，内六外六一共十二张图片，可随意替换。
html选择框修改样式
qq_45232054的博客
12-19 1044
将单选框的redio样式改编成长方形 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit...
自定义html下拉选择框,CSS自定义select下拉选择框的样式(不用其他标签模拟)
weixin_34401008的博客
06-03 1602
今天群里有人问到怎么自定义select下拉选择框的样式，于是群里就展开了激烈的讨论，刚开始一直就是考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不好而失败告终，最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单，或者是使用网上一些现成的插件。其实select这个东西只靠纯CSS是不能解决这个自定义样式问题的，但既然折腾了这么久，还是说一下CSS实现的思路吧。首...
html,css制作单选框
weixin_47580522的博客
01-08 602
html,css
HTML:使用单选框、复选框，让用户选择
热门推荐
11-09 1万+
语法： 1、type:    当type="radio"时，控件为单选框    当type="checkbox"时，控件为复选框 2、value：提交数据到服务器的值（后台程序PHP使用） 3、name：为控件命名，以备后台程序ASP、PHP使用 4、checked：当设置checked="checked"时，该选项被默认选中 注意:同一组的单选按钮，name取值一定要一致，比如
html5 选项卡
weixin_30911809的博客
06-14 701
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <style> *{margin: 0;padding: 0;} ul li{ padd...
html简单的选项卡
2012013977的博客
04-27 2105
html简单的选项卡
正方形的复选框html,正方体.html
weixin_39969953的博客
05-31 556
Document*{margin: 0;padding: 0;}div{background-size: cover;}.box{width: 200px;height: 200px;margin: 300px auto;position: relative;transform-style: preserve-3d;/* perspective: 500px; */animation: over ...
html制作一个立方体
03-25
可以使用HTML中的div元素和CSS中的transform属性来制作一个立方体。 HTML代码： ```html <div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face left"></div> <div class="face right"></div> <div class="face top"></div> <div class="face bottom"></div> </div> ``` CSS代码： ```css .cube { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg); } .face { position: absolute; width: 100px; height: 100px; } .front { background: red; transform: translateZ(50px); } .back { background: blue; transform: rotateY(180deg) translateZ(50px); } .left { background: green; transform: rotateY(-90deg) translateZ(50px); } .right { background: yellow; transform: rotateY(90deg) translateZ(50px); } .top { background: purple; transform: rotateX(90deg) translateZ(50px); } .bottom { background: orange; transform: rotateX(-90deg) translateZ(50px); } ``` 其中，HTML中的div元素表示立方体的六个面，CSS中的transform属性用来定位和旋转这六个面。 请注意，这只是一个简单的示例，可以根据需要调整大小和样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可可鸭~

想吃糖~我会甜

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值