UI设计
文章平均质量分 58
@航空母舰
这个作者很懒,什么都没留下…
展开
-
jquery实现页面等待时的交互效果
前端在请求后台有时候需要较长的一段时间,如果不给不用户一些提示性的消息,如正在加载之类的,用户可能会以为页面已死,所以还是得简单的做点交互才行。思路详解:在页面加载前就先加载一个div罩,等待页面全部加载完成后,关闭此div罩.spinner { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s inf原创 2021-07-18 21:06:34 · 694 阅读 · 0 评论 -
移动端适配方案
问题:当前市场上手机屏幕宽度不尽相同,常见有320px(ipone5)、375px(ipone678)等等,而为了在不同宽度的手机屏幕上良好现显示网页,我们需要解决方案。原理:当前前端解决手机屏幕自适应的手段极多,究其原理,主要分为两大版块: 一、使用百分比长度单位,当前百分比长度单位一般如下:vw、vh、vm、em、rem、%,优点:一套css代码即可适应所有屏幕宽度不同的手机; 二、使用固定长度单位px,再使用js根据当前屏幕宽度与固定宽度计算比例,进行网页缩放。优点:网页宽度恒定,便于原创 2020-11-04 16:16:31 · 660 阅读 · 0 评论 -
css 中计算图片占屏幕高度的百分之几 缩放不变形
vwcss3新单位,view width的简写,是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。vhcss3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。vmcss3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分.原创 2020-09-17 22:45:27 · 1029 阅读 · 0 评论 -
一张图片多个链接 锚点
img中的usemap属性:usemap里将图像定义为客户器端图像映射。area将图片分割为不同区域:area标签的shape属性的值rect为矩形,矩形的coords属性值有四个,分别是选取矩形图片定位的值,前两个表示左上角的定位值,后两个表示右下角的定位置;(多边形可以继续增加坐标) area标签的shape属性的值circle为圆形,圆形coords属性值有三个,前两个表示选取圆形图片的中心定位的值,第三个值表示半径<!DOCTYPE html><html>..原创 2020-07-07 10:13:52 · 1702 阅读 · 1 评论 -
CSS 定位position
这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。 一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。块级元素特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。 2.元素的高度、宽度、行高和顶底边距都是可以设置的。原创 2018-09-27 11:50:51 · 86 阅读 · 0 评论 -
利用@media screen实现网页布局的自适应
原创 2018-09-26 15:22:12 · 156 阅读 · 0 评论 -
CSS控制背景图片自适应填充布局
背景图片的宽*高:400*200,要设置放背景的容器的宽高是图片宽高的等比例自适应填充才不变形。比如200*100,300*150等写法1li.active a{ background-image:url(/statics/images/game_bg.png); background-repeat:no-repeat; background-size:100% 100%;-moz-b...原创 2018-09-21 20:20:34 · 1921 阅读 · 0 评论 -
CSS 怎么设置底部居中对齐
html结构<div class="msg_box"> <div class="msg_btn_box"> </div></div>1.先将容器的position设为relative;2.然后将这个div的的样式添加position:absolute; bottom:0;.msg_btn_box {positio...原创 2018-09-13 11:37:17 · 11513 阅读 · 1 评论 -
CSS 控制 input 只显示下划线效果
原创 2018-09-11 12:53:31 · 1503 阅读 · 0 评论 -
CSS3 实现根据ul中li的个数设置li的宽度
在项目中遇到ul中的li数量不定,但是还要给ul设置圆角和阴影,而ul默认的宽度是100%,上网查到一个简单的方法就是在ul中加属性ul{ width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: auto;}li{float:left}如果对浏览器要求不高,这种方法就可以实现了first-childfirst-child表示选择列表中的第一个标签nth-..原创 2018-09-27 15:20:07 · 1903 阅读 · 0 评论 -
CSS 使用图片作为4个角边框
lt;/div> <div class="bottom-left"></div> <div class="bottom-right"></div></div><style> .box { width: 200px;原创 2018-09-27 19:56:45 · 2110 阅读 · 0 评论 -
遮罩层屏幕居中(水平垂直居中)
width: 300px; height: 200px; background: transparent; background: rgba(0, 0, 0, 0.8); border-radius: 12px; position: fixed; margin: auto; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999;}&a原创 2018-10-09 23:33:26 · 996 阅读 · 0 评论 -
带分类功能的列表页设计
原创 2019-06-14 13:53:30 · 396 阅读 · 0 评论 -
图片自适应屏幕大小的css写法
如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入img {height: auto; width: auto\9; width:100%;}用max-width设置如果图片尺寸大于当前浏览器尺寸就自动缩放, 图片的高度设置正比缩放, 但是ie8有个比较二的bug就是不支持max-width属性, 而ie7和ie9都支持.height:auto,相关元素的高度取决于浏览器...原创 2019-09-04 10:00:39 · 10674 阅读 · 0 评论 -
css 头像边框
css<style> .head-img {width: 66px;height: 66px;background-color: #fff;padding: 3px;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);margin: 0 auto 10px;box-sizing: border-box;border-radius: 50%;}...原创 2020-01-17 09:27:36 · 2580 阅读 · 0 评论 -
电商原价删除线
原创 2018-06-07 10:12:42 · 408 阅读 · 0 评论 -
js 热键提交表单
检测到了'); }}</script>回车禁止提交功能(ie9,firefox,ie8,chrome测试通过)html<input type="text" name="checkcode" onkeypress="return doClick(event);"/>//铵enter键,阻止提交订单function doClick(event) {原创 2010-09-02 15:20:53 · 83 阅读 · 0 评论 -
图片轮换 滚动
原创 2010-09-29 23:49:25 · 164 阅读 · 0 评论 -
导航菜单 JSUI
htmlhttp://www.dynamicdrive.com/dynamicindex1/slashdot.htm sdmenuSliding Panels For jQuery -元素可以展开或关闭,创建出手风琴的滑动效果。Sortables - 一个简单强大的拖拽插件。A Navigation Menu - 锚链接的无序列表嵌套, 可以添加2级菜单jQuery UI Tabs / Tabs 3 – 基于 jQuery 的一个Tab选项卡导航Simple JQuery Accordion原创 2010-09-30 00:18:34 · 116 阅读 · 0 评论 -
checkbox三种状态
原创 2010-09-30 09:40:31 · 117 阅读 · 0 评论 -
input image和img button区别
原创 2010-10-08 23:44:36 · 135 阅读 · 0 评论 -
后退时保存表单状态
NAME="save" CONTENT="history"><form method=post action=sss><input style="behavior:url(#default#savehistory)" type=text><input type=submit></from> TEXTARE原创 2010-10-21 14:16:40 · 288 阅读 · 0 评论 -
form表单target的用法 替代window.open
lt;input type="submit" value="Submit" /></form><form target="value">属性值值 描述_blank 在新窗口中打开。_self 默认。在相同的框架中打开。_parent 在父框架集中打开。_top 在整个窗口中打开。framename 在指定的框架中打开。为了实现当前页2010-12-01 15:51:26 · 213 阅读 · 0 评论 -
css学习
ne; //清除链接的下划线 white-space: nowrap //文本不换行}.menucxcw:hover { //鼠标放上去时,显示下面的亮丽按钮 background-position:left 20px; //左填充,垂直20px} <td style="border-bottom:1px dashed #CCCCCC;">本线条可显示上下左右虚线条.1px线条数值大小,可更改,最小为1,sol原创 2011-01-28 16:57:37 · 118 阅读 · 0 评论 -
CSS的十八般技巧
原创 2011-06-17 10:58:15 · 90 阅读 · 0 评论 -
网站后台模版
原创 2011-07-05 13:44:03 · 86 阅读 · 0 评论 -
用好href的target, base href
a>代表http://ent.sina.com.cn/aaa.html 这个标签的用处是解决编程时候的相对路径问题 ,你可以把它生成相对路径,如<a href="sdsd/dsd.html">sddsds</a>,只要在head部分加上<base href=http://localhost/abc/>即可。注意<a href="/ sdsd/dsd.html&原创 2011-07-06 10:29:39 · 121 阅读 · 0 评论 -
多按钮共存——don’t make me think
原创 2011-09-21 17:28:24 · 84 阅读 · 0 评论 -
404 img标签usemap,一个图片中添加多个链接
" usemap="#Map" alt="HTTP 404,file not found" border="0" height="422" width="450"> <map name="Map" id="Map"> <area shape="rect原创 2011-09-29 11:15:57 · 132 阅读 · 0 评论 -
html 锚点的使用
原创 2011-10-08 10:30:48 · 83 阅读 · 0 评论 -
文本域(textarea)设计妙用
主要做一次性批量数据,维护方便。1 后台下拉框列表显示点击编辑后:注意数据维护(方便批量维护,分行入库存储)/** * 去除空,去重,去多余的换行 * @param $input * @return array */public function filterTextString($input){ $result = []; if ($input) { //去除空 $valArr = array_map("trim", exp..原创 2014-12-04 11:01:07 · 248 阅读 · 0 评论