先看图吧

 

代码: 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>By CaesarChang张旭</title> <style> #top { position: relative; width: 800px; } #logo { float: left; width: 120px; } #nav { position: absolute; top: 40px; left: 80px; } #nav li { list-style: none; font-size: 13px; float: left; margin-left: 19px; } #nav li a { text-decoration: none; color: black; } #top2 { width: 800px; position: relative; } #banner { position: absolute; top: 100px; left: 0px; width: 800px; } #top3 { position: relative; } #text1 { position: absolute; left: 0px; top: 300px; } #text2 { position: absolute; top: 300px; left: 250px; font-size: 25px; font-weight: bold; } #text3 { position: absolute; left: 470px; top: 307px; text-decoration: none; color: coral; } #top4 { position: relative; border: 1px solid gainsboro; top: 329px; width: 200px; height: 200px; } #top5 { position: relative; border: 1px solid gray; top: 250px; height: 130px; } #son1 { position: absolute; } #son1_text { color: orange; font-size: 13px; margin-top: 169px; height: 35px; overflow: hidden; } #son2 { position: absolute; top: 210px; left: 0px; } #son3 { position: absolute; top: 11px; left: 9px; } #son4 { position: absolute; top: 88px; left: 28px; } #son5 { position: absolute; top: 410px; } #son6 { position: absolute; left: 256px; top: 10px; } #son7 { position: absolute; left: 257px; top: 88px; } #son8 { position: absolute; height: 20px; background-color: black; top: 690px; width: 800px; } #son9 { background-color: gray; position: absolute; height: 50px; top: 710px; width: 780px; padding: 10px; } #son10 { position: absolute; height: 70px; top: 470px; width: 500px; left: 256px; padding: 10px; border: 1px solid black; appearance: none; display: hidden; } </style> <script> function product() { var product = document.getElementById("product").value; if (product.length < 1) { alert("请填写产品名称"); } } function number() { var number = document.getElementById("number").value; if (number.length < 1) { alert("请填写数量"); } } function company() { var company = document.getElementById("company").value; if (company.length < 1) { alert("请填写公司"); } } function contect() { var product = document.getElementById("contect").value; if (product.length < 1) { alert("请填写联系人"); } } function phone() { var phone = document.getElementById("phone").value; if (phone.length < 1) { alert("请填写手机号码"); } } function chuanzhen() { var chuanzhen = document.getElementById("chuanzhen").value; if (chuanzhen.length < 1) { alert("请填写传真"); } } function Email() { var pattern = /^\w{0,}@{1}\w{0,}.{1}\w{0,}$/; var e = document.getElementById("email").value; if (pattern.test(e)) { } else if (!pattern.test(e)) { alert("请填写有效的邮箱！"); } } function ok() { var arr = ["亲爱的客户,您订购产品为"]; var all = document.getElementsByName("username"); arr.push(all[0].value + ",订购数量为"); arr.push(all[1].value + ".您公司"); arr.push(all[2].value + "联系人"); arr.push(all[3].value + "的电话为"); arr.push(all[4].value + ",邮箱"); arr.push(all[5].value + ",感谢您的订购"); var son10 = document.getElementById("son10"); son10.innerText = arr; son10.style.cssText = "visibility: visible;"; // alert(arr); } </script> </head> <body> <div id="top"> <img id="logo" src="./实验四材料/images/maintop001.gif"> <ul id="nav"> <li><a href="#">首页 </a>|</li> <li><a href="#">公司简介</a>|</li> <li><a href="#">新闻中心</a>|</li> <li><a href="#">产品展示</a>|</li> <li><a href="#">新品推荐</a>|</li> <li><a href="#">合作伙伴</a>|</li> <li><a href="#">网上订单</a>|</li> <li><a href="#">人才招聘</a>|</li> <li><a href="#">联系我们</a></li> </ul> </div> <div id="top2"> <img id="banner" src="./实验四材料/images/main_banner_r3_c1.jpg"> </div> <div id="top3"> <span id="text1">最新公告</span> <span id="text2">ONLINE ORDERS</span> <a id="text3" href="#">网上订单</a> </div> <div id="top4"> <div id="son1"> <div id="son1_text">本公司将一如即往，服务好新老客户，为客户提供最优价产品，欢迎联系我们！ 热线：0755-83155222 传真：0755-83155366 电邮：dulonglp@vip.163.com QQ:59223322 228238633</div> </div> <div id="son2">友情链接</div> <div id="top5"> <div id="son3"><img src="实验四材料/images/link002.gif"></div> <div id="son4"> <select onchange="window.location=this.value;"> <option value="#"> --友情链接-- </option> <option value="https://www.baidu.com/"> 百度 </option> </select> </div> </div> <div id="son5"> <img src="实验四材料/images/newp001.jpg"> </div> <div id="son6"> <img src="./实验四材料/images/newp006.jpg"> </div> <div id="son7"> <table align="left"> <tr> <td colspan="2">订购产品:<input type="text" name="username" id="product" onblur="product()" /></td> </tr> <tr> <td colspan="2">订购数量:<input type="text" name="username" id="number" onblur=" number()" /></td> </tr> <tr> <td colspan="2">订购公司: <input type="text" name="username" id="company" onblur=" company()" /> </td> </tr> <tr> <td colspan="2">联系人:<input type="text" name="username" id="contect" onblur=" contect()" /></td> </tr> <tr> <td colspan="2">联系电话:<input type="text" name="username" id="phone" onblur=" phone()" /></td> </tr> <tr> <td colspan="2">联系传真:<input type="text" name="username" id="chuanzhen" onblur=" chuanzhen()" /></td> </tr> <tr> <td colspan="2">Email: <input type="text" name="username" id="email" onblur=" Email()" /></td> </tr> <tr> <td colspan="2">备注:<textarea cols="39" rows="6"></textarea></td> </tr> <tr class="but" style="margin-left:40px;"> <td colspan="2"> <button onclick="ok()">提交订单</button> <input type="reset" name="reset" value="重写" /> </td> </tr> </table> </div> <div id="son8"></div> <div id="son9"> <font style="font-size: 8px;">版权所有：深圳市都龙实业发展有限公司　网站备案编号: <span style="color: orange;"> 粤ICP备05054648号</span>　服务热线：0755-83155222 传真：0755-83155366 E-mail:dulonglp@vip.163.com </font> </div> <div id="son10" style="visibility:hidden;"> </div> </div> </body> </html>

By CaesarChang 张旭                合作: root121toor@gmail.com

~关注我  带你看更多精品技术和面试必备

  干项目了,想要进修一下基础的可以加群

       号码   1153132260

干项目了 

拜了个拜 

 

CaesarChang张旭 认证博客专家 Spring Spring Boot Java 曾就职于苏宁,爱奇艺等公司,擅长java后端开发,拥有多年项目经验和教学经验；在多个大型企业级项目中担任过重要角色。教学风格严谨而又不失幽默,注重培养学员的自主学习和解决问题的能力，授课得到学员的高度认可。