web前端技巧整理(个人实战经验)

   2015-08-27 0
核心提示:web前端技巧有很多,比如在布局时会让左侧定右侧自适应以及左右定中间自适应等等,下面有个不错的示例,大家可以参考下希望对大家有所帮助
1.今天在做一个页面的时候碰到了箭头居中的效果:由于想实现点击区域很大所以用了padding-top:23%。但是在计算23%的时候出现了问题,经过研究发现:padding-top的百分比是根据期父元素的width而不是height来计算的,很奇怪吧?哪位大牛能给解释下。
2.某个层加了浮动后又加margin后在ie6下一定会出现双倍边距。----------解决方法是display:inline;(虽然知道,但是每次都忘)。
3.左侧定宽右侧自适应+左右定宽中间自适应的框架一定要会运用,很多时候都会运用上,

demo1(左侧定右侧自适应):

复制代码
代码如下:

<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>双列布局,左侧定宽,右侧自适应</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; }
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#middle { width:100%; height:200px; background:#F00; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
</div>
<div id="footer">footer</div>
</body>
</html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

demo2(左右定中间自适应):

复制代码
代码如下:

<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>双列布局,左侧定宽,右侧自适应</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; padding-right: 200px;}
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}
#middle { width:100%; height:200px; background:#F00; float:left;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

4.在ie6下插入图片时候用img标签会有img下会有几个像素的空白会导致你跟设计稿做的东西不一样(会被主管火眼看出来然后挨骂)---解决办法是将img变成块级元素;display:block;
5.让文本在块内垂直的方法是:1).vertical-align:middle.2).line-height:***; -------------一般的第二个比第一个好用,具体我也不知道为什么。
6.a标签的lvha不是很常用,但是一定会用:a:link{} a:visited{};a:hover{}a:active{}
7.文本截断不换行貌似很常用(这几天天天用):white-space:nowrap;overflow:hidden;text-overflow:ellipsis;(换行为:word-wrap:break-word;)
8.清除浮动的方法很多,这几天主要用的三种:1)clear:both;2)overflow:hidden;3).我的指导人最爱用的:#a:after{display:block;clear:both;visibility:hidden;height:0;content'.';}
9.鼠标手势有的时候在ie下会消失,这个情况这两天也出现过几次。----------------解决办法是corsor:pointer;(注意不能是hand--指导人特别提醒)
10.定义一个只有2像素的高度的容器的时候在ie6下会有bug--解决方法是将各种属性清零,尤其是font-size:0;height:0;line-height:0;
11.max-width在ie6下会不起作用---解决办法是_width:*;(上个周遇到过这个问题)
12.!important 规则--以前从来没用过这个属性,直到前天主管看我的代码时候提醒我在一个页面响应式的时候后来的width会覆盖本身的width:100%;所以要加width:100%!important;
13.清除浮动非常非常重要---比如有的时候容器无法自适应高度你就要用到它的!!!
14.点击文字的时候也会点击上单选框或者复选框了比如csdn的这个功能: 方法是用lable包住单选框或者用lable for“id”。
15.display:none--------消失不占位置。visibility:hidden;--------------消失后占位置。
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • web前端全部课件(html5+CSS3+javascript+dom+b
    body { width: 100%; font-size: 16px }a { color: rgba(51, 51, 51, 1); text-decoration: none }p { padding-left: 50px }a:hover { color: rgba(255, 0, 0, 1) }.ppt { color: rgba(0, 0, 255, 1) }.ask { color: rgba(255, 0, 0, 1) }.answer { color: rg
    03-08
  • Web前端基础——jQuery(三) 前端jquery是什么
    Web前端基础——jQuery(三) 前端jquery是什么
    本文主要从以下几方面介绍jQuery应用中的内容:1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQuery 中的事件7 jQuery 中的动态效果一、 jQuery 节点遍历== next()   //用于获取节点之后的第一个同辈元素
    02-12
  • WEB前端第五十二课——BootStrap组件(四)nav
    1.nav导航  ⑴ 基础结构:    一种是在ulli标签中嵌套a标签的方式;    另一种是在nav标签中嵌套a标签的方式;    也可以使用其它标签代替nav标签或a标签。  涉及到的 class样式如下:!--使用 ul列表创建导航--ul class="nav"li class="nav-
    02-08
  • Web前端JQuery面试题(二) web前端面试题及答案
    Web前端JQuery面试题(二) web前端面试题及答
    Web前端JQuery面试题(二)1.请写出jquery的语法?script type="text/javascript" $(document).ready(function(){// 程序段 })/scriptwindow.onload=function(){ // 程序段}前者效率高$(function(){ // 程序段})2.请问什么是DOM对象?DOM对象,DOM为文本对象
    02-08
  • React 还是 Vue: 你应该选择哪一个Web前端框架?
    React 还是 Vue: 你应该选择哪一个Web前端框架
    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了。本文作者也做了总结:    如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西,请使用Vue    如果你的应用需要尽可能的小
    02-08
  • web前端Vue报错:Uncaught (in promise) TypeError:Cannot read properties of nu解决
    web前端Vue报错:Uncaught (in promise) Type
    目录前言错误提示BUG分析BUG解决总结前言最近在写vue项目 在写自定义分页器的时候报了一个异常 知道错误却一直找不到解决方案苦思冥想后 还是js的基础语法不扎实导致的,在此记录一下解决方案和思路为以后的bug解决之路打下基础错误提示错误内容Uncaught (in
  • web前端笔试归纳——HTML+CSS篇
    根据网上众多资料加上自己的理解,特别整理出笔试试题(有空继续更新)供大家和自己学习,共勉!1.对WEB标准以及W3C的理解与认识答: WEB标准是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的
    02-08
  • 前端基础之jQuery web前端基础
    [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。[2]   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE![3]  它是轻量级的js库(压缩后只有21k) ,这是其它的j
    02-08
  • web前端之HTML中元素的区分 html和web前端
    作为前端人员,我们就是要与各种超文本标记打交道,用到各种不同的标签元素。在使用的时候不知道有没有注意到他们的分类归属?现在就来说一说博主的见解:目前博主总结了三种分类方法:一是按封闭来划分,一是按显示内容来划分,一是按文档流来划分。一、按封
    02-08
  • Web前端教程-HTML及标签的使用
    目录1. HTML简介1.1. HTML文档基本结构2. 标签2.1. 标签语法1.2. 标签的属性和值1.3. 常见的标签1. 基础标签2. 格式标签3. 表单标签4. 框架标签5.图形标签6. 音频视频标签7. 链接标签8. 列表标签9. 表格标签10. 样式/节 标签HTML由标签和属性构成的1.1. HTML
    02-08
点击排行