2018年03月_Harriet嘉

转载使用git将项目上传到github

首先你需要一个github账号，所有还没有的话先去注册吧！https://github.com/我们使用git需要先安装git工具，这里给出下载地址，下载后一路直接安装即可：https://git-for-windows.github.io/1.进入Github首页，点击New repository新建一个项目 2.填写相应信息后点击create即可 Repository name: 仓库名称De...

2018-03-31 17:48:45 163

转载 bootstrap——滚动监听组件

其实滚动监听使用的情况还是很多的，比如导航居于右侧，当主题内容滚动某一块的时候，右侧导航对应的要高亮。实现功能1、当滚动区域内设置的hashkey距离顶点到有效位置时，就关联设置其导航上的指定项2、导航必须是 .nav > li > a 结构，并且a上href或data-target要绑定hashkey3、菜单上必须有.nav样式4、滚动区域的data-target与导航父级Id（一定...

2018-03-31 15:57:59 612

转载响应式布局——媒体查询media参数以及其兼容性问题

一、设置meta标签在使用媒体查询media之前我们需要先设置meta标签，对设备的缩放等参数进行设定。 <meta name="viewport" content="width=device-width, initial-scale=1,minmum-scale=1,maxmum-scale=1,user-scalable=no"> 参数...

2018-03-31 15:42:19 1538

转载 bootstrap——组件navbar

一、简介Navbar 指导航条，它在移动设备上显示为折叠状态，在宽屏幕上水平展开。这里是一个线上例子。{提示} 响应式导航条依赖 collapse 插件，定制 Bootstrap 时务必要包含。{设备的可访问性}务必使用 <nav> 元素；如果使用 <div> 元素，需要设置属性 role="navigation"。这样能让辅助设备道这是一个导航条。一个典型导航条的结构如...

2018-03-24 23:16:34 591

原创 bootstrap——data-toggle、data-target、collapse

向元素中添加 role="navigation"，有助于增加可访问性。向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。为了给导航栏添加响应式特性，要折叠的内容必须包裹在带有 class .collapse（折叠）、.navbar-collapse 的...

2018-03-24 22:31:42 4168

原创清除浮动的4种方法

.container{ background-color: #ccc; } p{ font-size: 1rem; margin-top : 1rem; }<div class="container"> <h3>Test</h3&gt...

2018-03-23 23:28:10 225

转载 Sublime Text3快捷键大全

选择类Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。Ctrl+Shift...

2018-03-22 22:40:52 815

转载 Windows不能在本地计算机启动Apache2

可能情况一：安装Apache2的路径中不能含有中文. 可能情况二：重启Apache就会弹出出错提示框,提示"The requested operation has failed!" 然后打开服务,启动Apache2,就提示我:"Windows不能在本地计算机启动Apache2.......并参考特定服务错误代码1"解决：主要是在Apache的安装目录下的\conf\httpd.conf,修改htt...

2018-03-22 16:12:20 540

原创响应式网站-弹性图片

实现响应式图片有一下几种方法：1、js或者服务端2、secset3、srcset配合sizes4、picture5、svg1、首先来看一下js的演示代码$(document).ready(function(){ function makeImageResponsive(){ var width = $(window).width(); var img = $...

2018-03-22 15:18:13 1336

原创响应式布局之 DPR (Device Pixel Ratio)

最近在了解响应式布局：flexible grid layout（弹性网格布局），flexible image（弹性图片），media queries（媒体查询）。在看到DPR这个词的时候就有点懵逼了，于是找度娘：实际上像素分为两种：设备像素和CSS像素　　1、设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的　　2、CSS像素(...

2018-03-21 23:01:02 1192

转载 CSS布局基础——BFC

BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。看一大堆文字可能有点抽象，现在拿个js函数来比喻说明一下吧，我们现在有一个叫做bfc的函数，而一个函数就是一个块级作用域，这里面所有的变量申明、运行都在这个块级作用域内进行。理所当然，一个环境中的变量不会影...

2018-03-20 23:12:31 144

转载 css元素隐藏原理及display:none和visibility:hidden

一、CSS元素隐藏在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。一个一个看。 { display: none; /* 不占据空间，无法点击 */ } /********************************************************************************...

2018-03-20 22:47:27 322

原创命名规范

全名原则变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型尽量避免使用没有意义的命名禁止使用JavaScript关键词、保留字全名变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法匈牙利命名法匈牙利命名法匈牙利命名法是电脑程序设计中的一种变量命名规则，此命...

2018-03-14 22:32:19 188

原创 JS基础——DOM

一、DOM 作用： Dom (Document Object Model) 1、document 文档 HTML XML文件 (标记语言) <body> <div> <a>www</a> </div> </body> 2、Object对象(HTML元素转成的对象(js对象)) 注意：如果使用...

2018-03-14 22:30:37 137

原创 JS基础——BOM

BOM浏览器对象一、浏览器本身自己就有一些对象，不用创建就可以使用window：当前浏览器窗体的属性： status 状态栏 opener 在子窗体中代表父窗体的对象 closed parent top 方法： alert( ); confirm( ); 弹出确定框 setInterval("表达式"或者function( ){ },1000); 1000毫...

2018-03-14 22:29:49 130

原创 JS基础——事件

var oEvent=ev||event;这一句这么写是要兼容各个浏览器，在FireFox浏览器中，事件绑定的函数要获取到事件本身，需要从函数中传入，而IE等浏览器则可以直接使用event或者window.event得到事件本身。这一句的用途：需要获取和事件相关的信息时使用。如：获取键盘按下或弹起的按键获取鼠标的位置坐标获取出发改事件的元素获取事件名称获取事件当前的传播阶段获取事件生成的日期时间至...

2018-03-14 22:28:17 139

原创 JS基础——语法

JavaScript：用来在页面中编写特效的，和HTML\css一样都是由浏览器解析的JavaScript语言一、JS如何运行（javascript,jscript,vbscript,applet...）默认： <script language="javascript" type="text/javascript"></script> 二、输出 alert(...

2018-03-14 22:26:19 143

原创 jquery的ui插件，ajax学习和使用

最近的一个星期学习了jquery UI的插件，动手做了个例子，使用的是jquery UI基本的样式，可以去官网下载其他的样式和颜色。有需要的可以在我的github下载：https://github.com/harrietjia/harriet_front_end.git整体效果：button：$('.btn').button({ icons : { primary : 'ui-icon-...

2018-03-14 22:09:55 513

转载如何在Windows上部署JavaWeb项目

今天主要学习如何在windows操作系统上部署web项目，下面是详细的总结，仅供以后自学。在windows上部署web项目主要是分为以下几步：首先要在电脑上安装JDK，配置环境变量 1.下载JDK的安装地址：http://www.oracle.com 找到适合自己的安装版本进行安装即可 2.配置环境变量：我的电脑-》属性-》高级系统设子-》环境...

2018-03-11 22:52:52 12712

Harrietjia的博客