编写HTML和CSS几点心得

【编写HTML和CSS几点心得】的更多相关文章

编写HTML和CSS几点心得

HTML代码优化表单域用fieldset包起来,并用legend说明其用途(注意在css初始化的时候把fieldset的border设为0,把legend的display设为none) 每个input标签要用label来标注文本,并为每个input设id,用for关联. 为了提高搜索引擎友好性,要减少table标签使用.但是对于呈现二维数据,table却是首选,当然我们的优化方法是表格的标题用<caption></caption>包裹,表头用<thead></t…

CSS开发框架技术OOCSS编写和管理CSS的方法

目前最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似技术(如BEM).这些方法试图对CSS采用面向对象的编程原则.样式语言与面向对象的设计原则在概念之间存在一定的问题.欠缺经验的人员可能不会注意到这些微妙的东西.拥有一个编写和管理CSS的方法比什么都要更好.一些开发实践不利于语义化质量和长期的可维护性.讨论一些被提倡的“CSS框架方法”问题.如何更好的解决这些问题. 语义化在计算机科学中只有两硬东西,缓存失效和命名的事件. 当编写HTML,有三种主要的方式表达内容.Web界面或应用程序…

配置eclipse编写html/js/css/jsp/java时自动提示

配置eclipse编写html/js/css/jsp/java时自动提示步骤: 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zjava 点击apply按钮如图: 2.继续打开JavaScript→Editor→Content Assist 修改Auto Activation triggers for JavaScript的值为:zjs …

CSS:命名规范心得分享

一个好的命名习惯(当然这里指的并不仅仅是CSS命名).不仅可以提高开发效率,而且有益于后期修改和维护. 假设我们当前使用的命名方式都是约定成俗的,所有人都是这样写,那么你去到一个新团队,或者别人来接手你的工作,都可以大大缩短去阅读别人代码的时间. 一个规范化的命名,不用说,只要想想就能体会到其中的好处了. CSS:命名规范心得分享板块(Plate) 命名(Naming) 说明(Description) 主容器 wrapper 页面上最大的外部容器,如无特殊需求,不推荐使用页面头部 hea…

编写高效的CSS选择符（节选）

最右边优先 css选择符是从右向左进行匹配的. 样式系统从最右边的选择符开始向左匹配规则.只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出. 编写高效选择符指南避免使用通配规则除了传统意义上的通配选择符之外,相邻兄弟选择符.子选择符.后代选择符和属性选择符都可以归纳为“通配规则”.推荐仅用ID.类和标签选择符. 不要限定ID选择符在页面中一个指定的ID只能对应一个选择符,所以没有必要添加额外的限定符. 不要限定类选择符不要用具体的…

6种编写HTML和CSS的最有效的方法

感谢HTML5和CSS3,以及JavaScript,前端开发者有了大大的用武之地.大家都在用很多的工具和技术来武装自己,以加快前段的开发. 本文分享了6中最有效的方法,希望能提供你的效率,为你节约时间. 1. Dynamic CSS(动态 CSS) 如果你想加速你的CSS代码编写,那么你需要学习并掌握动态CSS.大部分的动态CSS增加了nested riles, variables, mixins, selector inheritance功能,这里提高代码的利用率. 2. HTML snipp…

css布局实践心得总结

一.摘要: 今天在写一个页面,对css中的BFC(块级格式化范围)有了一点体会,今天把遇到的问题和解决方案总结下来,额外还总结一下强大的负外边距的使用心得. 二.总结:…

如何编写高质量CSS

虽然写过很多css代码,但每次动手写都让我痛苦不堪,如何组织好那一堆堆的代码,如何提高代码复用率,甚至如何命名类,这些都让我纠结.下面的浅显的谈一谈在看了<编写高质量代码>中的html和css部分以及搜索网络上一些相关资料对编写高质量的HTML和CSS的一些基本认识. HTML 在说css之前必须先说说html ,没有它css是浮云.就像是要建栋别墅,光有那些装饰品(css)没有房子基本的结构(html)是不可能造出真正好看又实用的别墅的.其实html结构并不是简单的table或一堆堆的div…

使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示。

我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zjava 点击apply按钮如图: 2.继续打开…

配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示。

我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zjava 点击apply按钮如图: 2.继续打开…

Pure.css网格系统学习心得——图片的响应式以及应用填充和边框网格单位的学习

今天学习了pure.css可定制的网格系统,pure默认的网格系统是移动先行,如果我们想在小屏幕上有网格只要用pure-u-*就可以了,下面来说一下它的主要用法! <div class="pure-g"> <div class="pure-u-2-5">五分之二</div> <div class="pure-u-1-5">五分之一</div> <div class="pu…

css基础和心得（三）

OK!接下来我们分别说这些元素的意义.首先,什么是块级元素?在html中<div>,<p>,<h1>,<form>,<ul>和<li>就是块级元素.(ul标签和li标签还记得是什么意思吧?)设置display:block就是将元素显示为块级元素.如:a{display:block;}这里就是将内联元素a转换为块状元素,从而使a元素具有块状元素的特点.那么它有哪些特点呢?1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(真特…

css基础和心得（四）

现在来说相对定位: 如果想为元素设置层模型中的相对定位,需要设置position:relaive(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中便宜位置.相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left.right. top.bottom属性确定,偏移前的位置保留不动.那么,什么叫"偏移前的位置保留不动呢?"就是div元素相对于以…

css基础和心得（二）

css中的某些样式是具有继承性的.它允许样式不仅应用于某个特定html标签元素而且应用于其后代.如: p{color:red;} <p>dsffd<spans>sdfasdf</span>sd</p> 注意有些css样式是不具有继承性的.如border:1px solid red;这里的设计很合理 css有个特殊性,标签的权值为1,类选择符的权值为10,id选择符的权值最高为1 00. 注意,还有一个权值比较特殊,继承.继承也有权值但是它是最低的. 突然…

css基础和心得（一）

css开始 p{ font-size:12px; color:red; font-weight:blod } p为选择符p{}又称选择器,指明网页中要应用样式规则的元素.属性和值之间用 ":"分隔.注意:最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号:为了使用样式更加容易阅读,可以将每条代码写在一个新行内. css样式分为:内联式.嵌入式和外部式内联式:css样式表就是把css代码直接写在现有的html标签中,如: <p style=&qu…

优雅地实现CSS Animation delay心得

话不多说直接开讲: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画属性上加上delay(延迟,使得这个延迟时间 = A元素动画的加载时间) 即:animation : bmove .7s .7s 1; (这里的第二个.7s即delay时间0.7秒) b的动画过程代码如下: @keyframes bmove { 0% { margin-top: 100%; opacity: 0 } 100% { ma…

编写高效的 CSS 选择器

高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候. 下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站.但是,实践出真理,这和你是在创建下一个Facebook,还是写一个本地的展示页面都没有关系,多知道一点总是好的. CSS选…

编写html与js交互网页心得：编写两个按钮切换显示不同的图片

第一步:先建立一个html网页,如下: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <div> <input class="btnhy1" type="button&quo…

配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示

我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zjava 点击apply按钮如图: 2.继续打开…

编写高效的CSS选择器

高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能.然而,我们可以不考虑当你自认为会的太少而使用了低效的CSS这种情况. 这些规则只真正用在性能要求很高的网站上,这些网站对速度要求很高,任何一个页面可能含有成百上千个DOM元素.但是实践出真理,不管你是在打造下一个facebook 还是在开发一个本地的展示网页,多学点总是好的.... CSS 选择器…

[转] 编写高效的 CSS 选择器

高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候. 下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站.但是,实践出真理,这和你是在创建下一个Facebook,还是写一个本地的展示页面都没有关系,多知道一点总是好的. CSS选…

Eclipse配置编写HTML/JS/CSS/JSP页面的自动提示

我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zjava 点击apply按钮如图: 2.继续…

使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示

1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zjava 点击apply按钮如图: 2.继续打开JavaScript→Editor→Content Assist 修改Auto Activation triggers for javaScript的值为:zjs 点击apply按钮如图: 3.继续打开web→html Files→Edito…

Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示

地址:https://blog.csdn.net/AinUser/article/details/64904339 使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for Java的值为:zjava 点击apply按钮如图: 2.继续打开JavaScript→Editor→Content Assist 修改…

CSS| 學習心得

resize :both , 只有overflow設置為auto時, 才能起作用???…

前端开发入门到进阶第一集【使用sublime快速编写Html和Css】

1,安装sublime编辑器,下载地址:http://www.sublimetext.com/3 2,要使用sublime的插件机制必须安装package control:https://packagecontrol.io/installation 如果上面package control网址打不开,直接复制下面的内容: import urllib.request,os,hashlib;h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced…