CSS 设置按钮,文本输入框

           CSS 设置按钮,文本输入框

       这次我第一次写CSS方面的博客,这个HTML+CSS也才刚刚起步,可能写的有些片面、不足望大家指正。

       首先来写一个按钮,用<a>标签来写直接上代码

 

下面来一一讲解看现象

       首先来个最基本的按钮

 

CSS部分:

a{

             

              /*设置字体、大小和颜色*/

              font-family:"微软雅黑";

              font-size:15px;

              color:white;

              /*按钮大小*/

              height:30px;

              width:50px;

/*设置按钮背景颜色*/

              background-color:#5BEFB5;

       }     

 

HTML部分:

<body>

 <a href="javascript:void(0)">提交</a>

</body>

 

HTML部分不变,得到最基本的按钮,发现按钮太小改变heightwidth发现怎么变都只有那么大,原来<a>标签是行内元素heightwidth不起作用,那么我们需要将行内元素改为块元素,于是我们添加这样一句(红色部分)

a{

              /*使行内元素为块元素*/

              display:inline-block;

              /*设置字体、大小和颜色*/

              font-family:"微软雅黑";

              font-size:15px;

              color:white;

              /*按钮大小*/

              height:30px;

              width:50px;

             

              background-color:#5BEFB5;

       }

 

这下我们发现我们设置的heightwidth起到作用了,但是我们发现在提交两个字下有一条横线,这是不需要的,于是我们又添加一句(红色部分)

a{

              /*使行内元素为块元素*/

              display:inline-block;

              /*设置字体、大小和颜色*/

              font-family:"微软雅黑";

              font-size:15px;

              color:white;

              /*按钮大小*/

              height:30px;

              width:50px;

              text-decoration:none;

             

              background-color:#5BEFB5;

       }

这时我们发现那条横线不见了,但是我们又觉得这个字没有在按钮的中间,于是我们又加入一句(红色部分)

a{

              /*使行内元素为块元素*/

              display:inline-block;

              /*设置字体、大小和颜色*/

              font-family:"微软雅黑";

              font-size:15px;

              color:white;

              /*按钮大小*/

              height:30px;

              width:50px;

              text-decoration:none;

              background-color:#5BEFB5;

              text-align:center;

       }

于是按钮变成这样,但只是水平居中,垂直方向却没有居中,于是接着加入line-height:30px;通过设置行间距与按钮高度相等的值即可垂直居中,但这只适合单行,有些元素有一个vertical-align属性可以设置,只适合valign特性的元素,但<a>标签没有该属性,其实我们也可以通过设置padding的值也行。这里我们采取第一种办法(红色部分)

a{

              /*使行内元素为块元素*/

              display:inline-block;

              /*设置字体、大小和颜色*/

              font-family:"微软雅黑";

              font-size:15px;

              color:white;

              /*按钮大小*/

              height:30px;

              width:50px;

              /*设置垂直居中*/

              line-height:30px;

              text-decoration:none;

             

              background-color:#5BEFB5;

              text-align:center;

 

       }

于是得到了这样的按钮,现在是不是有点样子了。但感觉还是不够好看于是我们加一加圆角和阴影(红色部分)

a{

              /*使行内元素为块元素*/

              display:inline-block;

              /*设置字体、大小和颜色*/

              font-family:"微软雅黑";

              font-size:15px;

              color:white;

              /*按钮大小*/

              height:30px;

              width:50px;

              /*设置垂直居中*/

              line-height:30px;

              text-decoration:none;

             

              background-color:#5BEFB5;

              text-align:center;

 

              border-radius:5px;

              box-shadow:2px 2px 2px gray;

 

       }

得到现在这个,是不是有点样子了,但我还是感觉有点单调朴素,要不来个动态效果于是我们又可以加入下面的(红色部分)

a:hover{

                     /*重设背景颜色*/

                     background-color:#2C3E50;

                     /*背景颜色过渡时间*/

                     transition:background-color 0.3s linear;

                     -moz-transition: background-color 0.3s linear;/*Firefox 4 */

                     -webkit-transition: background-color 0.3slinear; /* Safari Chrome */

                     -o-transition: background-color 0.3s linear;

                     /*经过按钮时,按钮扩大1.1*/

                     transform:scale(1.1);

                     }

这样就得到了当鼠标移到按钮上时,按钮会变大1.1倍,在0.3s内按钮背景颜色会从#5BEFB5变成#2C3E50,中间的一些代码是解决浏览器不兼容的问题。其中IE10以下版本不支持transition属性。得到如下效果:

鼠标移动到按钮前,鼠标移动到按钮上,这里有个放大效果哦。

下面是完整的源码:

CSS部分:

<style type="text/css">

       a{

              /*使行内元素为块元素*/

              display:inline-block;

              /*设置字体、大小和颜色*/

              font-family:"微软雅黑";

              font-size:15px;

              color:white;

              /*按钮大小*/

              height:30px;

              width:50px;

              line-height:30px;

             

              /*文字居中*/

              text-align:center;

              /*文字下面没有横线*/

              text-decoration:none;

              /*按钮颜色*/

              background-color:#CFD7EB;

              /*设置按钮四角的圆弧*/

              border-radius:5px;

 

              /*设置按钮阴影*/

              box-shadow:2px2px 5px gray;             

       }

 

 

       a:hover{

                     /*重设背景颜色*/

                     background-color:#2C3E50;

                     /*背景颜色过渡时间*/

                     transition:background-color0.3s linear;

                     -ms-transition:background-color 0.3s linear;

 

                     -moz-transition:background-color 0.3s linear;/* Firefox 4 */

                     -webkit-transition:background-color 0.3s linear; /* Safari Chrome */

                     -o-transition:background-color 0.3s linear;

                     /*经过按钮时,按钮扩大1.1*/

                     transform:scale(1.1);

                     }

</style>

 

HTML部分:

<body>

 <a href="javascript:void(0)">提交</a>

</body>

 

CSS 文本输入框

input{

              display:inline-block;

              /*设置输入框的大小*/

              height:25px;

              width:200px;

              /*元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,谷歌浏览器默认有强调,当然出现这种效果只会在谷歌等部分浏览器中*/

              outline:none;

/*加了这句话后的效果*/

              /*给输入框设置边框,边框颜色设为#e5e5e5,覆盖掉输入框上边框有黑色阴影的问题可以看到不加下面这句话时,输入框的上边框和左边框有黑色阴影,加了之后,原理就是设置白色边框覆盖掉黑色的阴影*/

              border:1pxsolid #e5e5e5;

/*keyi*/

              /*设置文字与边框的距离加了之后,是不是感觉更加舒服了呢*/

              text-indent:0.5em;

              /*padding-left:50px;也可以用padding来解决这个问题*/

              border-radius:3px;/*设置圆角就不多说了*/

 

       }

 

看一下整体效果是不是还可以啊!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值