CSS居中总结

css居中是布局中常见的，在看了网上一些资料后加以总结，侵删

水平居中

子元素为行内元素

父元素设置text-align:center
子元素设置为行内元素，如display:inline-block
(子元素内文字也会居中）

前端css

more >>

ajax+jsonp跨域搜索的实现

静态内容的实现

有一个居中背景图，图里嵌套一个logo加表单form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
  <div class="bg-div">
    <div class="search-box">
      <div class ="logo"></div>
      <form id="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">
        <input type="text" class="search-input-text" id="search-input" autocomplete="off" name="q">
        <input type="submit" class="search-input-button" value="" id="search-submit">
      </form>
    </div>
  </div>
  <div class="suggest" id="search-suggest" style="display:none">
    <ul id="search-result">
      <li>搜索结果1</li>
      <li>搜索结果2</li>
    </ul>
  </div>
</body>
前端JavaScriptajax

more >>

JavaScript-弹出层的实现

弹出层的实现思路

本文讲述的弹出层是点击按钮后弹出两个层，一个是遮罩层,一个是弹出的想让用户看到的层，不能改变页面布局怎么做呢？就需要动态生成这两个层，用js控制它们的出现与消失，控制它们的位置，然后css中写对应的样式代码，这也就是构建弹出层的大体思路

遮罩层的实现

遮罩层的实现要遮罩住整个页面，这个层就需要有整个页面的高度和宽度

1
2
var allWidth=document.body.scrollWidth;
var allHeight=document.body.scrollHeight;

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
参考链接

前端JavaScript

more >>

基于Express+MongoDB搭建的简单功能的博客

总结一下自己学的，自己也总结一下跟着教程遇到的坑

关于环境配置和模块安装

首先是安装环境，node.js不用说了，还有Express和Mongodb
我在本地电脑Windows跟着教程一切都进行得很顺利，然而在阿里云主机的linux上面在安装express然后npm start,一直在报错，报错的是error：缺少XX模块什么的，这就很无奈了，明明应该直接npm stall就可以安装所需的模块，但是还是缺少，没办法，好的，它报缺少什么模块你就装什么咯，用npm install XXX（模块）一个一个装，虽然很烦，但是也无计可施，我也是一个一个装，最后发现没再报错也是比较欣喜的，学了一个阶段后，发现后面的模块安装都是先在package.json中的dependencies加上所需的模块再npm install即可完成

前端nodejs

more >>

关于主机、服务器以及网站访问

对于前端学习，主机和服务器知识往往会被忽略，这里我就找网上的一些东西来总结记录一下，侵删，如有错误,请指正

1.它们到底是什么

主机:
计算机除去输入输出设备以外的主要机体部分，在网络技术中是关于发送和接受信息的终端设备
虚拟主机：
就是网站VPS，一台服务器上还有多个网站，大家共享这台服务器的硬件和带宽，每一个虚拟主机都具有独立的域名和完整的Internet服务器（支持WWW，ftp等），这个虚拟主机技术用来节省服务器硬件成本的技术，由于虚拟主机是从服务器划分出来的，不能自己安装环境等，系统与服务器保持一致，同一个操作系统，同一个IP,不同域名，共享带宽，共享资源（CPU,内存，储存空间）
云主机：
云主机就是虚拟服务器，类似VPS主机的虚拟化技术，VPS是采用虚拟软件，VZ或VM在一台主机上出多个类似独立主机的部分，每个部分都可以做单独的操作系统，管理方法跟主机一样，云基于计算机的分布式连接

计算机主机、服务器

more >>

css编写规范

关于css编写书写顺序和规范
学习前端几个月了，都还没有好好地看看css编写规范，觉得自己代码写得都很乱，现在稍微从网上找了些来总结一下，当然并不完整，选一些比较重要的写写我也记一下

CSS书写顺序

  • 位置属性(position, top, right, z-index, display, float等)
  • 大小(width, height, padding, margin)
  • 文字系列(font, line-height, letter-spacing, color- text-align等)
  • 背景(background, border等)
  • 其他(animation, transition等)

总体来说就是先写定位，再写盒模型，再写其他的
通过规范的css书写顺序可以提升浏览器渲染dom的速度

前端css

more >>