做网站优化的注意事项郑州网站推广
长期补充，建议关注收藏点赞。
目录
- a标签设置不一样的花样（图片但不用img)
- 侧边固定box
- 分栏
- input各种类型
- iframe
- 表单
- 拖拽
a标签设置不一样的花样（图片但不用img)
- a标签里面不用嵌套img，直接设置为其bg-img即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {text-decoration: none;width: 120px;height: 58px;background-color: pink;display: inline-block;text-align: center;line-height: 50px;color: #fff;}/* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */.one {background-image: url(./images/bg1.png);}.two {background-image: url(./images/bg2.png);}.three {background-image: url(./images/bg3.png);}.four {background-image: url(./images/bg4.png);}.one:hover {background-image: url(./images/bg5.png);}.two:hover {background-image: url(./images/bg6.png);}.three:hover {background-image: url(./images/bg7.png);}.four:hover {background-image: url(./images/bg8.png);}</style>
</head>
<body><a href="#" class="one">五彩导航</a><a href="#" class="two">五彩导航</a><a href="#" class="three">五彩导航</a><a href="#" class="four">五彩导航</a>
</body>
</html>
侧边固定box
- 侧边固定栏
.side-bar{position:fixed;width:27px;bottom:100px;left:10px;
}
.side-bar ul{}
.side-bar ul li{border:1px solid #f5f5f5;background-color:#fff;width:25px;height:25px;border-top:none;/*防止重复*/
}
.side-bar ul li.one{border-top:1px solid #f5f5f5;
}
.side-bar ul li a img{width:20px;height:20px;
}
.side-bar ul li a {display:block;width:20px;height:20px;
}
分栏
- 区分fieldset和frameset
- frameset是把浏览器窗口分成几个区域，每个区域分别放置一个html文档到对应的frame中，而且这个比例可以按住边栏进行调整
- col指定左右边栏的宽度
<frameset cols="25%,75%"><frame src="注册A.html" /><frame src="注册B.html" />
</frameset>
input各种类型
- 对于 type=“button” 的 < input> 元素，value 属性设置的是按钮上显示的文本。
-所有的单选按钮radio的 name 属性值相同，这意味着这些按钮是一个组，用户只能选择其中的一个。
<input type="button" value="alert" id="alerta" onclick="alert('我被点击啦！')">
<input type="button" value="confirm" id="confirma" onclick="confirm('确定要删除吗？')">
<input type="button" value="prompt" id="prompta" onclick="prompt('请输入用户名：')"><label for="pga"><input type="radio" name="fruit" value="pga" id="pga">苹果A</label>
<label for="jza"><input type="radio" name="fruit" value="jza" id="jza">橘子A</label>
<label for="xja"><input type="radio" name="fruit" value="xja" id="xja">香蕉A</label><p>
<!--name:value --><input type="checkbox" name="hobby" value="汽车" id="qcA">汽车A <input type="checkbox" name="hobby" value="购物" id="gwA">购物A
</p><input type="file" name="upfilea" />iframe
- a中的target对应iframe的name,表明这个链接在哪个iframe里加载
<a href="http://www.sina.com.cn" target="myframe1">新浪</a>
<a href="http://www.hao123.com" target="myframe1">hao123</a>
<a href="http://www.taobao.com" target="myframe2">淘宝</a>
<a href="http://www.baidu.com" target="myframe2">百度</a><br>
<iframe src="注册A.html" frameborder="1" height="500" width="48%" name="myframe1" id="idframe1" class="cframe"></iframe>
<iframe src="注册B.html" frameborder="1" height="500" width="48%" name="myframe2"></iframe>
表单
- 总结
- label 的 for 属性和 input 的 id 属性应该对应。
这样对应的作用是：当用户点击 < label> 时，浏览器会自动把焦点转到对应的 < input> 元素。 - input的name是指定表单提交时，在服务器端接收这个字段的数据时会使用这个名字。
- required=“”：这个属性意味着用户在提交表单之前，必须填写这个字段,如果没填写提交后会弹出提示tooltip
- button中的value 属性在实际提交表单时作为按钮的值传递给服务器。
button如果同时有name和value，则提交表单时，服务器会收到 name值=value值 的数据。
<form action=""><div id="zc"><fieldset><legend>注册用户</legend><p id="p1"><label for="user">账号</label><input type="text" name="user" id="user" placeholder="账号" required="" value=""> </p><p><label for="password">密码</label> <input type="password" name="password" id="password" placeholder="密码" value=""></p><p><button type="submit" value="注册">注册</button><button type="submit" name="action" value="register">注册</button><hr></p><p><a href="注册A.html" id="ZCA" target="_blank">注册A页面</a></p><p><a href="注册B.html" id="ZCB" target="_blank">注册B页面</a></p></fieldset> </div>
</form>
拖拽
<!--第1种-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽div</title>
<style type="text/css">div{position:absolute;width:150px;height:150px;background-color:red;}
</style>
<script type="text/javascript">
function drag(obj)
{if (typeof obj == "string") {var obj = document.getElementById(obj);obj.orig_index=obj.style.zIndex;///原始z-index}obj.onmousedown=function (e){//鼠标按下this.style.cursor="move";//设置鼠标样式this.style.zIndex=1000;//设置当前对象永远显示在最上层var d=document;if(!e) e=window.event;//按下时创建一个事件var x=e.clientX-document.body.scrollLeft-obj.offsetLeft;//x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距var y=a.clientY-document.body.scrollTop-obj.offsetTop;//y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距d.onmousemove=function(e){//鼠标移动if(!e) e=window.event;//移动时创建一个事件obj.style.left=e.clientX+document.body.scrollLeft-x;obj.style.top=e.clientY+document.body.scrollTop-y;}d.onmouseup=function (){//鼠标放开document.onmousemove=null;document.onmouseup = null;obj.style.cursor="normal";//设置放开的样式obj.style.zIndex=obj.orig_index;//回归原始z-index}}
}
</script>
</head>
<body>
<div id="div1" style="width:100px;height:100px;z-index:99"> </div>
<div id="div2" style="left:170px; background-color:blue; z-index:98"></div>
<script type="text/javascript">drag("div1");drag("div2");</script>
</body>
</html><!--第2种-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>拖拽实例</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>.box{width:100px;height:100px;background: red;position: absolute;top:0;}.left{left:0;}.right{right:0;}</style><script></script>
</head>
<body><div id="div1" class="box left">DIV1</div><div id="div2" class="box right">DIV2</div><script>//普通拖拽 -- 父类class Drag{constructor(id){this.oDiv = document.querySelector(id);this.disX = 0; this.disY = 0;this.init();}init(){this.oDiv.onmousedown = function(ev){this.disX = ev.clientX - this.oDiv.offsetLeft;this.disY = ev.clientY - this.oDiv.offsetTop;
//ev.clientX 是鼠标在页面上的水平位置
//this.oDiv.offsetLeft 是目标元素距离页面左边的距离
//通过相减就得到了鼠标点击点和元素左边缘之间的水平距离。document.onmousemove = this.fnMove.bind(this);document.onmouseup = this.fnUp.bind(this);return false;}.bind(this);}fnMove(ev){this.oDiv.style.left = ev.clientX - this.disX+'px';this.oDiv.style.top = ev.clientY - this.disY+'px';}fnUp(){document.onmousemove=null;document.onmouseup=null;}}//子类—— 限制范围class LimitDrag extends Drag{fnMove(ev){super.fnMove(ev);//限制范围if(this.oDiv.offsetLeft<=0){this.oDiv.style.left =0;}}}//调用new Drag('#div1');new LimitDrag('#div2');</script>
</body>
</html>
第二种封装更专业，但少考虑了滚动条的影响，比第一种多考虑了限制范围。