简单的网页制作代码
用JS做一个简单的网页计算器如图所示,只进行简单的加减乘除运算(最好有完整代码)
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计数器</title></head><body> <input type="text" name="text" id="pre" onblur="validate(this.value);"> <select id="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" name="text" id="next" onblur="validate(this.value);"> <span>=</span> <input type="text" id="result" readonly="true"> <input type="button" id="btn" value="提交" onclick="calculator();"> <script> function validate(str){ var reg = /^\d+$/; if (!reg.test(str)) { alert("请输入数字"); } } function calculator(){ var pre=document.getElementById("pre").value; var next=document.getElementById("next").value; var opra=document.getElementById("operator").value; var result=0; switch(opra) { case "+": result=parseInt(pre)+parseInt(next); break; case "-": result=parseInt(pre)-parseInt(next); break; case "*": result=parseInt(pre)*parseInt(next); break; case "/": if(parseInt(next)!=0){ result=parseInt(pre)/parseInt(next); } else{ alert("除数不能为0"); return; } break; default: break; } document.getElementById("result").value=result; } </script></body></html>
html网页设计:一个简单的登录界面代码!
<!doctype html><html><head><meta charset="utf-8"><link href="main.css" type="text/css" rel="stylesheet"><title>登陆界面</title></head><body> <div class="login_ico"> <img src="images/login_ico.png"> </div> <div class="login_putin"> <ul> <li><input type="text" ></li> <li><input type="password" ></li> </ul> </div> <div class="login_btn"> <input type="submit" value="登陆"> </div></body></html>样式 :*{ margin:0; padding:0;}li{ list-style-type:none; margin:0; padding:0;}a{ text-decoration:none; color:#000;}/*---------------------按钮-----------------------------*/.login_putin ul li input{ margin: 0; width:70%; padding: 1em 2em 1em 5.4em; -webkit-border-radius:.3em; -moz-border-radius: .3em; border: 1px solid #999;}.login_btn{ width:300px; margin:40px auto 0 auto;}.login_btn input{ width:100%; margin:0; padding:.5em 0; -webkit-border-radius:.3em; -moz-border-radius: .3em; border:#1263be solid 1px; background:#1b85fd; color:#FFF; font-size:17px; font-weight:bolder; letter-spacing:1em;}.login_btn input:hover{ background:#1263be; }
像这样的一个简单网页制作的代码怎么写?谢谢大神
12345678910111213141516171819202122232425262728293031323334353637<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .notice{ width: 300px; margin: 0 auto; border: 3px solid #666; background: blue; color: white; } .notice h1{font-size: 30px; text-align: center; padding-bottom: 30px;} .notice a{color: white; text-decoration: none;} </style></head><body> <div class="notice"> <h1>通知</h1> <ul> <li> <a href="#">通知1</a> </li> <li> <a href="#">通知2</a> </li> <li> <a href="#">通知3</a> </li> <li> <a href="#">通知4</a> </li> </ul> </div></body></html>
html求制作一个简单网页代码,只需要一些文字加张图片
完整的代码如下:<html><head> <title>简单网页制作练习</title></head><body><p>1.文字内容,直接输入文字即可。。。。。如果想设置其相关属性可以使用font标签 <font size="18" color="red" >红色18号文字</font> </p> <p> 2.添加图片 <img src="图片名称.属性" id=“图片简介”> <img src="1.jpg" id=" 加入图片练习"> </p></body></html>楼主,如果不明白可以HI联系我。。。。
参考资料:
网站、网页制作(团队)