整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML讲解-网页中的文本框

们在上网的时候,经常有一些登录界面进行输入账号和密码,以及我们在网上填一些信息,这些功能的实现都是通过表单来完成的,今天我们就来讲讲表单。

表单不是指一个标签,而是指一类标签。

我们表单里所有的内容都要写在<form></form>标签中 form的action属性是将表单所填的内容发送到想要发送的后台,而method属性有两个值,分别是get和post。get和post的主要区别是get表单所传的内容会在地址栏里显示出来,并且有长度限制,而post表单所传的内容不会在地址栏显示出来,并且可以视为没有长度限制。一般系统默认get。当然get和post的细区别还是有的,在这里我就不赘述了。

其中最重要的是<input>标签,input标签也是单标签。input标签的type属性值不同,其产生的作用也不同:如:<input type="text">产生的是文本框,一般都是我们登录时输入的账号那样的文本框。<input type="password">,产生的是密码框,一般都是我们登录时输入密码的那个框框。<input type="submit">产生的是提交框,一般是我们登录的那个按钮。这些标签都有value属性,但只有提交框用最合适用,因为文本框和密码框虽然也会展示出来,但效果却差强人意,我们一般都用placeholder属性替代它。

不知大家有没有在网上做过选择题,作者是做过的。网页中的选择题也是用的input。

input的type属性值还有radio,是单选框,有几个选项就写几个input,但要注意每一个input里都要写相同的name属性和属性值,这样的话浏览器才会知道这些是同一道题。

既然有单选题那一定也有多选题了,type的checked属性是多选框,其和单选的用法一样,也都要注意name一样的为一道题,还有一个属性是checked=“checked”,这个可以设定默认选择的选项。

我们也一定遇到过选择文字就能勾选而不用非得去点选框的情况,其实input选择框只有被点击的时候才能选中,但有的时候太小不容易点击甚至有的根本没有显示出来,这样的话用户体验就会非常的差,所以我们引进了一个标签:<label></label>标签,这个标签可以实现点击文字就进行选择的功能,用法就是将input标签和文字写在同一个label标签中,注意每一个选项写一起。

我们来看一下代码和结果:

作者已经尽量去说清楚了,欢迎大家批评指教,希望多多关注[送心]

order 盒子边框

复合属性。设置对象边框的特性。

盒子边框三要素:

① 边框粗细

② 边框样式

③ 边框颜色

语法:border: border-width | border-style | border-color ;

边框四边的粗细、样式、颜色,以及上下左右每个位置的样式属性都是可以单独调整的。

边框的颜色不是必要的,如果不指定颜色,默认颜色为黑色,但必须为盒子指定宽高。


初始 HTML

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div{
             width: 500px;
             height: 50px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>




边框样式

使用 border-style 可为盒子边框设置样式,以下示例为实线

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid; 
 }

效果:


可单独针对某一方向设置边框样式

示例 CSS 代码

  • 上边:border-top-style: double; (双线)
  • 右边:border-right-style: solid; (实线)
  • 下边:border-bottom-style: dashed; (虚线)
  • 左边:border-left-style: dotted; (点线)


border-style 说明

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-width等于0,本属性将失去作用。

如果需要设置不同方向的样式属性,可以写在一句 CSS 代码里,比如说下面这段代码,上下实线,左右虚线。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果:


border-style 样式属性值

属性值解释none无轮廓。 border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓




边框粗细

使用 border-width 可为盒子边框设置粗细,以下示例边框为 5px 粗细

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width: 5px;
 }

效果


可单独针对某一方向设置边框粗细

示例 CSS 代码

  • 上边:border-top-width: 10px; (双线)
  • 右边:border-right-width: 10px; (实线)
  • 下边:border-bottom-width: 10px; (虚线)
  • 左边:border-left-width: 10px; (点线)


border-width 说明

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-style设置为none或hidden,border-width的使用值将为0。

如果需要设置不同方向的边框粗细,可以写在一句 CSS 代码里。

比如说下面这段代码,上下2px,右2px,左5px。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
 }

效果:




边框颜色

可直接输入

颜色的英文名称

rgb值

十六进制

使用 border-color 可为盒子边框设置颜色,以下示例边框颜色为红色。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
     border-color: red;
 }

效果:


可单独针对某一方向设置边框颜色

示例 CSS 代码

  • 上边:border-top-color: 10px;
  • 右边:border-right-color: 10px;
  • 下边:border-bottom-color: 10px;
  • 左边:border-left-color: 10px;


border-color 说明

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-width等于0或border-style设置为none,本属性将被忽略。

上面有两个示例讲述如何设置不同方向的属性,border-color 也是相同使用方法,此处就不做示例了。




border 是复合属性

如果你需要同时设置盒子的粗细、样式、颜色,那么你可以将他们的样式表写在同一行代码里。

例如:

 /* CSS代码 */
 div{
     border-top: 5px solid red;
 }

这段代码指定了上边框的三个属性:粗细、样式、颜色

border-top 包含了:

  • border-top-width: 5px;
  • border-top-style: solid;
  • border-top-color: red;

其他同理




教你用 CSS 画个三角形

先来看一个示例

 /* CSS代码 */
 div{
     width: 100px;
     height: 100px;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果:

细心的你,一定发现了 border 的边框四条边交接处是斜角。


此刻我们把盒子的宽高设置为 0

 /* CSS代码 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果:

是不是完完全全像四个三角形一样。

我们只需要把上边和左右两边的三角形隐藏起来,它不就是一个三角形了。

为 border-color 指定 transparent 值,使盒子边框颜色变透明

 /* CSS代码 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
     border-left: 50px solid transparent;
 }

效果:

把另外三条边透明之后,就只剩一个三角形了。





部分资料引用自:

  • http://caibaojian.com/css3/properties/border/index.htm

人可能会疑惑,我为什么专门用一节内容来说边框和圆角。其实,不为别的,只为它们在开发中,在Web系统中,在手机页面中,太常用了。有边框的页面,让人耳目一新,一目了然;有圆角的内容,让人赏心悦目,心旷神怡。说的有点夸张了,就这么着吧。

边框(border)一般为长方形形状,有上下左右四条边,CSS边框属性允许你指定一个元素边框的样式和颜色。CSS的圆角(border-radius)方法,可给任何元素制作 "圆角"效果。

11.1 边框逼格

在CSS中,你可以通过border和其延伸的,如border-style,来实现边框的效果。上边框相关的有border-top-style样式、border-top-color颜色、border-top-width宽度和组合了它们的border-top。下、左右边框类似,换成对应的单词即可。

边框样式(border-style)常用的有dotted(点线)、dashed(虚线)、solid(实线)、double(双边框)这四种,不常用的有groove(3D沟槽)、ridge(3D脊边)、inset(3D嵌入)和outset(3D突出)。

/* --------在样式表文件中---------- */
/*4条边框一起设置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四条边框可个性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*单条边框设置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>边框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border统一设置四条边框<br/>
    顺序为:border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四条边框一起设置,风格可不同<br/>
    顺序为:上、右、下、左。<br/>
    1. 只有一个值(如:border-width:2px):表示4条边框全部一样;<br/>
    2. 有两个值(如:border-width:2px 3px):表示上下和右左;<br/>
    3. 有三个值(如:border-width:2px 3px 1px):表示上、右左、下;<br/>
    4. 有四个值(如:border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    单独一天边框进行设置<br/>
    border-top:顶部宽度、样式、颜色,一起设置<br/>
    border-top-width:上边框宽度;<br/>
    border-top-style:上边框样式;<br/>
    border-top-color:上边框颜色。
    <br/>
</div>
</body>
</html>

输出结果

11.2 圆角风格

使用CSS的border-radius 属性,你可以给任何元素制作 "圆角"。 border-radius统一指定4个圆角,顺序为左上、右上、右下和左下。如果要特定指定某个角的话,用border-top-left-radius等方式即可。

在样式表ys2.css文中的内容

/*4个角统一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*单独指定一个角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<br/><br/>
<div class="four-radius">
    统一设置4个圆角<br/>
    一个值: 四个圆角值相同;<br/>
    两个值: 左上角与右下角,右上角与左下角;<br/>
    三个值: 左上角, 右上角和左下角,右下角;<br/>
    四个值: 左上角,右上角,右下角,左下角。
</div>
<br/>
<div class="one-radius">
    单独指定某个角<br/>
    border-top-left-radius:左上角;<br/>
    border-top-right-radius:右上角;<br/>
    border-bottom-right-radius:右下角;<br/>
    border-bottom-left-radius:左下角。
</div>

输出结果

11.3 圆角边框

不要重复造轮子,所以好多程序员一遇到问题,就喜欢搜索,我也是,哈哈哈~。CSS有指定边框的属性,也有圆角的属性,将其放在一起,是不是就可以实现圆角边框?答案毋庸置疑,答案是肯定的。

在样式表ys2.css文件中的内容

/*圆角边框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<div class="corners">
    边框属性和圆角属性,组合成圆角边框
</div>

输出结果


好了,有关CSS的圆角边框内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。

#前端##HTML5##CSS##程序员##Web#