<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>title>
<style type="text/css">
.box {
width: 100pxheight: 100pxposition: relative
}
.box a {
width: 100pxheight: 100pxdisplay: blockposition: absolutetop: 0left:0background: #ffffilter:alpha(opacity=0)/* IE */ opacity:0)/* FF */
}
.box a:hover {
width: 100pxheight: 100pxdisplay: blockbackground: url(111.jpg) no-repeat center centerfilter:alpha(opacity=100)opacity:1
}
CSS3代码
随着HTML5/CSS3技术日趋成熟,现如今被越来越多的网站广泛的运用。模板之家代码频道为大家收集整理最新的CSS3按钮代码,CSS3菜单代码,CSS3特效代码等供大家学习交流,好的代码是学习进步的基石同时也可以在项目中得以运用。
要实现的效果:
如果上面元素较少,提交按钮在屏幕底部,如果上面元素较多,接近一屏,或者超过一屏,按钮随之下移。
需要以下几点:
如果不写第三条,在某种情况下会有问题。
当list总条数接近屏幕底部的时候,列表会被按钮挡住:
完整demo:
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:button {display: inline-block}。
3、浏览器运行index.html页面,此时2个按钮水平对齐了。