position | 易学教程

css经典布局——头尾固定高度中间高度自适应布局

阅读更多关于 css经典布局——头尾固定高度中间高度自适应布局

转载：穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽！！百度实在让我这个“粉丝”失望。就目前情况来说，百度已经完全轮为“有钱人排行榜”！再也不顾及用户的搜索需求了，因为主导地位实在是：不可撼动！不相信的同学，可以亲身对比下B vs G的搜索结果。别告诉我google如何强大！！很久以前，百度的搜索结果更符合目标，因为他更了解中国人的习惯，这是不可争议，现在情况已经完全相反！虽然google经常是六脉神剑，但我更欣赏它的搜索结果。吐槽打住!!! 现在开始正式谈论这个经典布局 —— 头尾固定高度中间高度自适应布局下面说下要求： 1 头部固定高度，宽度100%自适应父容器； 2 底部固定高度，宽度100%自适应父容器； 3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条； 4 整个内容填满浏览器可视区域，并且不超出此区域！先看下效果图：相信，做过两年前端的同学，拿到这个需求，都有一个感觉——这挺简单的！是的，本来就挺简单！方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染从我脑海崩出来的第一个念头就是定位布局—

HTML表单美化

阅读更多关于 HTML表单美化

由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了单选按钮【实现效果】【实现过程】 body{ margin: 0; font: 16px/20px "宋体"; } .box{ width: 500px; height: 100px; line-height: 100px; margin: 0 auto; border: 1px solid black; text-align: center; } .box label{ position:relative; padding-left: 20px; } .box input{ visibility: hidden; } .box i{ position: absolute; top: -2px; left: -2px; height: 19px; width: 19px; background: url('https://demo.xiaohuochai.site/radiobutton.gif') no-repeat -14px -18px; } .box label:hover{ color: red; } .box label:hover i{ background-position: -14px -118px; }

寒假第八天——（家庭记账本）

阅读更多关于寒假第八天——（家庭记账本）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> </head> <style type="text/css"> *{margin: 0;padding: 0} html,body{height: 100%} /*这里很关键*/ .outer-wrap{ /*只有同时为html和body设置height: 100%时，这里的height才生效，并且随浏览器窗口变化始终保持和浏览器视窗等高*/ height: 100%; position: relative; background-image: url('images/01.jpg'); } .login-panel{ width: 400px; height: 200px; background-image: url('images/02.jpg'); position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; } </style> <body> <%

CSS

阅读更多关于 CSS

relative position do not remove a element for its parent normal flow. 2.absolute position will flaot the element above its parent flow 来源： https://www.cnblogs.com/luoxuw/p/12275624.html

CSS--2D和3D效果

阅读更多关于 CSS--2D和3D效果

2D变形转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。变形转换 transform 移动 translate(x, y) translate ( 50px,50px ) ; 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。可以改变元素的位置，x、y可为负值； translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY(Y)仅垂直方向移动（Y轴移动） .box { width : 499.9999px ; height : 400px ; background : pink ; position : absolute ; left : 50% ; top : 50% ; transform : translate ( -50%,-50% ) ; /* 走的自己的一半 */ } 让定位的盒子水平居中缩放 scale(x, y) transform : scale ( 0.8,1 ) ; 可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。 scale(X,Y

刷题34. Find First and Last Position of Element in Sorted Array

阅读更多关于刷题34. Find First and Last Position of Element in Sorted Array

一、题目说明题目是34. Find First and Last Position of Element in Sorted Array，查找一个给定值的起止位置，时间复杂度要求是Olog(n)。题目的难度是Medium！二、我的解答这个题目还是二分查找（折半查找），稍微变化一下。target==nums[mid]后，需要找前面、后面的值是否=target。一次写出来，bug free，熟能生巧！怎一个爽字了得！ #include<iostream> #include<vector> using namespace std; class Solution{ public: vector<int> searchRange(vector<int>& nums, int target){ vector<int> res; if(nums.size()<1){ res.push_back(-1); res.push_back(-1); return res; } int begin = 0; int end = nums.size()-1; int mid = -1; while(begin <= end){ mid = (begin + end) / 2; if(nums[mid] == target){ begin = mid; while(begin>0 && nums

css中子绝父相

阅读更多关于 css中子绝父相

子绝父相：绝指的是绝对定位，即css中的position: absolute；相是指css中的position: relative。子绝父相能够使子节点按照父节点的标准进行绝对定位例如：父盒子添加margin-left后，子节点也会跟着父节点的位置相对移动，因为子节点在父节点中的位置是相对固定的。来源： CSDN 作者：高产似母猪的小号链接： https://blog.csdn.net/zeshen123/article/details/104213482

shell scripts笔记（linux脚本）

阅读更多关于 shell scripts笔记（linux脚本）

前言如果要选择运维，或者对linux系统有一定兴趣，我想一定要懂得shell scripts，因为这个东西真的很好用；为什么呢？？那是因为： 1、自动化管理的重要依据 2、追踪与管理系统的重要工作 3、简单入侵侦测功能 4、连续指令单一化 5、简易的数据处理（大多数基于正则表达式处理） 6、跨平台支持与学习历程较短（几乎所有的 Unix Like 上面都可以跑 shell script ，连 MS Windows 系列也有相关的 script 仿真器可以用）编写第一个shell 在 shell script 的撰写中还需要用到下面的注意事项：指令的执行是从上而下、从左而右的分析与执行；指令的下达就如同第四章内提到的：指令、选项与参数间的多个空白都会被忽略掉；空白行也将被忽略掉，并且 [tab] 按键所推开的空白同样视为空白键；如果读取到一个 Enter 符号（ CR ），就尝试开始执行该行（或该串）命令；至于如果一行的内容太多，则可以使用 “ [Enter] ” 来延伸至下一行； “ # ” 可做为注解！任何加在 # 后面的数据将全部被视为注解文字而被忽略！如何执行shell文件？通过一下几种方法：直接指令下达： shell.sh 文件必须要具备可读与可执行（ rx ）的权限，然后： 1、绝对路径：使用 /home/dmtsai/shell.sh

双链表的基本操作---插入，删除，交，并，相邻元素的交换，不相邻元素的交换

阅读更多关于双链表的基本操作---插入，删除，交，并，相邻元素的交换，不相邻元素的交换

这个链表是带有表头的双链表。实现链表的一些规范操作，初始化，插入，删除等。包括两个头文件list.h，fatal.h，库函数list.c，测试函数testlist.c。头文件放的都是函数声明，库函数list.c放的的函数的定义。头文件list.h 1 typedef int ElementType; 2 #ifndef _List_H 3 struct Node; 4 typedef struct Node *PtrToNode; 5 typedef PtrToNode List; 6 typedef PtrToNode Position; 7 #include<stdbool.h> 8 List MakeEmpty(List L); 9 void DeleteList(List L); 10 bool IsEmpty(List L); 11 bool IsLast(Position P, List L); 12 Position Find(ElementType X, List L); 13 void Delete(ElementType X, List L); 14 void Insert(ElementType X, List L,Position P); 15 Position Header(List L); 16 Position First(List L); 17

利用MongoDB进行地理坐标查询

阅读更多关于利用MongoDB进行地理坐标查询

BS的应用在生活中已经非常常见，我们打车，叫外卖，查个地图之类的都会查询附近的相关坐标位置，mongodb提供了原生的二维地图查询，极大地方便了大家的开发。假定我们有一个定义了位置信息的集合 location ,给定 a , b , c , d 节点 db.location.find() { "_id" : "A", "position" : [ 0, 10 ] } { "_id" : "B", "position" : [ 10, 0 ] } { "_id" : "C", "position" : [ 20, 0 ] } { "_id" : "D", "position" : [ 0, 15 ] } 这四个点的位置如图所示: 为location的position字段指定2d索引。 db.location.ensureIndex( {position: "2d"} ) { "createdCollectionAutomatically" : false, "numIndexesBefore" : 1, "numIndexesAfter" : 2, "ok" : 1 } 我们假定找出坐标点(0,0)附近半径为10的所有坐标点: db.location.find( {position: { $near: [0,0], $maxDistance: 10 } } ) { "_id" :

订阅 position