zerlinda_c-CSDN博客

原创 <meta>标签属性

meta标签由http-equiv属性和name属性组成，下面介绍几个在开发过程中经常会用到的属性。 1、name属性（对SEO的作用比较大） name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索爬虫查找信息和分类信息用的。 meta标签的name属性语法格式是：＜meta name=”参数” content=”具体的参数值”＞。其中na

2016-01-21 20:06:01 743

原创取消表单自动填充功能

用户输入表单内容进行登录，当其中包含密码的时候，某些浏览器比如chrome会提示记住密码。让后当你下一次打开网页，然后浏览器会自动帮你填充表单。可是有时候我们不希望这样做。如何去掉呢？网上有很多方案：<input type="text" name="foo" autocomplete="off" />恐怕搜到最多的就是autocomplete属性了。事实上，很多主流的浏览器目前已经开始忽略这个属

2016-01-21 18:47:28 1260

placeholder作为html5表单新特性，提供了很多便利，它能够在表单域提示用户输入的内容，而在用户输入内容后自行消失。ie对其兼容性并不是很好，ie9以下不能兼容html5，所以对placeholder这个属性也是不支持的。实际开发过程中的页面要做到能够兼容各个浏览器尤其是ie，就要额外多写很多代码了。单单如果是文本输入框来说，placeholder很容易实现，但如果是密码框，考虑的因素就很

2016-01-21 18:28:37 1288

原创 centos服务器下更改网站根目录

作为一个web前端的新手，花了几天买了服务器注册了域名，然后几天的焦头烂额终于网站可以运作了。满心欢喜的把自己做的网页放到了服务器上，可是还是出现了不少问题，在配置Apache的时候花了不少时间。好了，讲一下今天的主题，如何更改Apache访问网站的根目录呢？　　找到目录/etc/httpd/conf/下的httpd.conf，这是Apache的配置文件，我们要对Apache进行配置：　　提

2016-01-07 13:26:45 3158 1

原创 Linux常用命令:文件，用户和群组操作

文件和目录 cd /home //进入 ‘/ home’ 目录’ cd .. //返回上一级目录 cd ../.. //返回上两级目录 cd //进入个人的主目录 cd ~user1 //进入个人的主目录 cd - //返回上次所在的目录 pwd

2016-01-07 11:52:26 591

转载 centos的用户、组权限、添加删除用户等操作的详细操作命令

1.Linux操作系统是多用户多任务操作系统，包括用户账户和组账户两种细分用户账户（普通用户账户，超级用户账户）除了用户账户以为还有组账户所谓组账户就是用户账户的集合，centos组中有两种类型，私有组和标准组，当创建一个新用户时，若没有指定他所属的组，centos就建立以个和该用户相同的私有组，此私有组中只包括用户自己。标准组可以容纳多个用户，如果要使用标准组，那创建一个新的用户时就应该指定

2016-01-07 11:32:33 896

原创跟随屏幕滚动后固定导航到顶端

在浏览网站的时候看到许多不错的效果，比如导航栏滚动一定距离后固定到某一位置。最近做手机端的页面比较多，就想如果多个导航栏叠加能否也将导航栏固定在不同位置呢？其实代码很简单，只不过是一个思路，看一下实际效果：　　　　　　　　　　　　　　　　　　　　　　思路很简单，首先将页面整体结构确定下来，最外层套一个div是常识，然后就是导航和内容的分离。由于html整个文档默认从上到下渲染，而我们

2015-12-30 19:35:48 10459

原创使用jquery改变元素在页面的位置--offsetTop,screenTop,clientTop关系及理解

在进行网页布局的时候会碰到需要进行HTML精确定位的情况，需要要将某一documentElement定位到页面的某一位置。　　比如说传统的文档流是从上到下渲染网页的，当中间某一个元素不存在了（使用.hide()等），后面的元素就要补这个缺，这样的话交互就会很差，因为一旦后面的元素补了这个缺，它在页面显示的内容很可能被浏览器截成两段，用户还未浏览到的内容直接就跑到了浏览器不可见的区域了，这时候如果

2015-12-28 19:16:42 12788

转载 imagecropper文档

Basic usage:1 . Include the jQuery image cropper plugin’s stylesheet in the head section of the page.<link rel="stylesheet" href="src/cropper.css">2 . Include jQuery library and the jQuery image croppe

2015-12-21 17:51:54 757

原创原生js实现jquery函数animate()动画效果

通过在公司一个月的实习，慢慢的对css跟html算是比较熟悉了，这几天开始研究js，今天用js写了一个jquery的animate函数，测试了下，性能还可以。个人觉得jquery并不是万能的，因为是个框架，所以有些东西写的比较死，就像animate函数一样，可选的参数不多有时候可能并不能实现我们想要的效果。　　　　注释的部分是用来测试用的，写代码的过程并不是十分顺利，因为用js平时用的不是很

2015-12-18 19:39:00 28939 1

转载 JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

原文地址：http://caibaojian.com/js-name.html JS中获取各种宽度和距离，常常让我们混淆，各种浏览器的不兼容让我们很头疼，现在就在说说js中有哪些宽度和距离。1、名词解释screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。 client：使用区、客户区。指的是客户区，当然是指浏览器区域。 offset：偏移。指

2015-12-18 10:23:10 529

原创 web开发弹性盒模型flexbox新旧比较

一、flexbox弹性盒子布局兼容性：iOS可以使用最新的flex布局Android4.4以下，只能兼容旧版的flexbox布局Android4.4及以上，可以使用最新的flex布局注：CSS的columns在伸缩容器上没有效果。float、clear和vertical-align在伸缩项目上没有效果。首先还是从两个版本的语法开始讲吧。<div class = "box"> <

2015-12-17 19:28:06 1347

原创移动web开发响应式布局总结

首先来理解三个概念。一、viewport深入理解　我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">　该meta标签的作用是让当前viewport的

2015-12-17 19:02:28 5890

转载移动web开发viewport深入理解

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念　　通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的web

2015-12-17 18:50:41 801

原创百度地图指定覆盖物的隐藏删除操作

今天要根据代码写一个需求，是在别人已经写好代码的基础上增加一个功能，百度地图中添加了自定义的图标，要求点击左侧sidebar中的复选框时做出不同的选择，选中时显示相应WiFi图标，取消选中状态时对应的图标也相应的隐藏，查了半天的百度API，终于找到了方法。　　网上有很多关于自定义覆盖物的博客和教程，找了半天，发现不是自己想要的，在这里，创建的覆盖物是百度API中默认的，不存在自定义的说法，只是对

2015-12-17 12:22:37 8488 4

转载提高代码性能，写出高质量js/jq代码常记

论jQuery和javascript性能的文章并不罕见。然而，本文我计划总结一些速度方面的技巧和我本人的一些建议，来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。首先，在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。当你准备使用jQuery,我强烈建议你遵循下面这些

2015-12-16 10:25:17 2038

转载 css3属性集合

一、边框属性： 1、border-radius 2、box-shadow 3、border-image 二、颜色属性： 1、RGBA（R,G,B,A（透明度）） 2、渐变linear-gradient 三、文字与字体 1、text-overflow 2、word-wrap 3、嵌入字体@font-face 4、文本阴影text-shadow 四、背景样式 1、backgro

2015-12-16 10:08:20 435

转载 CSS优先级机制

样式的优先级多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。示例如下：<head

2015-12-15 18:39:59 357

原创 CSS定位机制：position

CSS的定位机制分为三种，分别是文档流，浮动和定位。　　　　其中文档流的意义就是按照html里面的写法从上到下从左到右的布局。　　浮动包括两种，左浮动和右浮动，直到它的外边框边缘碰到包含框或另一个浮动框的边缘。任意的浮动使元素脱离了文档的普通流，就像在文档中不占据空间。但如果包含块太窄，无法容纳水平排列的浮动元素，那么其他浮动块会向下移动，直到有足够多的空间。　　position

2015-12-14 19:48:51 733

原创原生JS实现图片轮播与淡入

最近对css的兴趣提不起来，因为以前对图片轮播一直耿耿于怀苦于学艺不精，所以，花了点时间熟悉了一下js。然后一条道走到黑，用jquery和js写了一下轮播和图片淡入的效果。以后学习的路很长，希望自己在前端的路上越走越远`(∩_∩)′ 　　　　从原理来讲，网上的教程有很多，简单来说。　　　　淡入淡出，其实这里只用到了淡入的效果。每一张淡入的图片，我们将它的display设置为block，

2015-12-14 19:31:52 5448

原创当表单自动填充_去除chrome浏览器自动添加的默认样式

事实是，并不能一劳永逸去除谷歌在自动填充表单时的默认样式。对于浏览器工具自动添加的样式，这里采取算是一种比较怪异的方法。除非你关闭它的表单自动填充功能，那姑且这篇文章可以不看了。　　　　今天在写账号登录页面时，给input表单添加了背景图片和图标，看起来小清新了不少。可是当用chrome登录自动填充，淡黄色输入框代替了背景样式，看起来有些怪异。在自动填充之后，chrome自动填充的样式如下图

2015-12-10 17:04:20 5565

原创利用Jquery对动态元素进行操作

今天写了一点jquery的代码，姑且先存放的博客上吧。　　默认样式是这样的，需要的是click其中的td时实现对其内容的修改，而blur后显示的是修改后的内容：　　　　　　　　单击url 的td元素之后是这样的：　　　　　　　　　　单击method的td元素之后是这样的：　　　　　　　　　　需求很简

2015-12-09 19:20:20 4072

原创总结CSS3变形transform属性

在网页设计中，css被习惯于理解为擅长表现静态样式，动态的元素必须借助于flash或javascript才可以实现，CSS3将来改变这一思维方式。CSS3除了增加很大革命性的创新功能外，还提供了对动画的支持，可以实现旋转，缩放，移动，倾斜和过渡效果等等，这些功能再一次证明了CSS功能的强大和无限潜能。　　CSS3实现元素变形的基础。来源于新增的transform属性，该元素可用于实现元素的旋转，缩放

2015-12-08 19:27:04 874

原创 CSS伪元素选择器:before与:after

在css标签中有这样子的标签div:before、div:after，对于before、after来说有部分人是相当陌生的，那么这两个标签是什么呢？有什么用处？　　:befor、:after是CSS的伪元素，用CSS手册可以查询到其基本的用法： E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 E::after 设置在对象后（依据对象

2015-12-07 16:54:58 13686

原创如何更改html文档中的element.css样式

用css控制网页元素的样式的时候，按f12打开审查元素，可能会碰到这种情况element.style { height: 50px;}　　尽管你更改了css文件中元素的高度，它的高度依旧是50px。然后查看css文件，element.css属性在css文件中查阅不到，这一般就是由js文件动态添加的了，这种样式通常由js计算得来，优先级高于style.css。　　最近在使用插件的时候遇到

2015-12-07 11:52:43 1225

原创 CSS标准盒子模型

CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border）和外边距（margin）的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。以FireFox标准盒子模型为例：

2015-12-04 18:49:10 4346

原创 float闭合问题

首先,必须知道两件事: 　　1. 浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的. 　　2. HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是占据整行; in-line对象则相反,允许其他对象与它在一行中显示. 　　现在来看float属性, 它的作用就是改变block对象的默认显

2015-11-26 23:03:19 522

原创 css盒模型margin折叠问题解决方案总结

<div id = "header"> <div class = "header_cap"><h1>test</h1></div> </div>#header { width: 100%; height: 6rem; text-align: center; background-color: #CCC; overflow: hidden;}

2015-11-26 13:12:50 2013

转载 css隐藏/显示文字的方法

最近做了一个demo，写了一个图片轮播，在图片轮播的时候显示对图片的文字解释，要求文字不跟随图片滚动默认显示。花了一点点时间，解决了这个办法，最后总结了一下在html中用css隐藏文字的方法。（1）偏移掉字体的方式使用text-indent:-9999px; 这种方法有一个局限性只适用于块级元素。（2）字体为零不显示，能完美“隐藏”掉你background之上的字体，经

2015-11-26 12:34:42 13113

原创 css3 background-size属性--ie兼容

background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :

2015-11-24 18:10:26 5642

zerlinda_c的博客