css样式分离jquery行动

“当你不创造东西时,你只会根据自己的感觉而不是能力去看待问题。” – WhyTheLuckyStiff
掌握某个东西需要10年或10000个小时,也就是汉语中的“十年磨一剑”,所以不用着急。
成功哲学很简单:Do Things, Tell People!

如果你没有任何能够让人重视的技能,那就学一些。这是你的未来。我们有Khan学院维基百科软件学院,以及整个世界的知识宝库中你的手边。使用它们。然后做一些能够拿出来说的东西。让它很酷。让它很有趣。花时间去做它。不要有任何顾忌。即使它是你曾经做的最没有价值的东西,只要你觉得它还值得一提,那就把它做出来。这很容易,因为你在做你认为很酷的东西,你有兴趣,如果发现它确实没有价值,那更好,因为你再不需要花时间去维护它了!

我们在html文档里定义css样式渲染类名用的是class这个属性。提到class,在编码语言里是一个默认的“类”的代名词。也就是说,其实css的作者其实在创作css的时候其实就是基于“类”来考虑的,要不然也不会用class这个词作为css样式的属性名。
.con-text {
padding: 8px 10px;
background: red;
border: 1px solid #CCC;
color: blue;
}
<p>test</p>
如果我们需要多个这样类似的p,但又要求文本颜色不一样的话,会怎么办,重写多个类? .con-text1, .con-text2 … ?
span style=”white-space:pre;”> 显然太不现实,也太过冗余,所以或许我们需要用的面向对象中一个重要的思路–抽像公共接口。或许我们可以这么做:
.normal-text {
padding: 8px 10px;
background: red;
border: 1px solid #ccc;
}
.red {color: red}
.blue {color: blue}
<p class=”normal-text red“>test1</p>
<p class=”normal-text blue”>test2</p>
是的,这样做没错,而且很好,可是慢着,如果我们还要要求每个p不仅文本颜色不一样,背景色也不一样。。。怎么办?有人会想,我们照上面的思路继续抽象就好了。比如:
.normal-text {
padding: 8px 10px;
border: 1px solid #ccc;
}
.bg-red {background: red}
.blue {color: blue}
<p  class=”normal-text bg-red blue“>test</p>
 我们继续纠结下去,我们要border也不同,甚至padding也不同,怎么办?还继续分离吗?如果我们钻个牛角尖,我们对css进行彻底的分离,最终的结果会全是类似于
.bg-red {background: red}
.blue {color: blue}
.pad-t8 {padding-top: 8px}
.pad-l10 {padding-left: 10px}
最终的结果就不是面向对象了,而是面向属性了…是的,分离的越彻底,开发时的效率会越高,css文件也会越小越精简。可是别忘了这样做的后果是可能一个元素需要写5个,甚至10个并列的css类名去渲染
那这样,我们所谓的“类”意义何在,这样又和写style内联样式有什么分别?我们维护时是不是要在html文档里满篇去找要几十上百个类名去增删改??
所以css分离是好的,可是过度的分离是不行的。如何把握尺度和权重才是最重要的:
1.css面向对象请面向通用的对象。比如box,一个网站可以有多个box样式,boxA,boxB…boxF…等等,对应响应的boxA-tit,boxB-tit…等等,为这些通用的对象抽离公用的样式
2.可以为全站都通用的样式进行抽离:比如清除浮动
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
.clearfix {zoom: 1;}
/* End hide from IE-mac */
3.可以为栅格化的布局样式做抽离, 如:col-a{width:..}, clo-b {width: ..}等等
4.需要的时候局部的面向属性的绝对分离也是可以的,但请在有需要的时候局部使用。
5.建议class的并列类名不要大于3个,否则就需要考虑是否应该稍微聚合一下了。

构造函数/原型 的混合方式来构建JS

var slider = function () {
var init = function () {
this.pos();
}
init.protorype = {
pos : function () {
//TODO
},
anim : function () {
//TODO
}
auto : function () {
//TODO
}
}
return init;
}();
/* init */
new slider();

1)css并没有难懂的地方,关键在于积累。多去了解为什么要这么写css。比如几个很重要的css2.0中的属性,position,display,float,overflow 之类的,它们常用的值和应用场景为什么要这么用,这么去组合,多思考对于攻克布局有莫大的好处。

2)学javascript可以尝试从一些简单的可实现的东西开始,比如怎么操纵一个dom元素,改变它的各种东西,让它动起来。然后过渡到写组件。我这里建议一定开始要从学习原生的javascript语言开始。当你开始尝试写组件的时候,就一定要开始注意代码的结构了。养成好的编码习惯非常重要,会极大的推动后续的学习进度。所以这个阶段建议找 国内外用原生js代码编写的 优秀的,高代码质量的js组件做参考。 思考为什么别人要这么写,这么去组织代码

3)对js有一定认知之后,一定要深入系统的去了解语言底层,这时候建议买好的书系统学习,象什么犀牛书之类的,我就不多说了。了解语言底层的逻辑很重要。

4)当过了第三阶段之后,我建议可以尝试着阅读国内外优秀的js底层基础库的源码,并尝试自己实现一套。不用奔着想“造轮子”有多少人用的想法。而是实现这个架构和其中的代码细节对于自己的学习非常重要。比如我自己也有一套粗糙的js基础库 https://github.com/hongru/Leta ,但我并没打算将它应用出去,因为我它并没那么优秀,对我的意义在于实现它让我了解了国内外主流js基础框架的实现思路和大体架构。同时又是一份沉淀,当我某时想用某段代码时,直接找出来就能用。

5)在这个阶段,我强烈建议一定要及时补充后端语言能力和思路,了解别的语言,别的框架的架构和api实现逻辑。相互辅助,因为这时候你学其他的语言,入门也都变的容易,同时别的语言又能反过来加深对当前知识的理解。

6)再往下就可以根据自己的兴趣方向或者工作需求继续学习了。比如可以尝试继续基础技术,做基础工具,架构,平台。或者根据自己兴趣专注一个或几个方向,比如canvas,webgl之类的,或者在业务架构,项目深度优化上有所建树。

Advertisements

html

The <span> tag is used to group inline-elements in a document.

The <span> tag provides no visual change by itself.

The <span> tag provides a way to add a hook to a part of a text or a part of a document.

When a text is hooked in a <span> element, you can style it with CSS, or manipulate it with JavaScript.

position:absolute;

Value Description Play it
static Default. Elements render in order, as they appear in the document flow Play it »
absolute The element is positioned relative to its first positioned (not static) ancestor element Play it »
fixed The element is positioned relative to the browser window Play it »
relative The element is positioned relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position Play it »
inherit The value of the position property is inherited from the parent element

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive(in front of) or negative(behind) stack order:

display:block;

Value Description Play it
none The element will not be displayed at all Play it »
box (or flex-box) The element is displayed as a block-level flex container box
block The element is displayed as a block-level element (like paragraphs and headers) Play it »
flex The element is displayed as a block-level flex container box
inline This is default. The element is displayed as an inline-level element (like span) Play it »
inline-block The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
inline-flex The element is displayed as an inline-level flex container box
inline-table The element is displayed as an inline-level table
list-item The element is displayed as a list-item, which means that it has a bullet in front of it Play it »
table The element is displayed as a table
table-caption The element is displayed as a table caption
table-cell The element is displayed as a table cell
table-column The element is displayed as a table column
table-column-group The element is displayed as a table column group (like <colgroup>)
table-footer-group The element is displayed as a table footer row group
table-header-group The element is displayed as a table header row group
table-row The element is displayed as a table row
table-row-group The element is displayed as a table row group
inherit The value of the display property will be inherited from the parent element

“CSS Reset” theory

* {
margin: 0;
padding: 0;
}

It removes all default margin and padding for every object on the page, no holds barred, regardless of browser. This provides a nice clean slate for design and ensures that all spacing is intentional, explict, and ubiquitous across browsers. There is no reason not to do this.

Some people like to include border: 0; as a part of it, but it has been found to not be effective in all situations (including the annoying  borders>, so why bother…

If you wanted to go completely bat poop crazy on reseting every possibly everything, check this out.

helps keep your designs consistent across browsers, a very good thing. This technique works on all browsers, so I never really considered any negatives.

this post by Christian Montoya who points out:

This eliminated all differences in padding and margin across browsers so I was free to go about styling my page. Unfortunately, this isn’t a good practice. It’s very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.

In fact, if you are using Firefox or Opera to view this site, you will notice that the “Say it!” button that you need to press to submit a comment has been stripped of it’s nice default style and now just looks like normal text with a border around it. Not very ideal. If you are using Safari, it uses the default Safari-style button, which is nice.

via http://css-tricks.com/reset-all-margins-padding/

CSS – style

Layout is a ‘container system’. As such it has no ‘style’ of its own.
But you can add any theme-classes you want. For example, to apply the ui-widget style from themeroller, just add the classname to your pane
element(s)…

<div class=”ui-layout-west  ui-widget“>

The UI CSS Framework icon-set DOES have icons suitable for Layout, including a ‘gripper’ and arrows for the resizer/toggler elements, plus arrows, plus/minus, pin/unpin and other useful icons for buttons.
Just add a span or other element and apply the appropriate class and/ or CSS to it.
<span class=”ui-icon-pin-s“></span>

Masonry Pluginminimizes vertical gaps between the images

<img src=”smiley.gif” alt=”Smiley face”> //The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

ul.iw_thumbs li{

    float:left;
    margin:5px;
}
.iw_wrapper{

    width:70%;
    margin:30px auto 100px auto;
    position:relative;
}
  • margin: 10px 20px;
    top and bottom margins are 10px, right and left margins are 20px.
  • margin: 10px 20px 30px;
    top margin is 10px, right and left margins are 20px, bottom margin is 30px.
  • margin: 10px 20px 30px 40px;
    top margin is 10px, right margin is 20px, bottom margin is 30px, left margin is 40px.

The images will have a thick white border and some box shadow:

1
2
3
4
5
6
7
8
9
10
11
12
13
ul.iw_thumbs li img{
    border:7px solid #fff;
    cursor:pointer;
    position:relative;
    -moz-box-shadow:1px 1px 1px #aaa;
    -webkit-box-shadow:1px 1px 1px #aaa;
    box-shadow:1px 1px 1px #aaa;
}
ul.iw_thumbs li img:hover{
    -moz-box-shadow:1px 1px 7px #777;
    -webkit-box-shadow:1px 1px 7px #777;
    box-shadow:1px 1px 7px #777;
}

give the whole wall a scattered look 

add some chaos to the list elements and the images. We will adjust the margin of some list elements by selecting specific children.

  • We take the first list element and we add a margin-left of 50 px:

ul.iw_thumbs li:nth-child(1){

    margin-left:50px;
}
  • Then we take all the even list elements and give them a different top margin:
1
2
3
ul.iw_thumbs li:nth-child(even){
    margin-top:30px;
}
  • All multiples of 3 will have a left margin of 20 px:
1
2
3
ul.iw_thumbs li:nth-child(3n){
    margin-left:20px;
}
  • Now we will play with the heights of the images.
    •  We also want to make the images a little bit smaller or bigger because we want to animate them to the height of the ribbon when we click on them. So this will add an interesting effect, since some images will grow and some will shrink:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.iw_thumbs li:nth-child(even) img{
    height:20px;
}
ul.iw_thumbs li:nth-child(odd) img{
    height:40px;
}
ul.iw_thumbs li:nth-child(5n) img{
    height:70px;
}
ul.iw_thumbs li:nth-child(6n) img{
    height:110px;
}
ul.iw_thumbs li:nth-child(7n) img{
    height:20px;
}
  • The ribbon will be a fixed element that will come sliding out from the left or the right side depending on where the thumbnail is positioned. The width is 0 initially and we will animate it to 100%.
1
2
3
4
5
6
7
8
9
10
11
12
.iw_ribbon{
    position:fixed;
    height:126px;
    width:0px;
    left:0px;
    top:0px;
    background:#000;
    opacity:0.8;
    z-index:10;
    overflow:hidden;
    display:none;
}
  • When we click on a thumbnail while we are in the “ribbon mode”, we want the big image to appear inside of the ribbon and then we’ll expand the ribbon in order to reveal it. So we will dynamically add the image into our ribbon and apply the following style:
1
2
3
4
5
6
.iw_ribbon img{
    position:absolute;
    top:50%;
    left:50%;
    border:7px solid #fff;
}

We want the image to be centered, so we add a top and left of 50% and define the negative margins dynamically once we know the size of the image. The margins need to be the negative half of the width and height of the image.

And finally, we define the loading span style which is an element that we will add dynamically into the list element in order to indicate that the big image is loading:

.iw_loading{

    background: #fff url(../images/loader.gif) no-repeat center center;
    width:28px;
    height:28px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10000;
    margin: -14px 0px 0px -14px;
    opacity:0.8;
}

The default number of images per wall are the total number divided by four since we have four walls to spread them on.

The gallery starts by looking at the first image which will be centered in the viewport. With a very large screen, we will be able to see the neighboring images as well, depending on the wall size of course, When we turn fully, the walls will be reset and we’ll again have only the main wall:

different handling of 3D transforms in the browsers and of course the performance

performance suffers when adding something like a box shadow, so we have stripped the demos down to their bare style and not added too much fanciness.

CSS CLIP PROPERTY

schema-clip

.my-element {

    position: absolute;
    clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
    clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}
clip: rect(40px, 260px, 150px, 80px);
schema
  • The rect() function accepts auto as a value for each one of the four parameters. Basically it means “100%”. Let’s say you clip something to rect(0, 50px, 50px, 0) and want to display it in full size (100×100 let’s say). You could either do rect(0, 100px, 100px, 0) or rect(0, auto, auto, 0).
  •  since the rect() function requires length values for each parameter, it means it’s animatable either with CSS transitions or CSS animations. This is excellent news to make sweet effects. Of course you can’t animate to auto since it’s not an integer.
  • percentage values for the rect() function are not supported. It’s too bad because it would make responsive clip stuff easier.

CSS + HTML

html 和css都是标记语言,现在用他们来分别进行网页结构设计,网页风格设计。
<head>
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>
</head>

用户自定义的样式的名称不属于任何html标记。 我们可以使用属性"class"设置标记的样式。
示例1:
<font class=mystyle1> 我的风格 </font>
结果1: 我的风格 

示例2:
<a href="index.php" class=mystyle1> 我的风格 </a>
结果2: 我的风格 

大致上有三种方法来设置html标记的样式:
a) 内置
b) 内部
c) 外部的CSS
内嵌样式
在html标记中这种样式的属性值为内置。
示例: <font style="color: red; background-color: orange;"> 测试字体 </font>
结果: 测试字体

内部样式
我们可以使用它来定义head标记的样式。
在head标记中我们定义的样式就像示例中给出的一样。
内部样式样式有三种方法可以使用:
普遍, 
标识符, 
用户定义. 
1。我想让所有相似的html标记有相同的样式。例如: 我想让每个<font>标记中的文本内容加粗?
<head>
<style>
a
{
color: green;
}
</style>
</head>
如果像这样使用内部样式,则样式将在整个页面的该标签中生效。即页面中的所有的"a"标记将应该该样式。
2,全局样式时,它将为所有的标记类型设置同样的样式。但是在大多数情况下我们想要相同的标记类型在不同的位置有不同的样式。
<head>
<style>
a#test1
{
color: red;
background-color: orange;
}
a#test2
{
color: green;
background-color: yellow;
}
</style>
</head>

如果我们在标识符中使用内部样式时,我们需要为样式设置ID,这样才会有效。

示例1:
<a href=”index.php” id=test1> 指数 </a>
结果1: 指数 

示例2:
<a href=”index.php” id=test2> 指数 </a>
结果2: 指数

我该如何创建外部样式表文件?

我们把以下的样式放在文本文件中,例如:mystyle.css
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>

在html中如何设置背景图片重复?

a)repeat:这个值说明背景图片在两个方向上重复
b)repeat-x:这个值说明背景图片仅仅在垂直方向上重复
c)repeat-y:这个值说明背景图片仅仅在水平方向上重复
d)no-repeat:这个值说明背景图片没有重复
如何产生onMouseover效果?
当鼠标在链接或者背景上时,如何让它们的颜色发生改变?

步骤1:
在head段落中添加文本要改变的样式,具体如下,
<head>
<style>
/*这是怎样的文字会在鼠标滑过*/
.colc{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:”悬停”是最最重要的变化这里*/
.colc:hover
{
font-family: san-serif;
color: #456745;
}
</style>
</head>

步骤2:
当鼠标在文本上方时,设置文本要出现的样式
例如:
<a href=””  class=”colc”> 这是将鼠标移动到文字</a>

注意:在这里我们使用标记”class”来设置样式。样式名称”将创建在header段落中。
—————————–

要让背景颜色发生改变,就像上面解释的一样,在样式标记中添加”background-color”属性。
例如:形成的样式就是
.colc2{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:”悬停”是最最重要的变化这里*/
.colc2:hover
{
background-color: #245250;
}

把这种样式设置到html标记中
<a href=””  class=”colc”> 这是OnMouseOver效应 </a>

水平线: <hr>
这是用于画出新的水平线的特殊标记。
这不需要结束标记。


This tag has the attribute 这个标记通过使用属性”width”来说明线的宽度。
<hr width=60%> 是用于定义以下的线


在一定的时间间隔后,我想让网页自动重定向?

为了进行页面重新定向,我们应当使用在html中使用head标记内的Meta标记。 推荐刷新的时间大于5秒,这是因为我们要考虑页面加载的时间。

例如:

<meta http-equiv=”refresh” content=”5; url=http://www.hscripts.com”>

这个代码将用于5秒之后重新定向你的网页到http://www.hscripts.com。

  • 属性 http-equiv=”refresh”是用于请求刷新页面。
  • 属性content=”5; URL=http://www.hscripts.com”是用于以秒来设置事件间隔,在这之后,页面重新定向到目标页面。
  • 在’url=’之后你不能使用分号。
  • 使用这个meta标记在一定的时间间隔后会自动重新定向到目标页面。为了确保重新定向到预置页面,可以编辑属性 “content“,来设置合适的时间值和目标网址。这将在所有扩展和服务器端语言(如php, jsp, asp等)中起作用。

我想让在页面上的一小部分在每隔一定的时间间隔后会加载,该怎么做?

页面的内容或者小部分需要每隔一定时间就动态更新。加载全部页面是不明智的。我们就通过嵌入框架来完成。

<html>
<head>
<meta http-equiv=”Refresh” content=”5″>
</head>
<body bgcolor=#faa9aa>
2061816660</body>
</html>

通过使用内联框架,把动态页面设置成我们的主页。在这里我们要使用表格和嵌入页面设置成网站上表格的一列。

<html>
<body>
这是内联框架的测试页面。在以下的框架中你只能看到内容,在每隔5秒,内联框架就会加载。 <br><br>

</body>
</html>

我想让网页在每几秒就重新载入?
我该如何让html页面自动刷新?

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web