我有域名跟空间能教我做网站吗,盐城网站设计,网站加百度地图,泉州百度seo公司前端布局与交互实现技巧
1. 保持盒子在中间位置
在网页设计中#xff0c;经常需要将某个元素居中显示。以下是一种常见的实现方式#xff1a;
HTML 结构
!doctype html
html langen
headmeta charsetUTF-8m…
前端布局与交互实现技巧
1. 保持盒子在中间位置
在网页设计中经常需要将某个元素居中显示。以下是一种常见的实现方式
HTML 结构
!doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle居中盒子/titlelink relstylesheet href./css/login.css
/head
bodydiv classheaddiv classmain/div/div
/body
/html
CSS 样式
html, body {height: 100%;
}.head {width: 100%;height: 100%;background-color: pink;
}.head .main {position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 300px;height: 200px;margin: auto;background-color: #fff;border-radius: 10px;
}
实现原理 使用 position: absolute 将盒子定位为绝对定位。 设置 left, top, right, bottom 都为 0使盒子撑满父容器。 通过 margin: auto 实现居中效果。 2. 鼠标经过显示多选项
在导航栏中常常需要实现鼠标经过时显示下拉菜单的效果。
HTML 结构
ul classleft flli classpulla href#移动客户端/aul classpull-ullia href#新浪微博/a/lilia href#新浪微博/a/lilia href#新浪微博/a/lilia href#新浪微博/a/lilia href#新浪微博/a/lilia href#新浪微博/a/li/ul/li
/ul
CSS 样式
.pull {position: relative;
}.pull-ul {position: absolute;display: none;
}.pull:hover .pull-ul {display: block;
}
实现原理 父元素 pull 使用相对定位子元素 pull-ul 使用绝对定位。 默认情况下pull-ul 隐藏当鼠标经过 pull 时显示 pull-ul。 3. 两栏布局数据单
两栏布局是常见的网页布局方式通常用于侧边栏和内容区域的划分。
HTML 结构
!doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle两栏布局/titlelink relstylesheet href./css/t_index.css
/head
bodydiv classmaindiv classhead/divdiv classcontainerdiv classleft/divdiv classright123455/div/div/div
/body
/html
CSS 样式
* {margin: 0;padding: 0;
}html, body {height: 100%;
}.main {height: 100%;background-color: pink;
}.main .head {height: 10%;background-color: purple;
}.main .container {height: 90%;background-color: aquamarine;
}.main .container .left {float: left;width: 200px;height: 100%;background-color: bisque;
}.main .container .right {padding-left: 200px;height: 100%;background-color: blue;
}
实现原理 左侧栏使用浮动布局右侧栏通过 padding-left 留出左侧栏的宽度。 确保页面放大时不会留有空隙。 4. 三栏布局——普通
三栏布局是网页设计中常见的布局方式通常用于左右侧边栏和中间内容区域的划分。
HTML 结构
!doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle三栏布局/titlelink relstylesheet href./css/r_index_1.css
/head
bodydiv classmaindiv classleft/divdiv classcontainer/divdiv classright/div/div
/body
/html
CSS 样式
* {margin: 0;padding: 0;
}html, body {height: 100%;
}.main {height: 100%;background-color: aqua;
}.main .left,
.main .right {position: absolute;top: 0;width: 200px;height: 100%;background-color: red;
}.left {left: 0;
}
.right {right: 0;
}
.main .container {padding: 0 200px;height: 100%;background-color: aquamarine;
}
实现原理 左右栏使用绝对定位中间栏通过 padding 留出左右栏的宽度。 5. 三栏布局——圣杯布局
圣杯布局是一种经典的三栏布局方式中间栏优先渲染。
HTML 结构
!doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle圣杯布局/titlelink relstylesheet href./css/r_index_2.css
/head
bodydiv classmaindiv classcontainer121121414/divdiv classleft/divdiv classright/div/div
/body
/html
CSS 样式
* {margin: 0;padding: 0;
}html, body {height: 100%;
}.main {height: 100%;margin: 0 200px;
}.main .container {float: left;width: 100%;height: 100%;background-color: purple;
}.main .left {float: left;height: 100%;width: 200px;background-color: bisque;margin-left: -100%;position: relative;left: -200px;
}.main .right {float: left;height: 100%;width: 200px;background-color: blue;margin-left: -200px;position: relative;right: -200px;
}
实现原理 中间栏优先渲染左右栏通过负边距和相对定位实现布局。 6. 三栏布局——双飞翼布局
双飞翼布局是圣杯布局的改进版通过增加一个内部容器来实现布局。
HTML 结构
!doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle双飞翼布局/titlelink relstylesheet href./css/r_index_3.css
/head
bodydiv classmaindiv classcontainerdiv classconf1123114/div/divdiv classleft/divdiv classright/div/div
/body
/html
CSS 样式
* {margin: 0;padding: 0;
}html, body {height: 100%;
}.main {height: 100%;background-color: antiquewhite;
}.main .container {float: left;width: 100%;height: 100%;background-color: aqua;
}.main .container .conf {margin-left: 200px;margin-right: 200px;
}.main .left {float: left;width: 200px;height: 100%;background-color: aquamarine;margin-left: -100%;
}.main .right {float: left;width: 200px;height: 100%;background-color: blue;margin-left: -200px;
}
实现原理 中间栏通过内部容器的 margin 留出左右栏的宽度。 7. 拖动的模态框
模态框是网页中常见的交互组件以下是一个可拖动的模态框实现。
JavaScript 实现
var loginEle document.querySelector(#login)
var mask document.querySelector(.login-bg)
var linkEle document.querySelector(#link)
var closeBtn document.querySelector(#closeBtn)
var title document.querySelector(#title)// 1. 点击弹出层显示模态框和遮罩层
linkEle.addEventListener(click, function () {loginEle.style.display blockmask.style.display block
})// 2. 点击关闭按钮关闭模态框和遮罩层
closeBtn.addEventListener(click, function () {loginEle.style.display nonemask.style.display none
})// 3. 实现模态框拖动
title.addEventListener(mousedown, function (e) {var x e.pageX - loginEle.offsetLeftvar y e.pageY - loginEle.offsetTopdocument.addEventListener(mousemove, move)function move(e) {loginEle.style.left e.pageX - x pxloginEle.style.top e.pageY - y px}document.addEventListener(mouseup, function () {document.removeEventListener(mousemove, move)})
})
实现原理 通过 mousedown, mousemove, mouseup 事件实现模态框的拖动。 计算鼠标在模态框内的坐标动态设置模态框的位置。 8. jQuery 实现五角星评分
五角星评分是常见的用户交互组件以下是一个简单的实现。
HTML 结构
ul classcommentli☆/lili☆/lili☆/lili☆/lili☆/li
/ul
JavaScript 实现
$(function () {var wjx_none ☆var wjx_sel ★// 鼠标经过时当前和之前的星星变为实心$(.comment li).on(mouseenter, function () {$(this).text(wjx_sel).prevAll(li).text(wjx_sel).end().nextAll(li).text(wjx_none)})// 鼠标离开时根据是否有选中状态决定星星样式$(.comment li).on(mouseleave, function () {if ($(li.current).length 0) {$(.comment li).text(wjx_none)} else {$(li.current).text(wjx_sel).prevAll(li).text(wjx_sel).end().nextAll(li).text(wjx_none)}})// 点击时设置当前星星为选中状态$(.comment li).on(click, function () {$(this).attr(class, current).siblings(li).removeAttr(class)})
})
实现原理 通过 mouseenter, mouseleave, click 事件实现五角星的动态效果。 使用 current 类记录用户选择的星星。 以上是一些常见的前端布局和交互实现技巧希望对您的开发工作有所帮助
