知乎布局||offsetTop||侧边栏自动等高
1.对a标签的详细介绍
直接在a标签使用onclick,怎么去除a的默认链接,onclick="return test()" 注意这里的return 不可舍去,test函数可以直接通过return false组织程序的链接的跳转
百度
2.获取元素节点操作
onclick;通过调用阻止默认事件防止链接跳转
百度
3:纯CSS实现侧边栏 分栏高度自动相等
.left{float:left;padding-bottom:2000px;margin-bottom:-2000px;width:200px;background:#ddd;}
.center{float:left;margin:0 210px 0 420px;height:600px;background:#0f0;}
.right{float:right;padding-bottom:2000px;margin-bottom:-2000px;width:400px;background:#f00;}
4:知乎主页的布局方式(淘宝首页也使用这种写法)
这个布局的实现方式 1:参照下面代码解释:首先你需要把代码放在一个容器吗,如下放在了inner使布局在中间 2:开始布局:content是主布局 ;设置其宽度为100%,设置浮动:float:left;在content中设置margin-right留出sidebar的位置
3:和content同级的下面div;设置属性 float:left;设置sidebar的宽度,width:270px;设置margin-left:-270px;
*{margin:0;padding:0;}
.content{width:100%; float: left;}
.inner{margin:0 auto;width:700px;}
.content_inner{
margin-right: 328px
}
.left{float:left;width:30px;height:30px;background-color:#ff0;}
.right{margin-left:40px;}
.zu-main-sidebar {
float: left;
margin-left:-270px;
width: 270px;
background-color:#ddd;
}bbbccc ccc ccc ccc ccc cccccc ccc ccc ccc ccc ccc 33333
5:元素相对于窗口的距离
元素相对于窗口的距离,在position:absolute;实现实时定位中的应用非常的广泛,如自制下拉框,搜索框
//获取元素的纵坐标(相对于窗口)
function getTop(e){ var actualTop=e.offsetTop; if(e.offsetParent!=null)
actualTop+=getTop(e.offsetParent); return actualTop;
}
function getLeft(e){
var actualLeft=e.offsetLeft;
var current=e.offsetParent
while(current){
actualLeft+=current.offsetLeft;
current=current.offsetParent;
}
return actualLeft;
}
//获得字符串的宽度 汉字为两个字符,英文为一个字符
function getStringWidth(str ,fontSize) {
var width=0;
for(var i=0; i < str.length; i++) {
str[i]=str[i].replace('\s+', '');
if(str.charCodeAt(i) >= 255) {
width++;
}
}
width+=str.length
return width*(fontSize/2);
}
6:动态作用域
动态作用域是this的表亲
动态作用域似乎暗示有很好的理由让作用域作为一个在运行中就被动态确定的形式,而不是在写代码时进行静态确定的形式
此法作用域是在写代码的时候或者在定义时确定的,而动态作用域是在运行时确定的,词法作用域和动态作用域之间的关系多么紧密。
function foo() {
console.log(a)
}
function bar() {
var a = 3;
foo()
}var a=2
bar();//2
7:获取节点的style
通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了
DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle
特别注意一点:如果要获取当前对象的颜色信息,IE返回的是16进制的'#ffffff',而FF返回的是#ffffff
var oStyle = this.currentStyle? this.currentStyle : window.getComputedStyle(this, null);
alert(oStyle.fontWeight);
知乎布局||offsetTop||侧边栏自动等高的更多相关文章
- 并列div自动等高
并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 基于MVC4+EasyUI的Web开发框架经验总结(17)--布局和对话框自动适应大小的处理
在我自己的<Web开发框架>中,用了很多年的EasyUI,最新版本EasyUI为1.4.5,随着版本的更新,其很多功能得到了很大的完善和提高,同时也扩展了一些新的功能,以前在布局和对话框弹 ...
- Redis主从配置及通过Keepalived实现Redis自动切换高可用
Redis主从配置及通过Keepalived实现Redis自动切换高可用 [日期:2014-07-23] 来源:Linux社区 作者:fuquanjun [字体:大 中 小] 一:环境介绍: M ...
- 布局:高度已知,布局一个三栏布局,左栏和右栏宽度为200px,中间自适应
需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...
- 动态布局--动态修改RelativeLayout宽高的方法
本文实例讲述了Android编程动态修改RelativeLayout宽高的方法.分享给大家供大家参考,具体如下: 我们经常会动态修改RelativeLayout的宽高,这样的代码,比较简单,就是修改R ...
- mysql mha 主从自动切换 高可用
mha(Master High Availability)目前在MySQL多服务器(超过二台),高可用方面是一个相对成熟的解决方案. 一,什么是mha,有什么特性 1. 主服务器的自动监控和故障转移 ...
- 布局两列div等高方法
一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 【CSS】 布局之多列等高
这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...
- 20191012——POI设置单元格自动行高(思路)
在经过Jxls或者POI导出数据至excel中后,发现有的单元格内容太多,既没有自动换行,也没有自动增大行高.那如何通过Java代码来实现呢?请看下面步骤: (一)首先,将excel设置为最合适的行高 ...
随机推荐
- MySQL的热备percona-xtrabackup、innobackupex的安装方法
http://blog.csdn.net/dbanote/article/details/13295727 http://blog.csdn.net/yangzhawen/article/detail ...
- 使用 screen 管理你的远程会话
文章转载自:https://www.ibm.com/developerworks/cn/linux/l-cn-screen/ 在此只作为笔记使用,不做他用 你是不是经常需要 SSH 或者 telent ...
- [转]oracle学习入门系列之五内存结构、数据库结构、进程
原文地址:http://www.2cto.com/database/201505/399285.html 1 Oracle数据库结构 关于这个话题,网上一搜绝对一大把,更别提书籍上出现的了,还有很多大 ...
- Swift微博项目--Swift中通过类名字符串创建类以及动态加载控制器的实现
Swift中用类名字符串创建类(用到了命名空间) OC中可以直接通过类名的字符串转换成对应的类来操作,但是Swift中必须用到命名空间,也就是说Swift中通过字符串获取类的方式为NSClassFro ...
- 100722A
这道题抄了答案: 思路:旋转,其实只用旋转四次,因为在换行的过程中旋转其实是没有意义的,因为行列只不过转了个角度.然后主要的是行列的交换,这里我很头疼,写了个盲目搜索,当然wa掉了 问了问某位同志,是 ...
- Python列表、元组、字典和字符串的常用函数
Python列表.元组.字典和字符串的常用函数 一.列表方法 1.ls.extend(object) 向列表ls中插入object中的每个元素,object可以是字符串,元组和列表(字符串“abc”中 ...
- Extract Fasta Sequences Sub Sets by position
cut -d " " -f 1 sequences.fa | tr -s "\n" "\t"| sed -s 's/>/\n/g' & ...
- mysql字段冲突报错
check the manual that corresponds to your MySQL server version for the right syntax to use near 出现这个 ...
- 基于Maven引入Hadoop包报Missing artifact jdk.tools:jdk.tools:jar:1.6
一.问题来源 <dependency> <groupId>org.apache.hadoop</groupId> <artifactId>hadoop- ...
- 【bzoj3624】Apio2008—免费道路
http://www.lydsy.com/JudgeOnline/problem.php?id=3624 (题目链接) 题意 给出一张无向图,其中有0类边和1类边.问能否构成正好有K条0类边的生成树, ...