liuting37
liuting37

css布局（三列布局、响应式布局、流式布局）

一、三列布局

（1）两边固定 （先float左右固定值，再middle  用margin）

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style type='text/css'>
            * {
                margin: 0;
                padding: 0;
            }        
            #left {
                width: 100px;
                float: left;
                background: green;
                height: 300px;
                /*overflow: hidden;*/
            }
            #right {
                width: 100px;
                float: right;
                background: red;
                height: 300px;
         /*/       overflow: hidden;*/
            }
            #middle {

                margin-right: 100px;
                margin-left: 100px;
                height: 300px;
                background: #ccc;
            }
        </style>
    </head>
    <body>
        <div id="left">
        </div>
        
        <div id="right">
        </div>
        <div id="middle">
        </div>
    </body>
</html>

 （2）中间固定（三个float；左右width=50%先用负margin，设置好右边位置，在用内部 不设宽度div magin 确定左边位置）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#left,
#right {
float: left;
margin-left:-271px;
width: 50%;
}

#main {
width: 540px;
float: left;
background: green;
}
	
.inner {
padding: 20px;
}
	
#left .inner,
#right .inner {
margin-left: 271px;
background: orange;
}
	</style>
</head>
<body>
<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
</body>
</html>

 二、相应式布局（重点在CSS3 中的 @media only screen and （min-width：700px）｛   再写新样式  ｝）

<!DOCTYPE HTML> 
<head> 
<script src="jquery-1.8.2.min.js"></script> 
<style> 

* { 
margin:0; 
padding:0; 
} 
.ul { 
background-color:rgb(134, 170, 209); 
height: 55px; 
} 
.ul li { 
float:left; 

list-style: none; 
background-color:rgb(134, 170, 209); 
width: 20%; 
height: 100%; 
} 
.item { 
display: block;
text-align:center; 
line-height: 49px; 
height: 100%; 
transition: all 0.5s; 
-moz-transition: all 0.5s; /* Firefox 4  */
-webkit-transition: all 0.5s; /* Safari 和 Chrome  */
-o-transition: all 0.5s; 
cursor:pointer; 
} 
.item:hover { 
background-color:rgb(168, 209, 253); 

} 
@media only screen and (max-width: 700px) { 
.ul li { 
width: 100%; 
height: 100%; 
} 
} 
</style> 
<script> 

</script> 
</head> 
<body class="sapUiBody"> 
<header> 
<ul class="ul"> 
<li><a class="item">Home</a></li> 
<li><a class="item">First</a></li> 
<li><a class="item">Second</a></li> 
<li><a class="item">Thirdly</a></li> 
<li><a class="item">Fourth</a></li> 
</ul> 
</header> 
</body>

 三、瀑布流式布局（）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery瀑布流布局（每行代码都有详细注释）-作者：刘晓帆</title>
<style type="text/css">
body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; }
/*瀑布流布局样式*/
#lxf-box { position: relative; }
#lxf-box li { position: absolute; 
              background: #fff; 
              border: solid 1px #ccc; 
              text-align: center; 
              padding: 10px; 
              left: 0px; 
              top: 0; 
            }
h3 { padding-top: 8px; }
img { width: 200px; height: auto; display: block; border: 0 }
/*css3动画*/
li {  -webkit-transition: all .7s ease-out .1s; 
      -moz-transition: all .7s ease-out; 
      -o-transition: all .7s ease-out .1s; 
      transition: all .7s ease-out .1s }
</style>
<script src="../jsForAll/jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
<ul id="lxf-box">
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/1.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/2.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/3.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/4.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/5.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/6.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/7.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/8.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/9.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/10.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/9.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/8.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/7.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.liuxiaofan.com/"><img src="../../image/2.jpg"></a>
    <h3>图片标题</h3>
  </li>


</ul>
<script>
/*
原理：1.把所有的li的高度值放到数组里面
     2.第一行的top都为0
	 3.计算高度值最小的值是哪个li
	 4.把接下来的li放到那个li的下面
作者：刘晓帆
博客地址：[url]http://liuxiaofan.com[/url]
编写时间：2012年6月9日
*/
var margin = 10;//这里设置间距
var li=$("li");//这里是区块名称
var	li_W = li[0].offsetWidth+margin;//取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）
function liuxiaofan(){//定义成函数便于调用
	var h=[];//记录区块高度的数组
	var n = document.documentElement.offsetWidth/li_W|0;//窗口的宽度除以区块宽度就是一行能放几个区块
	for(var i = 0;i < li.length;i++) {//有多少个li就循环多少次
		li_H = li[i].offsetHeight;//获取每个li的高度
		if(i < n) {//n是一行最多的li，所以小于n就是第一行了
			h[i]=li_H;//把每个li放到数组里面
			li.eq(i).css("top",0);//第一行的Li的top值为0
			li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度
			}
		else{
			min_H =Math.min.apply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个
			minKey = getarraykey(h, min_H);//最小的值对应的指针
			h[minKey] += li_H+margin ;//加上新高度后更新高度值
			li.eq(i).css("top",min_H+margin);//先得到高度最小的Li，然后把接下来的li放到它的下面
			li.eq(i).css("left",minKey * li_W);	//第i个li的左坐标就是i*li的宽度
		}
		$("h3").eq(i).text("编号："+i+"，高度："+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面
	}
}
/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/*这里一定要用onload，因为图片不加载完就不知道高度值*/
window.onload = function() {liuxiaofan();};
/*浏览器窗口改变时也运行函数*/
window.onresize = function() {liuxiaofan();};
</script>
</body>
</html>

 

 

你可能感兴趣的:(响应式布局)

  • 移动WEB开发（第四天）__响应式布局 加蓓努力我先飞 5.移动web开发资料前端
    移动WEB开发（第四天）__响应式布局移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理1.2响应式布局容器2.0bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3版本简介2.4bootstrap基本使用2.5bootstrap布局容器2.6bootstrap栅格系统3.0阿里百秀案例制作3.1技术选型移动端WEB开发之响应式布局1.0响应式开
  • 面试php项目中遇到的难点,前端面试被问到项目中的难点有哪些？ weixin_39966130 面试php项目中遇到的难点
    在每个前端求职者的面试过程中，一定都有过被面试官问到项目中的难点，而答不上来的情况。为了让大家在前端面试前准备得更加充足，小编准备了一些易被忽视且难度较高的前端面试题，希望可以帮助大家更加顺利完成求职，找到自己满意的工作。1.流式布局如何实现，响应式布局如何实现？流式布局：也叫fluid,当上面一行的空间不够容纳新的TextView时候才开辟下一行的空间。场景：主要用于关键词搜索或者热门标签等场景
  • 推荐开源项目：WP-Player - 强大的WordPress音频与视频播放器 邹澜鹤Gardener
    推荐开源项目：WP-Player-强大的WordPress音频与视频播放器是一个专为WordPress设计的高效、灵活且功能丰富的多媒体播放器插件。它允许你在博客、新闻网站或其他基于WordPress的内容平台上无缝集成音频和视频内容，提供一流的用户体验。技术分析1.响应式设计WP-Player采用现代Web开发原则，支持响应式布局，无论在桌面、平板还是手机等不同设备上，都能自动调整以适应屏幕大小
  • 实现前端响应式布局 冬天爱吃冰淇淋 h5csscsshtmlhtml5
    实现前端响应式的布局的方法有很多种，下面我介绍的是使用rem跟vw/vh这两种方法来实现响应式页面。1.使用rem来实现响应式布局rem：是一个相对根元素字体大小的单位。总的来说就是一个相对单位。看到rem这个单位，很多人就会想起em这个单位，em也是属于相对单位，但是他是相对于父元素字体大小的单位。根元素是html，不是body。使用方式：html{font-size:100px;}p{font
  • css怎么做响应式布局,用CSS实现响应式布局 休蒙提的可爱背包 css怎么做响应式布局
    响应式网页看起来高大上，但实际上，不用JS只用CSS也能实现响应式网站的布局要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用使用@media的三种方式第一：直接在CSS文件中使用@media类型and(条件1)and(条件二){css样式}@mediascreenand(max-width:980px){body{background-color:red;}}第二：使用@import导入@
  • 用CSS实现前端响应式布局 小刘| 前端css
    一、响应式布局的重要性随着移动设备的普及，越来越多的用户通过手机、平板电脑等设备访问网页。如果网页不能适应不同的屏幕尺寸，就会出现布局混乱、内容显示不全等问题，严重影响用户体验。响应式布局可以确保网页在各种设备上都能保持美观、易用，提高用户满意度和网站的可用性。二、代码分析HTML结构：htmltitle1content1title2content2title3content3这里使用了一个容器d
  • 前端CSS：CSS的Flexbox布局 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    前端CSS：CSS的Flexbox布局引言Flexbox布局基础基本概念作用说明示例一：基本的Flexbox布局示例代码解释说明示例二：使用Flexbox进行响应式布局示例代码解释说明示例三：多方向的Flexbox布局示例代码解释说明示例四：垂直方向的Flexbox布局示例代码解释说明示例五：Flexbox布局的自适应性示例代码解释说明不同角度的功能使用思路使用Flexbox创建响应式导航栏使用F
  • 响应式Web设计：纯HTML和CSS的实现技巧 丁爸 web前端html
    1.简介1.1.概述响应式Web设计（ResponsiveWebDesign，简称RWD）是一种网络页面设计布局，它能够根据访问设备的屏幕尺寸、分辨率和其他特性动态地调整布局、图片和内容，以提供更好的用户体验。这种设计理念的核心在于“移动优先”，即首先考虑移动用户的体验，然后再扩展到桌面和其他设备。1.2.主要特点响应式Web设计的主要特点包括：弹性布局：使用流体网格和灵活的图片来创建响应式布局，
  • 前端开发中的大屏布局方案：使用 rem 单位与动态设置 html 的 font-size 天生我材必有用_吴用 html前端javascriptvue响应式看板大屏
    使用rem单位与动态设置html的font-size前言随着设备尺寸的多样化，网页需要能够在不同大小的屏幕上提供良好的用户体验。传统的布局方式（如使用px）在不同分辨率下可能会导致布局失真。为了解决这个问题，我们可以通过动态设置html元素的font-size并使用rem单位来构建响应式布局。先看效果rem单位简介rem是CSS中的一个相对单位，全称为"rootem"。它代表的是根元素（通常是元素
  • 【每日前端面经】2023-02-25 糠帅傅蓝烧牛肉面 每日前端面经前端面试
    题目来源:牛客+牛客每日面经20240225了解Taro么Taro是一个开放式跨端跨框架解决方案，支持使用React/Vue/Nerv等框架来开发微信/京东/百度/支付宝/字节跳动/QQ/飞书小程序/H5/RN等应用多端适配怎么做固定布局（PC）window.screen分类加载CSS@media媒体查询vh+vw+rem百分比布局响应式布局移动端适配怎么做同上偏工程化如何做字体大小的适配通过媒体
  • 前端开发框架推荐总结二 Devil枫 前端框架前端
    在前端开发领域，框架的选择对于项目的成功至关重要。它们提供了丰富的组件、工具和最佳实践，帮助开发者快速构建出美观、功能强大的用户界面。本文将介绍下面四个前端开发框架：Bootstrap、easyui、jQueryUI和layui。一：Bootstrap特点:1.响应式设计：Bootstrap内置了强大的响应式布局系统，使得网页能够在不同设备和屏幕尺寸上都能良好地显示。2.丰富的组件：提供了大量的U
  • 你知道Web框架有哪些吗? dami_king 前端框架
    BootstrapBootstrap是由Twitter团队推出的开源前端框架，以HTML、CSS和JavaScript为基础，提供了一系列可复用的UI组件和强大的响应式布局系统。它易于上手，有助于开发者快速构建简洁、一致且移动友好的网站。FoundationFoundation同样是一款响应式前端框架，与Bootstrap相似，但它强调模块化和定制性，支持更复杂的布局结构，并且包含一些Bootst
  • css篇---移动端适配的方案有哪几种 婷宝_知萌 前端css前端
    移动端适配移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局。主流实现的方案有响应式布局通过rem或者vw,vh等实现不同设备有相同的比例而实现适配首先需要了解viewport【视口】视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴内，它代表的是浏览器中网站中可见如果要实现浏览器适配移动端，首先我们需要统一标准视口，在html的head中需要添加以下标签：①统一视口re
  • 跟着pink老师前端入门教程-day24 axiu呀 HTML5+CSS3移动端前端html5学习开发语言htmlcss3css
    四、移动端WEB开发之响应式布局1、响应式开发1.1响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。1.2响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。平时响应式尺寸划分，也可以根据
  • Django搭建个人博客：结束和开始 杜赛_dusai
    教程看到这里，你已经学会如下内容：搭建开发环境博文管理用户管理发表评论若干小功能搭建简单的小博客，以上的功能够用了。相信你的志向不止于此。毕竟程序员面试个个造火箭啊。接下来学什么虽说Django已经入门了，但别激动，还有漫漫长路需要走哒。重要的学习点列举如下。响应式布局响应式布局，简单来说就是页面布局随着终端设备的变化而自动适应。教程为了起步平缓，没有展开这方面的内容。也就是说教程中的博客在手机上
  • 2019-05-26 迷茫大撒旦
    0527计划1.apply,call,bind2.try/catch/finally3.编码规范4.vue文档相关5.typeofinstanceof6.new7.mapreducefilter8.响应式布局9.Promiseasyncawait10.Json.stringifyJson.parse
  • 第六篇【传奇开心果系列】Vant of Vue 开发移动应用示例：深度解析响应式布局支持 传奇开心果编程 VantofVue开发移动应用示例前端框架androidiosvue.jsui
    传奇开心果系列系列博文目录Vant开发移动应用示例系列博文目录前言一、Vant响应式布局介绍二、媒体查询实现响应式布局示例代码三、短点设置实现响应式布局示例代码四、响应式工具类实现响应式布局示例代码五、栅格系统实现响应式布局示例代码六、响应式组件实现响应式布局示例代码七、内置的媒体查询工具类来设置样式实现响应式布局示例代码八、自定义断点设置实现响应式布局示例代码九、Flex实现响应式布局示例代码十
  • 《CSS 简易速速上手小册》第3章：CSS 响应式设计（2024 最新版） 江帅帅 《CSS简易速速上手小册》css前端人工智能htmljavascriptweb3网站
    文章目录3.1媒体查询基础：网页的智能眼镜3.1.1基础知识3.1.2重点案例：适应三种设备的响应式布局3.1.3拓展案例1：改变字体大小3.1.4拓展案例2：暗模式适配3.2响应式图片和视频：让内容自由呼吸3.2.1基础知识3.2.2重点案例：响应式图片画廊3.2.3拓展案例1：使用``元素适配暗模式3.2.4拓展案例2：创建响应式视频3.3移动优先与桌面优先策略：瑜伽大师的两种姿态3.3.1基
  • 移动端web开发布局 爱踢粪球的虫 前端csscss3
    目录flex布局：flex布局父项常见属性：flex布局子项常见属性：REM适配布局：响应式布局：flex布局：需要先给父类盒子设置display：flexflex是flexiblebox的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局(display属性)以后，子元素的float,clear和vertical-alig
  • CSS--移动端布局 每天都要进步哦 前端开发css前端css
    基本概念背景：因为手机的尺寸和屏幕的像素越来越大，导致我们响应式布局很难保证网页能够100%适配主流的屏幕概念：使用css3的单位以及弹性布局等技术来实现移动端布局。一般移动端布局跟pc端是完全不一样的。屏幕像素逻辑像素：真正用于显示屏幕内容的像素设备物理像素：是屏幕一出场已经确定的像素逻辑像素和设备物理像素：设备物理像素是指屏幕的实际像素有多少。但现在的手机屏幕一般物理像素都是1920*1080
  • 好看的前端框架(一)----Semantic UI ls1228
    介绍SemanticUI是一款语义化的UI框架，代码可读性与可理解性很强，界面简洁美观，与bootstrap风格接近，基于jquery，适用响应式布局，提供一些基本模板，兼容Firefox、Chrome、safari,IE10+等浏览器。官网地址https://semantic-ui.com/使用方法引入js与css文件:1.按钮好看的前端框架(一)----SemanticUI标签按钮//带有标签
  • 前端常见面试题集合 洪洪呀 web前端vue
    web前端面试题大厂小厂均适用盒模型盒模型的组成,有里向外content,padding,border,margin清除浮动的方式使用position:absolute/fixed使用display:inline-block/table使用float元素使用overflow!==visiblecss常用布局方式常见的有div布局css布局flex布局table布局流式布局响应式布局html5的新特
  • 15.响应式布局和 Bootstrap 实现 ikonan
    响应式这个概念曾经非常流行，但从发展来看，似乎「响应式」布局不再是一个必不可少的话题。究其原因我认为主要有以下几点：公司研发人力越来越充足，PC端、移动端可以实现两套布局，分项目维护响应式布局适配越来越简单但是我们仍然不能对这个概念「掉以轻心」，因为响应式布局仍然有其存在的价值：移动端碎片化的现象将会无限期存在；前端也必然进入物联网，任何设备界面的响应布局将会成为关键挑战。除此之外，响应式布局也体
  • 界面控件DevExpress ASP.NET Spreadsheet组件 - 轻松集成电子表格功能！（一） 界面开发小八哥 asp.net后端界面控件devexpress
    DevExpressASP.NETSpreadsheet组件允许您轻松地将电子表格功能合并到任意ASP.NET应用程序，它可以加载、转换和保存工作簿到XLS-XLSx二进制文件格式，还可以导出和导入XLSX、CSV和TXT文件。P.S：DevExpressASP.NETWebFormsControls拥有针对Web表单（包括报表）的110+种UI控件，可利用轻量级渲染、响应式布局和现代性能优化技术
  • 第十三篇【传奇开心果系列】BeeWare 的Toga开发移动应用示例：toga响应式布局 传奇开心果编程 pythonandroidios
    传奇开心果博文系列系列博文目录BeeWare的Toga开发移动应用示例系列博文目录前言一、Toga实现响应式布局方式方法介绍二、Toga弹性布局实现响应式布局示例代码三、Toga自适应布局实现响应式布局示例代码四、Toga响应式组件实现响应式布局示例代码五、Toga布局管理器实现响应式布局示例代码六、Toga响应式事件处理实现响应式布局示例代码七、Toga跨平台支持实现响应式布局示例代码八、Tog
  • Bootstrap 默默编码的Fxdll javajavascript
    Bootstrap一、Bootstrap概述Bootstrap:是一个基于jquery以及csshtml5的前端框架，具有很好的自适应性，可以很方便的处理响应式布局Bootstrap中文网二、Bootstrap使用方式三、网格系统栅格系统：Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。“行（row）”必须
  • css3笔记(一） yueo web前端csscss3
    css3css31、css3是css1css2的升级版，是对css的扩展2、css3主要新特性：3、css3不是属于浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀4、css3选择器5、css3文本6、css3边框7、css3背景8、css3颜色9、opacity10、css3线性渐变11、box-sizing12、盒子的变形13、css3布局14、响应式布局15、媒
  • html5与css3代码,HTML5与CSS3基础（三）(示例代码) tyler dai html5与css3代码
    11用CSS进行布局11.1开始布局的注意事项1还是要强调的是内容与显示分离2布局方法：固定布局：整个页面和每一栏的内容都有基于像素的宽度。就是说宽度都是固定好了的，不会因为你改变设备就随着你的设备的宽去进行改变。响应式布局(流式页面)：它使用的是百分数定义宽度，允许页面随着环境的改变来发生相应的改变。就是现在最流行的响应式布局：bootstrap框架3浏览器的注意事项：浏览器之间存在在一些差异性
  • 【CSS】页面自适应屏幕宽度（响应式布局媒体查询-@media、弹性布局、网格布局和相对单位-vh/em/%） 香菜啵子欸 CSScss媒体前端
    【CSS】页面自适应屏幕宽度（响应式布局媒体查询-@media、弹性布局、网格布局和相对单位-vh/em/%）一、媒体查询（@media）1、媒体类型2、媒体特征3、媒体查询语法4、示例（1）示例1（2）示例2（3）示例3二、弹性布局（diplay:flex;[具体可查看](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)）三、网
  • 实现一个好看通用且响应式布局，自适应的登录/注册页面 safe030 前端javajavascripthtmlhtml5css3jquery
    实现一个好看通用且响应式布局，自适应的登录/注册页面提示：以下是本篇文章正文内容，下面案例可供参考一、页面设计？页面设计了一个滑动的效果，一个盒子里一边为登录一边为注册，然后中间有一个遮挡盒子，遮挡盒子通过左右滑动，实现显示登录页面还是注册页面。然后登录与注册的表单输入里添加了一个blur事件，label与input好像存在一种里外的错觉感，十分吸引人。然后给整个页面添加了@media实现了响应式
  • Spring4.1新特性——Spring MVC增强 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • mysql 性能查询优化 annan211 javasql优化mysql应用服务器
    1 时间到底花在哪了？ mysql在执行查询的时候需要执行一系列的子任务，这些子任务包含了整个查询周期最重要的阶段，这其中包含了大量为了 检索数据列到存储引擎的调用以及调用后的数据处理，包括排序、分组等。在完成这些任务的时候，查询需要在不同的地方 花费时间，包括网络、cpu计算、生成统计信息和执行计划、锁等待等。尤其是向底层存储引擎检索数据的调用操作。这些调用需要在内存操
  • windows系统配置 cherishLC windows
    删除Hiberfil.sys ：使用命令powercfg -h off 关闭休眠功能即可： http://jingyan.baidu.com/article/f3ad7d0fc0992e09c2345b51.html 类似的还有pagefile.sys msconfig 配置启动项 shutdown 定时关机 ipconfig 查看网络配置 ipconfig /flushdns
  • 人体的排毒时间 Array_06 工作
    ======================== ||  人体的排毒时间是什么时候？|| ======================== 转载于： http://zhidao.baidu.com/link?url=ibaGlicVslAQhVdWWVevU4TMjhiKaNBWCpZ1NS6igCQ78EkNJZFsEjCjl3T5EdXU9SaPg04bh8MbY1bR
  • ZooKeeper cugfy zookeeper
    Zookeeper是一个高性能，分布式的，开源分布式应用协调服务。它提供了简单原始的功能，分布式应用可以基于它实现更高级的服务，比如同步， 配置管理，集群管理，名空间。它被设计为易于编程，使用文件系统目录树作为数据模型。服务端跑在java上，提供java和C的客户端API。 Zookeeper是Google的Chubby一个开源的实现，是高有效和可靠的协同工作系统，Zookeeper能够用来lea
  • 网络爬虫的乱码处理 随意而生 爬虫网络
    下边简单总结下关于网络爬虫的乱码处理。注意，这里不仅是中文乱码，还包括一些如日文、韩文 、俄文、藏文之类的乱码处理，因为他们的解决方式 是一致的，故在此统一说明。     网络爬虫，有两种选择，一是选择nutch、hetriex，二是自写爬虫，两者在处理乱码时，原理是一致的，但前者处理乱码时，要看懂源码后进行修改才可以，所以要废劲一些；而后者更自由方便，可以在编码处理
  • Xcode常用快捷键 张亚雄 xcode
    一、总结的常用命令：     隐藏xcode command+h     退出xcode command+q     关闭窗口 command+w     关闭所有窗口 command+option+w     关闭当前
  • mongoDB索引操作 adminjun mongodb索引
    一、索引基础：    MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的优化技巧。下面是创建索引的命令：    > db.test.ensureIndex({"username":1})    可以通过下面的名称查看索引是否已经成功建立： &nbs
  • 成都软件园实习那些话 aijuans 成都 软件园 实习
    无聊之中，翻了一下日志，发现上一篇经历是很久以前的事了，悔过~~ 　　断断续续离开了学校快一年了，习惯了那里一天天的幼稚、成长的环境，到这里有点与世隔绝的感觉。不过还好，那是刚到这里时的想法，现在感觉在这挺好，不管怎么样，最要感谢的还是老师能给这么好的一次催化成长的机会，在这里确实看到了好多好多能想到或想不到的东西。 　　都说在外面和学校相比最明显的差距就是与人相处比较困难，因为在外面每个人都
  • Linux下FTP服务器安装及配置 ayaoxinchao linuxFTP服务器vsftp
    检测是否安装了FTP [root@localhost ~]# rpm -q vsftpd 如果未安装：package vsftpd is not installed  安装了则显示：vsftpd-2.0.5-28.el5累死的版本信息   安装FTP 运行yum install vsftpd命令，如[root@localhost ~]# yum install vsf
  • 使用mongo-java-driver获取文档id和查找文档 BigBird2012 driver
    注：本文所有代码都使用的mongo-java-driver实现。   在MongoDB中，一个集合（collection）在概念上就类似我们SQL数据库中的表（Table），这个集合包含了一系列文档（document）。一个DBObject对象表示我们想添加到集合（collection）中的一个文档（document），MongoDB会自动为我们创建的每个文档添加一个id，这个id在
  • JSONObject以及json串 bijian1013 jsonJSONObject
    一.JAR包简介     要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：     1.commons-lang-2.0.jar     2.commons-beanutils-1.7.0.jar     3.commons-collections-3.1.jar &n
  • [Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性 bit1129 zookeeper
    为了说明问题，看个简单的代码，   import org.apache.zookeeper.*; import java.io.IOException; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ThreadLocal
  • 【Scala十二】Scala核心六：Trait bit1129 scala
    Traits are a fundamental unit of code reuse in Scala. A trait encapsulates method and field definitions, which can then be reused by mixing them into classes. Unlike class inheritance, in which each c
  • weblogic version 10.3破解 ronin47 weblogic
    版本：WebLogic Server 10.3 说明：%DOMAIN_HOME%：指WebLogic Server 域(Domain）目录 例如我的做测试的域的根目录 DOMAIN_HOME=D:/Weblogic/Middleware/user_projects/domains/base_domain 1.为了保证操作安全，备份%DOMAIN_HOME%/security/Defa
  • 求第n个斐波那契数 BrokenDreams
            今天看到群友发的一个问题：写一个小程序打印第n个斐波那契数。         自己试了下，搞了好久。。。基础要加强了。           &nbs
  • 读《研磨设计模式》-代码笔记-访问者模式-Visitor bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; interface IVisitor { //第二次分派，Visitor调用Element void visitConcret
  • MatConvNet的excise 3改为网络配置文件形式 cherishLC matlab
    MatConvNet为vlFeat作者写的matlab下的卷积神经网络工具包，可以使用GPU。 主页： http://www.vlfeat.org/matconvnet/ 教程： http://www.robots.ox.ac.uk/~vgg/practicals/cnn/index.html 注意：需要下载新版的MatConvNet替换掉教程中工具包中的matconvnet： http
  • ZK Timeout再讨论 chenchao051 zookeepertimeouthbase
    http://crazyjvm.iteye.com/blog/1693757 文中提到相关超时问题，但是又出现了一个问题，我把min和max都设置成了180000，但是仍然出现了以下的异常信息： Client session timed out, have not heard from server in 154339ms for sessionid 0x13a3f7732340003
  • CASE WHEN 用法介绍 daizj sqlgroup bycase when
    CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数  CASE sex  WHEN '1' THEN '男'  WHEN '2' THEN '女'  ELSE '其他' END  --Case搜索函数  CASE WHEN sex = '1' THEN
  • PHP技巧汇总:提高PHP性能的53个技巧 dcj3sjt126com PHP
    PHP技巧汇总:提高PHP性能的53个技巧　　用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量，　　单引号则不会，注意：只有echo能这么做，它是一种可以把多个字符串当作参数的函数译注：　　PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号)。　　1、如果能将类的方法定义成static，就尽量定义成static，它的速度会提升将近4倍
  • Yii框架中CGridView的使用方法以及详细示例 dcj3sjt126com yii
    CGridView显示一个数据项的列表中的一个表。 表中的每一行代表一个数据项的数据,和一个列通常代表一个属性的物品(一些列可能对应于复杂的表达式的属性或静态文本)。　　CGridView既支持排序和分页的数据项。排序和分页可以在AJAX模式或正常的页面请求。使用CGridView的一个好处是,当用户浏览器禁用JavaScript,排序和分页自动退化普通页面请求和仍然正常运行。 实例代码如下：
  • Maven项目打包成可执行Jar文件 dyy_gusi assembly
    Maven项目打包成可执行Jar文件 在使用Maven完成项目以后，如果是需要打包成可执行的Jar文件，我们通过eclipse的导出很麻烦，还得指定入口文件的位置，还得说明依赖的jar包，既然都使用Maven了，很重要的一个目的就是让这些繁琐的操作简单。我们可以通过插件完成这项工作，使用assembly插件。具体使用方式如下： 1、在项目中加入插件的依赖： <plugin>
  • php常见错误 geeksun PHP
    1.  kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "fastc
  • 修改linux的用户名 hongtoushizi linuxchange password
    Change Linux Username 更改Linux用户名，需要修改4个系统的文件： /etc/passwd /etc/shadow /etc/group /etc/gshadow 古老/传统的方法是使用vi去直接修改，但是这有安全隐患（具体可自己搜一下），所以后来改成使用这些命令去代替： vipw vipw -s vigr vigr -s   具体的操作顺
  • 第五章 常用Lua开发库1-redis、mysql、http客户端 jinnianshilongnian nginxlua
    对于开发来说需要有好的生态开发库来辅助我们快速开发，而Lua中也有大多数我们需要的第三方开发库如Redis、Memcached、Mysql、Http客户端、JSON、模板引擎等。 一些常见的Lua库可以在github上搜索，https://github.com/search?utf8=%E2%9C%93&q=lua+resty。   Redis客户端 lua-resty-r
  • zkClient 监控机制实现 liyonghui160com zkClient 监控机制实现
             直接使用zk的api实现业务功能比较繁琐。因为要处理session loss，session expire等异常，在发生这些异常后进行重连。又因为ZK的watcher是一次性的，如果要基于wather实现发布/订阅模式，还要自己包装一下，将一次性订阅包装成持久订阅。另外如果要使用抽象级别更高的功能，比如分布式锁，leader选举
  • 在Mysql 众多表中查找一个表名或者字段名的 SQL 语句 pda158 mysql
    在Mysql 众多表中查找一个表名或者字段名的 SQL 语句： 　　方法一：SELECT table_name, column_name from information_schema.columns WHERE column_name LIKE 'Name'; 　　方法二：SELECT column_name from information_schema.colum
  • 程序员对英语的依赖 Smile.zeng 英语程序猿
    1、程序员最基本的技能，至少要能写得出代码，当我们还在为建立类的时候思考用什么单词发牢骚的时候，英语与别人的差距就直接表现出来咯。 2、程序员最起码能认识开发工具里的英语单词，不然怎么知道使用这些开发工具。 3、进阶一点，就是能读懂别人的代码，有利于我们学习人家的思路和技术。 4、写的程序至少能有一定的可读性，至少要人别人能懂吧... 以上一些问题，充分说明了英语对程序猿的重要性。骚年
  • Oracle学习笔记(8) 使用PLSQL编写触发器 vipbooks oraclesql编程活动Access
        时间过得真快啊，转眼就到了Oracle学习笔记的最后个章节了，通过前面七章的学习大家应该对Oracle编程有了一定了了解了吧，这东东如果一段时间不用很快就会忘记了，所以我会把自己学习过的东西做好详细的笔记，用到的时候可以随时查找，马上上手！希望这些笔记能对大家有些帮助！     这是第八章的学习笔记，学习完第七章的子程序和包之后
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他