- 博客(36)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 块级元素与行内元素
html中元素可以按照分为两类，块级元素和内联元素（行级元素）。块级元素特点：前后换行。 默认空间宽度独占一行，高度是本身高度。 可以设置宽高。 块级元素可以嵌套行级元素。 块级元素也可以嵌套块级元素。 内容块级元素（尤其是h、p）不能嵌套布局块级元素。内联元素特点：不会换行。 默认占据空间是本身的高度宽度。 不能设置宽高（img除外） 只能嵌套行内元素，不能嵌套块级...
2019-01-02 16:53:32
696
转载 h5离线缓存技术
HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一...
2018-12-26 14:39:13
761
1
原创 JS数据类型值分类--基本类型和引用类型详解
ECMAscript变量包含两种数据类型的值，分别是：基本类型值、引用类型值.1.两种值类型与数据类型的关系基本类型：（亦做原始类型）简单的数据段。包含的数据类型有：Undefined、Null、Boolean、Number、String.引用类型：由多个值构成的对象。包含的数据类型有：Array 、 Object 、 function 、Date 、RegExp.2.两种数据值...
2018-11-24 18:29:44
1090
1
原创 数据兼容适配器--前后端JSON数组兼容适配器
项目中，通常会有前后端自定义数据的情况。前端在获取后端数据格式转化后，当两边的JSON对象中键名不一致时，需要先进行键名的兼容处理，才能进行数据渲染。上个栗子：转换前获取的数据： var demoJSON = [ {stu_name:"张三",stu_id:"1111",stu_no:"110&q
2018-11-23 12:37:15
634
原创 Axure导航栏移入移出显示隐藏下拉菜单——纪梵希官网导航栏动效
最近学习了一下网页原型制作。仿照纪梵希官网做的网页原型，其中导航栏涉及逻辑较复杂，打卡记录一下。首先，分析官网导航栏动效的需求：1.鼠标点击导航选项卡，跳转至对应的导航页面。2.鼠标移入导航选项卡时，出现对应的下拉菜单，选项卡下方显示选中状态。3.鼠标向上移出选项卡时，下拉菜单消失，选中状态消失。4.鼠标向下移入下拉菜单时，下拉菜单、选中状态依然显示。5.鼠标移出下拉菜单，...
2018-08-02 12:42:45
14868
5
原创 PS——图层
一张UI设计稿往往是由很多图层组成的。方便设计人员在图层里面，加入文本、图片等，也可以自由的修改、创新，良好的分层有助于设计更完美的展示及修改。（如下图）1.图层快捷键：F72.新建图层1).快捷键：Ctrl+Alt+Shift+N2).点击图层区域小图标3.图层命名双击图层名字区域，键入新名称4.颜色填充填充前景色：Alt+Delete填充背景色：Ct...
2018-08-01 17:10:52
511
原创 PS——选区工具组
PS中可以通过创建选区对图像进行填充、移动、复制、变换等编辑操作。在PS操作中，用选区选取范围是比较常用的方法。建立选区以后，就可以对选区内的图像进行操作。快捷键：M1.选区运算——布尔运算1).创建选区。选中选区工具后，可以创建图形。2).添加选区 快捷键：Shift 按住shift进行操作。3).减去区域 快捷键：Alt 按住Alt进...
2018-08-01 16:28:14
5257
原创 PS——移动工具
移动工具可以轻松的选择每一个图层，还可以移动各个图层到自己的理想位置，还可以进行文件图像与其他文件之间的移动。快捷键：V 移动工具属性1.自动选择在默认情况下，移动工具的“自动选择”一项是没有勾选的。表示只能选中图层窗口中选定的固定图层，不能随意的点击选择别的图层。在这里，我们也勾选“自动选择”，可任意选择图层。2.显示变换控件 ctrl+T如图所示，...
2018-07-26 10:02:14
2120
原创 PS文件的打开与关闭
一、文件常用打开方法1.文件菜单--新建（ctrl+O）。2.双击PS画面区域打开。3.直接拖动文件到PS当中。（可批量操作）4.直接双击打开PSD文件。二、文件的关闭点击文件窗口的关闭按钮即可...
2018-07-26 08:54:10
2727
原创 PS文件的存储
一、PS文件储存方法存储---ctrl+s 存储为---ctrl+shift+s 存储为Web所用格式---ctrl+shift+alt+s(注：保存为网页格式目的是输出展示在网页上的图片，创建网页使用的图像，保存的主要的目的之一是在维持图片质量的同时尽可能地缩小文件体积；其还可以保存GIF格式的动画文件。)二、PS常用的图像格式在Photoshop中，文件的保存格式有很多种，不同的...
2018-07-25 20:08:04
1969
原创 PS文件新建与配置
一、文件新建的方法1.文件菜单--新建2.快捷键：Ctrl+n二、设置文件名称三、预设若有经常使用的尺寸，可以直接设置好宽度和高度，点击存储预设；注：ctrl+alt+n 新建文件默认重复上次的文件尺寸大小；1、剪贴板有时会进行截图，截图的时候，我们所截的图像就是储存的剪贴板当中，复制图片后剪贴板可用，如果没有复制图片，剪贴板是灰色不可用的，如果...
2018-07-25 19:32:06
7563
转载 css和js引用图片的路径问题
参考：http://www.cnblogs.com/chyingp/archive/2010/08/21/1805515.htmlhtml页面中，引用js脚本和css文件的机制是不一样的。(1)对于js脚本，html是把脚本加载到页面中一起解析(就跟你的js脚本直接写在这...
2018-07-06 14:38:34
6407
原创 简洁风个人主页（3） js背景图片随机切换
静态页面做完了，现在用js做一个背景图片随机切换的效果。1.点击‘个人网站'这个字样，实现body背景的切换。所以，首先获取这两个节点。var body = document.body;var change_btn = document.getElementById("change_btn");2.添加change_btn的onclick点击事件，在点击事件中 写获取随机图片...
2018-07-06 11:35:31
3279
6
原创 简洁风个人主页（2） css样式设置
时间太久，差点忘记跟新了。静态页面完成之后，用css设置样式。样式主要分为两大块——背景图设置、中间半透明标签。1.背景图设置。背景图片的设置，主要是将图片能够铺满整个屏幕。并且后期实现图片切换的效果，将图片路径写在background:url()内。body{ background:url(../img/images/8.jpg); background-size:100...
2018-07-06 10:40:33
7993
1
原创 运用frame、frameset框架不显示问题
今天偶然用了一次frame\frameset框架标签，作为不常用标签，果然出问题了。 写了一个简单的测试demo，给大家分享一下出错的地方。 在默认页面中嵌入了三个frame，在浏览器跑起来，结果，页面一片空白。右键检查，发现在body中没有任何内容，页面元素的高度也空0。 将页面的body标签删除后，页面就正常了。...
2018-03-15 15:12:22
9653
原创 将网页部署到服务器上
当我们做了一写漂亮的页面时，可以将它部署到自己的服务器上，方便用域名来进行访问。 大三了，快要准备出去面试工作，于是做了一个的简历，现在将其放在自己的服务器上。下面，我分步骤给大家分享一下部署过程，如有不正确或者更简易的方式，请指正或者提出好的建议｡◕‿◕｡，谢谢！ 1.远程登陆到自己的服务器，进入到存放网页的根目录。我用的是阿里云服务器Ubunt...
2018-03-12 20:41:32
85418
9
原创 页面出现横线滑动条的原因
1.使用bootstrap栅格布局的时候，bootstap.css中row默认有margin-left和margin-right值分别为15px。忽略容易造成横向内容溢出。 （更新中…）
2017-12-12 15:52:11
2005
原创 多种去除inline-block元素之间的间隙解决方法详解
导航一般使用a标签，a标签的默认属性为inline。在需要设置其width、height时，经常为导航的a标签设置inline-block属性，满足导航元素样式为一行排列。其实，在每个导航a标签还存在一个小小的间隙，在没有设置元素margin的情况下，设置一下a标签背景颜色，来个反差即可看到： 先来个html结构： <body> <div class="daohang">
2017-12-07 11:28:08
2088
原创 XMLHttpRequest对象的基本使用
页面不跳转时，加载页面需要手动向服务器发送数据，此时就需要在我们的页面里面人为设置：请求行，请求头，请求主体。在设置这些请求格式时，需要依托于一个对象————异步对象。1.首先创建异步对象： //创建对象 var xhr = new XMLHttpRequest();2.设置请求行：//设置请求行 xhr.open('post','postData.php');参数1：提交数据的方
2017-12-05 11:29:12
273
原创 mui下a标签href失效问题，以及a标签的其他小坑。
最近做手机端引用了mui框架，结果初次使用就被a标签坑了一把。a标签不能正确的跳转页面。 原因是mui相关的一些控件是通过拦截a标签上的href来实现的，所以mui.js会阻止a标签上的href跳转，因此需使用JS对标签添加事件监听。 解决方式是添加如下js代码： mui('body').on('tap','a',function(){ window.top.location
2017-12-04 20:08:33
2880
原创 简易日历 （innerHTML和行间提取事件的练习）
简易日历，鼠标移入月份实现当前月份style改变，对应文字改变显示. 总结几个小点： 1.每个月份对应的文字用数组来装，（数据量大，用div的显示和隐藏不现实）； 2.用循环的方式为每个月份添加onmouseover事件； 3.用js的方式给月份添加索引，利于对应月的文字选择（若用html自定义属性添加会被FF过滤掉）； 4.innerHTML不仅可以读写文
2017-11-14 11:55:43
478
原创 Js 实现一组checkBox全选、不选、反选功能
网页上的快捷按钮，可以实现一组checkbox的全选、不选、反选效果。那么这个效果是怎么实现的呢。下面就上代码看看吧！ 1.首先创建一个简易的包含按妞和复选框的HTML页面：<body> <input id="btn1" type="button" value="全选" /> <input id="btn2" type="button"
2017-11-13 22:16:23
941
原创 Linux下创建目录、用户，并限制对应用户权限
在Linux下创建目录、用户，并且限制不同用户的所属权限。直接来案例。案例描述如下： ——————————————————————————————————— 一． 在目录/root中 创建如下4个目录: 1. Computer; 2. DigitArt; 3.InfoManagement; 4. AppEnglish. 二． 新建8个用户， teacher_c(计科系老师)
2017-10-23 22:54:20
8240
原创 焦点轮播图（8）移动端焦点轮播图 --完整代码 （bootstrap框架版本）
之前写的焦点轮播图只适用于PC端，在手机上会出现窗口不适配问题。由于涉及的固定宽高较多，所以百分比适配的方案就舍弃了。现在上新一个2.0版本，可以让轮播图在移动端能根据屏幕大小有适当的显示。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=
2017-10-10 11:23:00
1029
原创 焦点轮播图（7）原生JS实现焦点轮播图--完整代码
轮播图终于更完了，附上完整代码： <html> <head> <meta charset="utf-8" /> <title>焦点轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration
2017-10-07 17:13:40
6625
2
原创 焦点轮播图（6） 自动播放
点击事情完成了，现在来实现自动切换的功能！原理很简单———定时器，相当于隔一段时间就调用一下点击右箭头事件！首先全局定义一个定时器timer。 再分别给出自动切换函数和自动切换停止函数。老规矩，上代码：function play(){//自动切换函数 timer = setInterval(function(){
2017-10-07 17:04:49
719
原创 焦点轮播图（5） 动画函数
目前的效果在切换图片时，left值是直接改变。从第1张图到第2张图left直接从-600变为-1200。现在需要把图片切换设置成动画的效果，使图片的切换更加流畅。首先在change函数中设置一下一种图片在切换时：位移总时间，位移时间间隔，位移次数：var time = 300;//位移总时间（ms） var interval = 10;//位移间隔时间
2017-10-07 16:43:06
424
原创 焦点轮播图（4） 按钮切换
之前实现了箭头切换，现在来添加按钮切换。在点击按钮时，直接切换到对应的图片。下面来为小圆点按钮添加点击事件：//为小圆点添加点击事件 for(var i =0; i <buttons.length; i++){ buttons[i].onclick = function(){ //
2017-10-07 15:42:05
741
原创 焦点轮播图（3） 无限滚动
本篇实现图片的无限滚动效果。 因为图片改变是left值改变来控制的，所以，要实现无限滚动的效果就需要left值也在值段范围内无限滚动改变。向左滑动图片时，当left < -3000，left归位到第一张图 -600； 向右滑动图片时，当left > -600，left归位到最后一张图-3600；在change函数里面添加判断归位语句（对此函数稍作优化）：function change(offse
2017-10-07 15:21:57
530
原创 焦点轮播图（2） js箭头切换
完成了静态布局，开始用JS实现动态效果了。 先用JS实现前后箭头切换图片的功能。首先在页面加载完成时通过id号来获取元素。window.onload = function (){ var container = document.getElementById('container'); var list = document.getE
2017-10-07 11:06:28
1706
原创 焦点轮播图（1） 静态布局
今天系统的学习了一下轮播图。又来打卡记录啦！ 轮播图的要素主要有：图片，焦点小图标，前后播放按键。布局完成后的效果如图： 下面就上静态布局的代码：<body> <div id = "container"> <div id = "list" style = "left:-3000px;"> <img src="img/5
2017-10-06 21:02:06
1119
原创 简洁风个人主页（1） html 静态布局
最近做了一个简洁风个人网站主页，和大家分享一下。界面如图，（换了两张背景图片）： 一、界面：背景为一组自定义图片，中间一个透明标签，标签内包含header，content，footer三部分；二、基础功能：点击header部分“个人网站”链接可以随机切换背景图片； 点击content部分“CSDN博客日志(blog)”链接跳转至我的csdn博客主页；“more”是一个按钮链接，据个人情
2017-10-01 10:50:03
31434
2
原创 html+css+js 简易展开收起效果
用html+css+js做一个简易的文本展开收起效果。如图： （部分结构标签可能不是最佳选择，此次仅以实现展开收起效果为例子） 以HBuilder编辑器选项卡中“查找”选项为例。设定“查找”为链接，点击链接实现标签的展开收起效果。1.html部分①.首先确定该选项的构成：一个显示标签和一组隐藏选项。html的整体结构框架为：<div id="showdiv"> <a i
2017-09-29 20:21:53
14082
原创 CSS选择器详解1——常用选择器
CSS选择器，实现对HTML页面元素的选择控制，为元素精确添加CSS样式。选择器种类有很多，将其比较分类有利于对选择器进行系统的掌握。每个人都有不同的分类方法，我根据选择器的功能特点及其分支大致将其归为四大类——常用选择器、属性选择器、后代选择器、伪类选择器。此文中，只对常用选择器进行归类整理。 （元素用字母“E”表示；属性用字母“A”表示；class表示类名；id表示id名）1.通配选择器 语
2017-05-24 23:07:09
373
原创 web常用的三种图像格式
网页中所用的三种图片格式分别是JPEG、PNG、GIF。不同的图片需要选择不同的存储格式，这样能够避免由于图片格式错误而造成页面性能降低。已经有很多大牛详细的整理过三种图片格式的内容了，现在仅对三种web图片存储格式做一个简单归纳如下：一、JPEG适用于：照片和复杂图像使用特点： 1.适合连续色调图像，如照片。 2.可以表示包含多达1600万
2017-05-14 19:48:32
14502
前后端JSON数组键名兼容适配器
2018-11-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人