凡科网站备案,在线网页制作系统小彬,手机网站菜单,信用网站标准化建设模块都有哪些长期补充#xff0c;建议关注收藏点赞。 目录 a标签设置不一样的花样#xff08;图片但不用img)侧边固定box分栏input各种类型iframe表单拖拽 a标签设置不一样的花样#xff08;图片但不用img)
a标签里面不用嵌套img#xff0c;直接设置为其bg-img即可
!DOCTYPE html…长期补充建议关注收藏点赞。 目录 a标签设置不一样的花样图片但不用img)侧边固定box分栏input各种类型iframe表单拖拽 a标签设置不一样的花样图片但不用img)
a标签里面不用嵌套img直接设置为其bg-img即可
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea {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
bodya href# classone五彩导航/aa href# classtwo五彩导航/aa href# classthree五彩导航/aa href# classfour五彩导航/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和framesetframeset是把浏览器窗口分成几个区域每个区域分别放置一个html文档到对应的frame中而且这个比例可以按住边栏进行调整col指定左右边栏的宽度
frameset cols25%,75%frame src注册A.html /frame src注册B.html /
/framesetinput各种类型
对于 type“button” 的 input 元素value 属性设置的是按钮上显示的文本。 -所有的单选按钮radio的 name 属性值相同这意味着这些按钮是一个组用户只能选择其中的一个。
input typebutton valuealert idalerta onclickalert(我被点击啦)
input typebutton valueconfirm idconfirma onclickconfirm(确定要删除吗)
input typebutton valueprompt idprompta onclickprompt(请输入用户名)label forpgainput typeradio namefruit valuepga idpga苹果A/label
label forjzainput typeradio namefruit valuejza idjza橘子A/label
label forxjainput typeradio namefruit valuexja idxja香蕉A/labelp
!--name:value --input typecheckbox namehobby value汽车 idqcA汽车A input typecheckbox namehobby value购物 idgwA购物A
/pinput typefile nameupfilea /
iframe
a中的target对应iframe的name,表明这个链接在哪个iframe里加载
a hrefhttp://www.sina.com.cn targetmyframe1新浪/a
a hrefhttp://www.hao123.com targetmyframe1hao123/a
a hrefhttp://www.taobao.com targetmyframe2淘宝/a
a hrefhttp://www.baidu.com targetmyframe2百度/abr
iframe src注册A.html frameborder1 height500 width48% namemyframe1 ididframe1 classcframe/iframe
iframe src注册B.html frameborder1 height500 width48% namemyframe2/iframe 表单
总结
label 的 for 属性和 input 的 id 属性应该对应。 这样对应的作用是当用户点击 label 时浏览器会自动把焦点转到对应的 input 元素。input的name是指定表单提交时在服务器端接收这个字段的数据时会使用这个名字。required“”这个属性意味着用户在提交表单之前必须填写这个字段,如果没填写提交后会弹出提示tooltipbutton中的value 属性在实际提交表单时作为按钮的值传递给服务器。 button如果同时有name和value则提交表单时服务器会收到 name值value值 的数据。
form actiondiv idzcfieldsetlegend注册用户/legendp idp1label foruser账号/labelinput typetext nameuser iduser placeholder账号 required value /pplabel forpassword密码/label input typepassword namepassword idpassword placeholder密码 value/ppbutton typesubmit value注册注册/buttonbutton typesubmit nameaction valueregister注册/buttonhr/ppa href注册A.html idZCA target_blank注册A页面/a/ppa href注册B.html idZCB target_blank注册B页面/a/p/fieldset /div
/form拖拽
!--第1种--
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title拖拽div/title
style typetext/cssdiv{position:absolute;width:150px;height:150px;background-color:red;}
/style
script typetext/javascript
function drag(obj)
{if (typeof obj string) {var obj document.getElementById(obj);obj.orig_indexobj.style.zIndex;///原始z-index}obj.onmousedownfunction (e){//鼠标按下this.style.cursormove;//设置鼠标样式this.style.zIndex1000;//设置当前对象永远显示在最上层var ddocument;if(!e) ewindow.event;//按下时创建一个事件var xe.clientX-document.body.scrollLeft-obj.offsetLeft;//x鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距var ya.clientY-document.body.scrollTop-obj.offsetTop;//y鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距d.onmousemovefunction(e){//鼠标移动if(!e) ewindow.event;//移动时创建一个事件obj.style.lefte.clientXdocument.body.scrollLeft-x;obj.style.tope.clientYdocument.body.scrollTop-y;}d.onmouseupfunction (){//鼠标放开document.onmousemovenull;document.onmouseup null;obj.style.cursornormal;//设置放开的样式obj.style.zIndexobj.orig_index;//回归原始z-index}}
}
/script
/head
body
div iddiv1 stylewidth:100px;height:100px;z-index:99 /div
div iddiv2 styleleft:170px; background-color:blue; z-index:98/div
script typetext/javascriptdrag(div1);drag(div2);/script
/body
/html!--第2种--
!DOCTYPE html
html
headmeta charsetutf-8 /meta http-equivX-UA-Compatible contentIEedgetitle拖拽实例/titlemeta nameviewport contentwidthdevice-width, initial-scale1style.box{width:100px;height:100px;background: red;position: absolute;top:0;}.left{left:0;}.right{right:0;}/stylescript/script
/head
bodydiv iddiv1 classbox leftDIV1/divdiv iddiv2 classbox rightDIV2/divscript//普通拖拽 -- 父类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.disXpx;this.oDiv.style.top ev.clientY - this.disYpx;}fnUp(){document.onmousemovenull;document.onmouseupnull;}}//子类—— 限制范围class LimitDrag extends Drag{fnMove(ev){super.fnMove(ev);//限制范围if(this.oDiv.offsetLeft0){this.oDiv.style.left 0;}}}//调用new Drag(#div1);new LimitDrag(#div2);/script
/body
/html第二种封装更专业但少考虑了滚动条的影响比第一种多考虑了限制范围。
