HTML5+CSS3问题集锦

       最近在做一个房屋装修的项目,使用原生态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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值