HTML5+CSS3问题集锦

来源：互联网发布：人才外包知乎编辑：程序博客网时间：2024/05/17 22:49

最近在做一个房屋装修的项目，使用原生态HTML5+CSS3写前台页面。虽说画页面简单，但是如果对一些属性不知道，对一些错误不会调试，也是够费时费力费感情的。

1、如何让我的按钮或者是文本框等是为圆角？

如图：

我们只要设置如下代码中的属性就可以：只要设置四个radius就实现了圆角的效果。

<!DOCTYPE HTML><html lang="en"><html class="no-js" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title style="text-align: center">圆角</title></head><body><input type="button" style="height:50px;border:none;border-top-left-radius:5px;border-top-right-radius: 5px;border-bottom-left-radius:5px;border-bottom-right-radius: 5px;" value="提交申请"></body></html>

2、学会区分getElementById和getElementsByClassName

我们都知道getElementById()方法返回带有指定ID的元素，如果想要查找带有相同类名的所有Html，就使用getElementsByClassName()。现我就入到如下为题：

错误原因：使用getElementsByClassName的时候出现多个对象，没有加数组。

例如，一个div设置为隐藏，display=none，当点击按钮的时候，执行divShow()方法，div变为显示。

如果我们使用过的是ID的，就可以用如下代码：

function divShow(){  document.getElementById("container").style.display = "block";}

如果是使用的class，就使用数组。

function divShow(){  document.getElementsByClassName("container")[0].style.display = "block";  }

      3、如何显示一个半透明的图层

这个属性比较简单，设置一个背景色，设置一个透明属性就OK，例如设置透明度为0.75

        在DIV的样式内加入opacity=0.75   (opacity=x,x为数字，从0-1对应完全透明和完全不透明)

4、如何显示我们自己画的一个弹框

一个简单的方法：页面上点击一个按钮，弹出一个弹框，而弹框也是自己写的一个div，可以都画完，先把弹框隐藏，onclick事件之后弹框显示。

以上几个问题是自己画如图页面是所遇到的，最近接触H5和C3比较多，画出来的界面美美哒，心情也是美美哒，遇到问题也是美美哒。项目进行中，美美哒。各种问题及小知识，偶尔汇总一下，如再遇到，解决起来顺手多了。

3 0