随笔分类 -  [33]DIV CSS

• z-index 应用简单总结
  摘要：z-index 应用简单总结做过页面布局的同学对z-index属性应该是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。简单演示 两个DIV，第二个向上移动50px，正常情况应该是这样的第二个div遮住了第... 阅读全文
  posted @ 2013-08-19 09:21 HackerVirus 阅读(240) 评论(0) 推荐(0)
• 来认识下less css
  摘要：来认识下less css简介感觉自己都out了，跟不上web时代的潮流了，前不久才刚接触这玩意，发觉lesscss在某些方面还挺有用的，说白了这东西就是一种动态的样式语言，语法类似于css，可以像java那样进行编译，生成你想要的对应css，并且less css扩展了css的动态行为。如，它可以设置变量（variables）、支持混合书写模式（mixins）、支持嵌套规则（nested rules）、也可像js那样进行属性值的操作（operations）、像js函数那样传递参数（functions）、 也具有变量的作用域（scope）等。运行环境lesscss可以在客户端，也可称浏览器端（IE 阅读全文
  posted @ 2013-08-15 21:37 HackerVirus 阅读(196) 评论(0) 推荐(0)
• 自定义html标签
  摘要：自定义html标签 （觉得页面全是div 的解决办法 来个个性化）办法一（来源于 让ie支持html5标签的方法）：在ie9以前如果要自定义要使用document.createElement的方法自定义一个helloworld的标签把直接上代码123456710111417181920754756765212223所以在js加了ie9的判断办法二：(来源于：HTML自定义标签-采用xml标记) 直接上图ps：我发现只在ie9+以上有效 而且html里面的xmlns属性也是多余的 ，不知道我哪里写错啦请各位看官评论分类:wp8标签:Html,Css 阅读全文
  posted @ 2013-08-13 15:57 HackerVirus 阅读(394) 评论(0) 推荐(0)
• 前端编码规范之CSS
  摘要：[等你来补充]前端编码规范之CSS2013-08-09 14:57 by 靖鸣君,268阅读,6评论,收藏,编辑 "字是门面书是屋"，我们不会去手写代码，但是敲出来的代码要好看、有条理，这还必须得有一点约束~ 团队开发中，每个人的编码风格都不尽相同，有时候可能存在很大的差异，为了便于压缩组件对代码进行压缩以及书写样式的规范统一和美观，很有必要大家一起来研究一套基本规范（模板）！ 我先抛砖引玉。（禁止）、（必须）等字眼，在这里只是表示强调，未严格要求。前端规范之CSS1.tab键用（必须）四个空格代替 因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占 阅读全文
  posted @ 2013-08-09 17:37 HackerVirus 阅读(148) 评论(0) 推荐(0)
• CSS学习小记
  摘要：搜狗主页页面CSS学习小记1.边框的处理要形成上图所示的布局效果，即，点选后，导航下面的边框不显示而其他的边框形成平滑的形状。相对于把导航的下面边框取消然后用空白覆盖掉下面搜索栏的边框比较而言，sougou有很好的方法来实现它。我们设定这整个nav选择区域为#nav_container，然后给被选择了的nav加上一个class：current，我们下面的logo+输入框为：sog_div，整个部分的外部容器为：#search我们看看sogou是怎么实现的：css脚本：#nav_container{ text-align:center; line-height:24px; height:26px 阅读全文
  posted @ 2013-08-09 09:48 HackerVirus 阅读(172) 评论(0) 推荐(0)
• CSS样式基础知识
  摘要：CSS样式基础知识CSS样式概述CSS是Cascading Style Sheet 的缩写。译作“层叠样式表单”。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。引用位置作为元素的style特性的值在元素内部，位于元素中使用引用外部样式选择器指定声明应用于哪个或哪些元素，不同元素之间用逗号隔开，例如：td {width:36px;}声明 用于设置如何样式化在选择器中引用的元素属性 它是该规则希望影响的所选元素的属性值 它是属性的说明继承 应用于某个元素的属性经常会被它的子元素所继承，可以针对特定的元素设置样式来覆盖已继承的样式通用选择器 *{}类型选择器 ... 阅读全文
  posted @ 2013-08-02 13:50 HackerVirus 阅读(198) 评论(0) 推荐(0)
• 如何实现一个通用的IHttpHandler 万能的IHttpHandler HttpWebRequest文件上传
  摘要：昨天遇到一个比较奇怪的需求，大致是需要在服务器上部署一个http服务，但是服务的具体功能不知道，以后在客服端实现。这里介绍一下系统背景，有一个系统运（部署在美国）行了很多年了，给系统产生了很多文件，现在需要把该系统的文件（依据数据库中的记录）来做相应的archive，做了后发现里面还有一些独立的文件（不与数据库记录相关），那么这时我们需要删除这些独立的文件，或者把它们remove到其他地方，需要得到这些文件的list。后来想了想以后会不会还有别的什么需求啊，所以就想做一个通用的HTTPhandler了。这里说明一下：production时在美国，Archive在香港；在我们大陆的系统权限放的都 阅读全文
  posted @ 2013-08-02 13:40 HackerVirus 阅读(295) 评论(0) 推荐(0)
• CSS：CSS学习总结
  摘要：CSS：CSS学习总结背景CSS是一种声明式的语言，学好CSS的难度甚至大于学好一门服务器语言（我个人的感觉），这周在学习CSS，就记录一下学习经验。1、规则声明顺序因为CSS的样式具备层叠性和继承性，为了最小化代码量，规则的声明可以按照如下顺序：常用标记常用类布局类导航类表格类表单类组件类2、盒子模型、文档流、定位和浮动一定要清楚盒子模型：浏览器把每种标记都当做一个盒子，有两种盒子（内联和框），他们在文档流中的布局模式是不同的。文档流：框盒子会被从上到下的布局，内联盒子会被从左到右、从上到下的布局。定位：可以修改框盒子的定位方式，static（正常的文档流中的位置）、absolute（相对于 阅读全文
  posted @ 2013-08-02 13:35 HackerVirus 阅读(164) 评论(0) 推荐(0)
• 三种方式实现动态元素水平居中
  摘要：三种方式实现动态元素水平居中今天临下班的时候隔壁组的同事拉住我跟我讨论一个问题，想要实现的功能如下：在一个div中有多个水平排列的div，但这些div的宽度不定，并且可以动态增加或者减少。要求这些div组始终居中排列。如图：看了一下他的代码，是用浮动来做的，但是所有的div都靠左排列。因为块下班了，两个人急急忙忙调试了一会儿没能得到正确的结果，于是下班后想好好研究一下。最终找到了三种实现的方式，写出来跟大家一起讨论讨论。尝试一：使用Float+margin:auto+js我就沿着他的float思路继续思考。如果使用float的话，被浮动的元素始终会靠左或者靠右排列，只有将其父元素居中，这些元素 阅读全文
  posted @ 2013-08-01 11:46 HackerVirus 阅读(494) 评论(0) 推荐(0)
• 使用IE滤镜实现css3中rgba让背景色透明的效果
  摘要：使用IE滤镜实现css3中rgba让背景色透明的效果让背景透明，听上去不是挺容易的么？让背景色透明，很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了，OK，看看这个例子。html: 电话： css:html, body { margin: 0; padding: 0;}body { background: url('荷花.jpg') no-repeat;}.main { width: 300px; height: 100px; padding: 20px;... 阅读全文
  posted @ 2013-07-30 14:58 HackerVirus 阅读(234) 评论(0) 推荐(0)
• CSS：用Less实现栅格系统
  摘要：CSS：用Less实现栅格系统背景公司一直没有专职的前端和美工，Javascript相对来说我熟悉一点，CSS+HTML有四五年没有搞过了，最近要学一下，招聘或和美工配合的时候会有用处。收集的资料CSS教程：http://www.w3school.com.cn/css/index.asp。LESS教程：http://www.lesscss.net/。SAAS教程：http://sass-lang.com/。Bootstrap教程：http://cnbootstrap.com/。栅格教程：http://www.see-source.com/blog/300000033/273。知识总结CSS盒子 阅读全文
  posted @ 2013-07-25 09:37 HackerVirus 阅读(342) 评论(0) 推荐(0)
• CSS布局：Float布局过程与老生常谈的三栏布局
  摘要：CSS布局：Float布局过程与老生常谈的三栏布局原文见博客主站，欢迎大家去评论。使用CSS布局网页，那是前端的基本功了，什么两栏布局，三栏布局，那也是前端面试的基本题了。一般来说，可以使用CSSposition属性进行布局，或者使用CSSfloat属性布局。前者适合布局首页，因为首页上的内容往往可以完全控制。后者适合布局模板，模板中填充的内容你没法控制——比如，在编辑wordpress模板时，你肯定没法考虑每篇博文的长度。这篇博文，就是总结一下怎样使用CSS中的float属性进行布局，其实网上有很多讨论这个话题的文章了，但我觉得都没说到点子上。那就来老生常谈一次吧，CSS之Float布局。D 阅读全文
  posted @ 2013-07-22 12:44 HackerVirus 阅读(216) 评论(0) 推荐(0)
• CSS Z-INDEX属性使用过程中遇到的问题
  摘要：CSS Z-INDEX属性使用过程中遇到的问题z-index属性在web开发中会经常使用，其主要的作用简单的说就是把元素的position设置为absolute、fixed之后，可以调节元素在文档上的层级关系。比如经常见到的dialog，mask的实现，dialog的z-index肯定要设置的比mask大。写这篇文章的目的主要是想记录下遇到的有关z-index可设置的最大值的问题。下面先来看以下代码运行的结果： 这个demo的目的是查找z-index在各主流浏览器里面可以设置的临界值（最大值），首先要说下为什么会有临界值。在平时的开发过程中曾经遇到过这样的情况，比如有A、B两个元素，B元素要. 阅读全文
  posted @ 2013-07-20 21:50 HackerVirus 阅读(545) 评论(0) 推荐(0)
• CSS 实现的各种球体效果
  摘要：CSS 实现的各种球体效果【附在线演示】CSS 可以实现很多你想不到的效果，今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现，第一种是使用大量的元素创建实际的 3D 球体，这种方法有潜在的性能问题；另外一种是使用CSS3渐变和阴影特性来实现，实现方法简单，效果精美。 为保证效果，请使用 Chrome、Firefox、Safari 等现代浏览器浏览。您可能感兴趣的相关文章Metronic – 基于 Bootstrap 响应式后台管理模板Verlet-js：超炫的开源 JavaScript 物理引擎推荐Transit – 超平滑的 CSS 过渡和变换动画效果插件Debuggex . 阅读全文
  posted @ 2013-07-17 11:28 HackerVirus 阅读(3722) 评论(0) 推荐(0)
• CSS选择器、优先级与匹配原理
  摘要：CSS选择器、优先级与匹配原理为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好废话就不多说了CSS 2.1 selectors, Part 1计算指定选择器的优先级:重新认识CSS的权重通配选择符的权值 0,0,0,0标签的权值为 0,0,0,1类的权值为 0,0,1,0属性选择的权值为0,0,1,10,0,1,0伪类选择的权值为 0,0,1,0伪对象选择的权值为 0,0,0,1ID的权值为 0,1,0,0important的权值为最高 1,0,0,0使用的规则也很简单，就是选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。虽然很简单，但如果书写的时候没有注意 阅读全文
  posted @ 2013-06-26 23:24 HackerVirus 阅读(195) 评论(0) 推荐(0)
• 11 款最好 CSS 框架
  摘要：11 款最好 CSS 框架 让你的网站独领风骚网页设计和发展领域已经成为竞争激烈的虚拟世界。想要在网络的虚拟世界中生存，仅有一堆静止的在线网络应用是远远不够的，网页必须要有很多功能，配以让人无法抗拒的设计。网页编码一定要合适、精确，才能保证不发生错误，使网页能在浏览器上轻松加载出来。此外，还要在网页设计中留出足够的空间以充许日后的功能增加和改善，这样做才能让更多与时俱进的特征能加入到网页设计中。网页设计员和研发者可用的最好工具之一便是 CSS 框架，它提供高端解决方案来适应高端网页研发需求。CSS 框架减化了编码结构、减少了编码时间，为研发者带来网页设计的便捷性。原文地址：http://www 阅读全文
  posted @ 2013-06-21 23:22 HackerVirus 阅读(306) 评论(0) 推荐(0)
• 《精通CSS：Web标准解决方案》
  摘要：《精通CSS：Web标准解决方案》一、基础 1.1设计代码的结构 1.1.1标记简史 千禧年之际，混乱的Web设计业迎来了CSS，标记返璞归真，文档形成语义趋势。 ①ID和类名 @HTML4作为简单的文档标记语言被创建，而不是界面语言，故没有用于内容区域或导航栏等的专有元素； HTML5则解决了部分问题，如header、nav、article、section和footer等结构性元素，以及data input和menu元素等新UI特性。 @次优的解决方案是使用这些名称作为ID和类名的命名约定，以此迎接HTML5，并为CS... 阅读全文
  posted @ 2013-05-11 21:03 HackerVirus 阅读(179) 评论(0) 推荐(0)
• 【原】提高网站加载速度的3项黄金守则
  摘要：【原】提高网站加载速度的3项黄金守则如何优化网页加载速度是每个前端开发工程师需要了解的，也是前端开发工程师需要具备的基本条件。优化网站加载速度的原理主要是减少网站文件的大小，减少HTTP请求数。网站文件越小，浏览器加载页面会比较轻松，打开页面的速度也会提升；一个HTTP请求，对页面打开速度造成的延时大概是0.01秒，HTTP的请求数越多，网站打开的速度就会越慢。那么如何减少网站文件的大小，减少HTTP请求数呢？笔者做前端(重构方向)有2年多了，这里分享3项优化网站加载速度的方法，希望能给有需要的同学以及刚接触前端的初学者带来帮助~comm on！一起来优化你的网站~1、优化图片使用Css Sp 阅读全文
  posted @ 2013-04-02 22:53 HackerVirus 阅读(106) 评论(0) 推荐(0)
• canvas版简单时钟与css3版漂亮时钟
  摘要：小练一下canvas版简单时钟与css3版漂亮时钟无聊时候用canvas练了一下时钟，但感觉画面不是很舒服，可能canvas用的不是很精炼。随后又用css3重写了下，还是蛮漂亮的，呵呵，先看效果图吧；canvas版:CSS3版：在线浏览：http://runjs.cn/detail/a9lrockocanvas版源代码:?<!DOCTYPE html><html><head><metacharset="utf-8"><title>canvas时钟</title><style>body{bac 阅读全文
  posted @ 2013-03-29 23:56 HackerVirus 阅读(306) 评论(0) 推荐(0)
• CSS浮动(float,clear)通俗讲解
  摘要：CSS浮动(float,clear)通俗讲解很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。写在前面的话： 由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。 小菜水平有限，本文仅仅是入门教程，不当之处请谅解！ 本文以div元素布局为例。教程开始： 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： 可以看出，即使div1的宽度很小，页面中一行可以容下d 阅读全文
  posted @ 2013-03-27 16:14 HackerVirus 阅读(104) 评论(0) 推荐(0)

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3