最实用的制作网页小技巧总结


本文摘自PHP中文网,作者小云云,侵删。

在我们程序员制作网页时,我们当然希望能制作一个非常美观的网页,那么本文我们就教大家几种非常有用的制作网页时的小技巧。

一、box-sizing:允许以特定的方式去定义匹配某个区域的特定元素。

content-box:在规定一个框的宽高之外给这个框加内边距和边框。

border-box:(textarea和select默认值)在规定的一个框的宽高之内给这个框加内边距和边框。

1

2

3

4

/*看个人习惯而用,但一般标签默认属性是content-box,除textarea,select*/

   box-sizing: content-box;

   -moz-box-sizing: content-box;

   -webkit-box-sizing: content-box;

二、美化input框

1

2

3

4

5

6

7

8

/*在IE10+浏览器中, 使用css即可隐藏input文本输入框右侧的叉号*/

input[type=text]::-ms-clear,::-ms-reveal{display:none;}

input::-ms-clear,::-ms-reveal{display:none;}

input{

  /*去除点击出现轮廓颜色*/

  outline: none;

  /*padding已在重置样式中去除,如果没有去除,记得有padding哦*/   

}

三、美化textarea文本域

1

2

3

4

5

6

7

8

textarea{

    /*别忘了文本域的box-sizing属性值是border-box;所有的边框和padding都是在你固定的宽高的基础上绘制*/

     /*去除点击出现轮廓颜色*/

      outline: none;   

      /*如果有需要,去掉右下角的可拉伸变大小的图标和功能*/

      resize: none;

      /*padding已在重置样式中去除,如果没有去除,记得有padding哦*/

}

四、改变placeholder的字体颜色大小

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

input::-webkit-input-placeholder {

    /* WebKit browsers */

    font-size:14px;

    color: #333;

}

input:-moz-placeholder {

    /* Mozilla Firefox 4 to 18 */

    font-size:14px;

    color: #333;

}

input::-moz-placeholder {

    /* Mozilla Firefox 19+ */

    font-size:14px;

    color: #333;

}

input:-ms-input-placeholder {

    /* Internet Explorer 10+ */

    font-size:14px;

    color: #333;

}

五、美化select

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/*清除ie的默认选择框样式清除,隐藏下拉箭头*/

select::-ms-expand { display: none; }

select {

  /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/

  border: solid 1px #333;

   

  /*将默认的select选择框样式清除*/

  appearance:none;

  -moz-appearance:none;

  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/

  background: url("小箭头图片路径") no-repeat right center transparent;

   

  /*为下拉小箭头留出一点位置,避免被文字覆盖*/

  padding-right: 14px;

   

  /*去除点击出现轮廓颜色*/

  outline: none;

}

六、美化button按钮

1

2

3

4

5

6

7

button{

    /*本身有2px的边框,一般的button都不需要边框*/

    border: none;

    /*本身有的背景色,可以用其他颜色取代*/

    background: #333;

    /*padding已在重置样式中去除,如果没有去除,记得有padding哦*/

}

七、美化单选框、多选框或者是上传文件按钮

1

2

3

/*因为用input[type="radio"]和input[type="cheakbox"]都不能直接改变它们的样式,这个时候要用到label标签关联,然后隐藏input标签,直接给label标签样式就好了。选中label就是选中了此标签*/

<label for="sex">男</label>

<input type="radio" id="sex" value="男" />

八、多出文字用省略号表示

1

2

3

white-space: nowrap; /* 强制不换行 */

overflow:hidden; / *内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ,需与overflow:hidden;一起使用。*/

九、css页面点击文字出现蓝色底色去掉方法

1

2

3

4

5

-moz-user-select: none; /* 火狐 */

-webkit-user-select: none; /* webkit浏览器 */

-ms-user-select: none; /* IE10 */

-khtml-user-select: none; /* 早期浏览器 */

user-select: none;

十、在遇见图标的垂直位置很难调整的时候可以用这个属性

1

2

vertical-align: 30%;

vertical-align: middle;

十一、如何让一个div在页面中上下左右居中

1

2

3

4

5

6

7

8

div{

    width:400px;

    height:300px;

    position:absolute;

    top:50%;

    left:50%;

    margin:-150px 0 0 -200px;

}

十二、js

1

2

3

4

5

// 在js中写的返回键

onclick = 'history.go(-1)';

   

// 强制刷新页面

window.location.reload(true);

十三、换行,不换行,字间距

1512007816255315.png

以上这十三个网页开发小技巧可以说是非常实用了,希望能帮助到大家。

相关推荐:

HTML网页优化压缩的实现步骤

怎么优化HTML网页

html的网页结构由哪些部分组成

HTML怎么设置网页背景图

优化HTML提高网页性能的方法

以上就是最实用的制作网页小技巧总结的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html中关于盒模型的总结

html网页的主体标签是什么?

网页为什么会出现乱码?解决方法介绍

网页banner尺寸1920

css书写顺序需要注意哪些?

怎样在html网页中使用bootstrap框架

html文本格式的知识总结

怎样可以在网页上调用桌面exe程序

12个冷门的h5设计小技巧

html5新增标签总结

更多相关阅读请进入《总结》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...