html和php网站哪个好,HTML和PHP网站设计实例

HTML部分：

首先我们需要准备两粒色子和奖品素材，这些作者已经打包上传了，请大家放心下载。我们将在html页面中写下如下的html结构代码，。wrap用来放置色子和提示信息，#prize则是用来放置奖品的。

CSS部分：

我们要用CSS技术来将页面布局合理规范化，我们将奖品围成一个矩形，共10个位置，将两粒色子定位在矩形的中央，抽奖时可以直接点击中间的色子。这些我们可以用CSS的定位技术来实现页面布局。

。demo{width:650px; height:420px; margin:60px auto 10px auto; position:relative; }

。wrap{width:200px; height:100px; position:absolute; margin-left:220px; margin-top:140px; z-index:1000;}

#msg{display:none;width:50px; height:20px; padding:4px; background:#ffc; border:1px solid #fc9;

text-align:center; color:#f30; font-size:18px; position:absolute; z-index:1001; right:-20px; top:-10px}

。dice{width:90px; height:90px; display:block; float:left; background:url(dice.png) no-repeat; cursor:pointer}

#dice_mask{width:200px; height:100px; background:#fff; opacity:0; position:absolute; top:0; left:0; z-index:999}

。dice_1{background-position:-5px -4px}

。dice_2{background-position:-5px -107px}

。dice_3{background-position:-5px -212px}

。dice_4{background-position:-5px -317px}

。dice_5{background-position:-5px -427px}

。dice_6{background-position:-5px -535px}

。dice_t{background-position:-5px -651px}

。dice_s{background-position:-5px -763px}

。dice_e{background-position:-5px -876px}

#prize{position:relative}

#prize li{position:absolute; width:150px; height:112px; border:1px solid #d3d3d3}

#d_0{left:0; top:0}

#d_1{left:160px; top:0}

#d_2{left:320px; top:0}

#d_3{left:480px; top:0}

#d_4{left:480px; top:128px}

#d_5{left:480px; top:256px}

#d_6{left:320px; top:256px}

#d_7{left:160px; top:256px}

#d_8{left:0; top:256px}

#d_9{left:0; top:128px}

。mask{opacity: 0.6; width:150px; height:112px; line-height:32px; background:#ffc;

z-index:1001; position:absolute; top:0; left:0; text-align:center; font-size:16px}

jQuery部分：

我们使用jQquery来完成前端动作，包括掷色子动画，仿大富翁奖品逐步运动动画，其中有防重复点击知识、ajax交互知识，动画提示知识。整个 操作流程可简单概括为：点击色子->向dice.php发送ajax请求->完成掷色子动画->提示点数->逐步运动动画到最终 奖品位置停止->完成抽奖。