不要滥用div,保持代码的整洁

这篇文章算是很基础的了.旨在介绍如何保证页面代码的整洁.以维护性.使用有语义的页面标签,减少标签的滥用. 1. 移除不必要的<div>标签嵌套在<form><ul>外面的标签没有必要例子: 2. 使用有语义的标记 <h1><ul><p>等标签,替代<div>,即便样式表丢失,仍然保证页面的可读性. 3. 尽量少的使用<div>标签 4. 代码缩进格式 5. 在</div>结尾处加上这个<d…

【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇对于新手来说DIV CSS布局居中与DIV CSS内容居中常常搞混,摸不着头脑.这里DIVCSS5重点为介绍关于布局居中与内容居中区别.CSS代码.作用.用法,通过基础知识介绍到DIV CSS图文代码案例让大家通俗易懂掌握这两个概念知识点. 对于DIV CSS开发来说CSS布局居中与CSS内容居中是入门碰到最重要需要必须掌握知…

【转】一个DIV+CSS代码布局的简单导航条

原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航条部分效果截图一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局. 一.布局思维思考 - TOP 在实际DIV+CSS布局项目中,一般不会只使用一次…

【转】div居中代码 DIV水平居中显示CSS代码

原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto:其两个样式需要配合使用才能实现div盒子的居中显示排版. 首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中. 实例讲…

div均匀分布代码实例

多个div在同一行以相同间隔分布: 这样的布局效果使用非常的频繁,也就是让多个div在一行分布,并且div于div之间的间隙是一样的,多用在对于产品的展示之用,下面就介绍一下如何实现此中布局,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>div均匀分布代码实例</title> <style type="tex…

fixedBox固定div漂浮代码支持ie6以上大部分浏览器

fixedBox固定div漂浮代码支持ie6以上大部分浏览器 <!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> &l…

window.print打印指定div实例代码

window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢,请看下面的例子首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. 复制代码代码如下: <html> <head> <script language="javascript"> function printdiv(printpage) { var headstr = "<html><head><title>…

弹出DIV锁定代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>提示信息框 </title> <style type="text/css"> a{ color:#000; font-size:12px;text-decoration:none} …

css两个form不换行，两个div并排代码

1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action="left.cgi" name="WEBCAM-TEST"><input type=image src="images/left.jpg"/></form> </td> <td> <form met…

2018.3.29 DIV位置调整代码

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*固定在页面某一位置*/ #a{ width: 20px; …

借助 Resharper 和 StyleCop 让代码更整洁

一:工具安装 Resharper 和 StyleCop 必须安装. Resharper 的配置文件如下:Resharper.zip 请按如下步骤导入, 1: 2: 3: StyleCope 的配置文件如下:Settings.zip 请直接包含到项目中,如: (PS:从源码服务器上获取的解决方案,Leader 已经包含). 二:确保签入代码前已经完成的事情 1:Clean Code 这能确保代码按照 Resharper 配置文件中的规则进行了整理,如下: 2:Run StyleCop 这能…

Web前端：11个让你代码整洁的原则

写Web页面就像我们建设房子一样,地基牢固,房子才不会倒.同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗?我们一起来看一张图片: 上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他的结构让我们看上去清爽,而第二种呢?一看就是糟糕的代码的代码,让人讨厌的代码.那么要怎么样才能写出一个好的代码,整洁的代码呢?下面我们就从…

<读书笔记> 代码整洁之道

概述 1.本文档的内容主要来源于书籍<代码整洁之道>作者Robert C.Martin,属于读书笔记. 2.软件质量,不仅依赖于架构和项目管理,而且与代码质量紧密相关,本书提出一种,代码质量与整洁成正比的观点,并给出了一系列行之有效的整洁代码操作实践,只要遵循这些规则,就可以编写出整洁的代码,从而提升代码质量. 3.该书介绍的规则均来自于作者多年的实践经验,涵盖从命名到重构的多个编程方面,具有很好的学习和借鉴价值. 4.习艺要有二:知和行.你应当学习有关规则.模式和实践的知识,穷尽…

<代码整洁之道>、<java与模式>、<head first设计模式>读书笔记集合

一.前言几个月前的看书笔记,内容全部都是摘自书中比较精辟的句子.笔记都是一段一段的句子,故没有文章的篇幅概念,仅供温习之用,更多详细内容请看原书!!! <代码整洁之道>里面有很多前人编写简洁.漂亮代码的经验.当然书中作者的经验并不100%适合每个人,但大部分都是可借鉴的! <java与模式>这本书内容太多了,我…

从div盒子模型谈如何写可维护的css代码（转）

市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容,细细一看之下才发觉是南辕北辙.经过浩瀚文章搜索发掘下依旧一无所获之后,直接导致了我萌生一股写一篇CSS设计模式的冲动,至此写下这篇文章,其中叙述如有不当之处,也恳请各位提出意见,分享出您宝贵的经验. 在写页面之中,width, margin, padding这三个CSS属性可以说是用到频率最高的几个属性之一.但根据我…

Programming好文解读系列(—)——代码整洁之道

注:初入职场,作为一个程序员,要融入项目组的编程风格,渐渐地觉得系统地研究下如何写出整洁而高效的代码还是很有必要的.与在学校时写代码的情况不同,实现某个功能是不难的,需要下功夫的地方在于如何做一些防御性的代码设计等,以使得自己写出的代码能够应对各种意外的情况. BTW,通过阅读发现了“整洁代码之道”相关的几篇写得还不错的文章,挑出一些感兴趣的地方以提醒自己,提升代码的健壮性.高效性等. (1)整洁代码之道——重构 (文章来源:http://www.infoq.com/cn/articles/cl…

代码整洁之道Clean Code 读后感After Reading

1.有意义的命名名副其实,避免误导做有意义的区分,简单明了2.函数短小,职责单一别重复自己3.注释用代码来阐述可怕的废话4.格式垂直格式,垂直距离,空范围横向格式,水平对齐,缩进5.错误处理使用异常而非返回码先写Try-Catch-Finally语句别返回null值,别传递null值6.单元测试 TDD三定律在编写不能通过的单元测试前,不可编写生成代码只可编写刚好无法通过的单元测试,不能编译也算不通过只可编写刚好足以通过当前失败测试的生成代码保持测试整洁每个测试一…

html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码实现思路如下: <a class="banner" href="/schoolFair/registration#nav"> <a href="#abc">点击跳转</a> <div id=&…

【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下为阴或左为阳又为阴) 2. 太极阴阳图底图#taiji: 巧用边框:宽度0高度300px,左右边框150分别150px:然后圆角处理作圆形. #taiji{ margin:auto; width:0; height:300px; border-left:150px solid…

整洁的 Table View 代码

Table view 是 iOS 应用程序中非常通用的组件.许多代码和 table view 都有直接或间接的关系,随便举几个例子,比如提供数据.更新 table view,控制它的行为以及响应选择事件.在这篇文章中,我们将会展示保持 table view 相关代码的整洁和良好组织的技术. UITableViewController vs. UIViewController Apple 提供了 `UITableViewController` 作为 table views 专属的 view con…

Clean Code 代码整洁之道

军规:让营地比你来时更干净. 整洁代码 Leblanc : Later equals never. (勒布朗法则:稍后等于永不) 对代码的每次修改都影响到其他两三处代码. 修改无小事. 如同医生不能遵从病人的意愿,程序员遵从不了解混乱风险的经理的意愿,也是不专业的做法. 赶上期限的唯一方法,做的快的唯一方法,就是始终尽可能保持代码整洁. 破窗理论:环境中的不良现象如果被放任存在,会诱使人们仿效,甚至变本加厉.==一幢有少许破窗的建筑为例,如果那些窗不被修理好,可能将会有破坏者破坏更多的窗户.最终…

div代码大全 DIV代码使用说明

一.DIV代码语法 - TOP DIV代码是放入小于与大于符号内,即“<div>”. DIV是一对闭合标签,即“”开始,“结束”的盒子标签. 语法结构: <div>我是内容</div> 说明:div代码有开始就要必须有闭合.使用“<div>”开始,“/div”闭合. 二.DIV嵌套DIV - TOP div标签内可以嵌套无限级DIV. <div>单独DIV</div> <div class="box">…

《代码整洁之道》&《程序员的职业素养》

这是why技术的第32篇原创文章春节期间读了两本技术相关的书籍:编程大师Bob大叔的<代码整洁之道>和<代码整洁之道:程序员的职业素养>. <代码整洁之道>出版于2010年,其内容主要是偏向于技术的"技".全书都在说一些如何让代码更加整洁的方法和规则. <代码整洁之道:程序员的职业素养>出版于2016年,其内容主要偏向于技术的"术".全书内容和代码整洁关系不大,更多的是阐述软件开发者的专业精神.书中给出了很多务实性的…

代码之美——Doom3源代码赏析2

http://www.csdn.net/article/2013-01-17/2813778-the-beauty-of-doom3-source-code/2 摘要:Dyad作者.资深C++工程师Shawn McGrathz在空闲时翻看了Doom3的源代码,发出了这样的惊叹:“这是我见过的最整洁.最优美的代码!”“Doom 3的源代码让我对那些优秀的程序员刮目相看.”因此有了本文. 最少模板 id“犯了不少C++的禁忌”,他们重写了所有需要的STD函数.我个人对STD爱恨交织.在Dyad,我调…

python里用变量命名改善代码质量

编程时,总会遇到各种各样的变量,取一个好的变量名能够有效提高代码的可读性,而且python是一种,动态类型的语言,良好的变量名,能够在编写代码或者再次阅读代码时提高效率. 1. 变量名不要太宽泛,要有描述性在可接受的长度内,变量名能把它所指向的内容描述的越具体越好. BAD:day, task GOOD:day_of_week, task_todo 这样在读到变量名的时候,就能更精确的知道变量代表的内容 2.变量名最好能让人猜出什么类型 python中常用的变量类型有布尔类型,数字类型,列表类…

代码之髓读后感——名字&作用域&类型

名字和作用域为什么要取名看着代码中遍地都是的变量,函数,或多或少的我们都应该想过,为什么会有这些名字呢? 我们知道,计算机将数据存储到对应的物理内存中去.我们的操作就是基于数据的.我们需要使用这些数据,所以一个问题就是如何寻找到这些数据.一个较为直接的方式就是为它起个名字. 联系现实生活中的,最典型的就是图书馆.一本本书,一块块数据.为了查找,我们使用的是对各个数据地址进行编码.一一映射到一组唯一的数据上,以此便于查找的唯一替代彼不便于查找的唯一. 仔细想来,这种替代的方法似乎和哈希函数的思…

尽量少嵌套无用的div；外部文件尽量使用link而不要使用用@import

最近的工作又学到了很多东西,在这里记录一下. 1,尽量少嵌套无用的div,这个问题领导很严肃的跟我提过很多次,因为我很喜欢用很多div,而且有很多div都是无存在意义的.后来领导给了我一些资料,我看了一下,发现这样做确实存在很大的问题,原因如下:(以下蓝底文字摘自搜狐WEB标准) 2.1 节约运营成本采用 WEB 标准制作,我们可以做到表现和形式及内容的分离,我们采用XHTML 语言来表现(数据),用CSS 来控制(页面元素呈现的)形式.写的好的页面,XHTML 代码中基本上都是用户要看的数据…

史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中总结

史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经…

【转】JavaScript常用代码书写规范

javascript 代码规范代码规范我们应该遵循古老的原则:“能做并不意味着应该做”. 全局命名空间污染总是将代码包裹在一个立即的函数表达式里面,形成一个独立的模块. 不推荐 1 2 3 var x = 10, y = 100; console.log(window.x + ' ' + window.y); 推荐 1 2 3 4 5 6 ;(function(window){ 'use strict'; var x = 10, y = 100; …

用div加css做表格去掉外围边框

通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a><div class="td"></div></a> <a><div class="td"></div></a> <a><div class="td&…

【不要滥用div,保持代码的整洁】的更多相关文章