把css放在页面顶部,把Script放在页底,这两句话在实践中怎么操作?css不是散布在代码中吗?怎能放页面顶部?

html-css011

把css放在页面顶部,把Script放在页底,这两句话在实践中怎么操作?css不是散布在代码中吗?怎能放页面顶部?,第1张

css放在<head></head>之间;js放在</body>之前。

css:可以<style type="text/css"><!--样式--></style>或者<link href="css.css" type="text/css" rel="stylesheet">

一、Css书写顺序:

1.位置属性(position, top, right, z-index, display, float等) 

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等) 

4.背景(background, border等)

5.其他(animation, transition等)

二、Css语法:

命名一般为小写英文字母。

为了代码的易读性,在每个声明块的左花括号前添加一个空格。

每条声明语句的 : 后应该插入一个空格。

所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。

对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。

十六进制值应该全部小写,例如,#fff。

尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。

避免为 0 值指定单位,例如,用 margin: 0 代替 margin: 0px。

Css常用的一些命名:

可参考:CSS 常用命名 - 彼岸时光 - 博客园。

三、Css的引入:

Css的引入一般有两种,link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项,避免产生资源文件下载顺序混乱和http请求过多的烦恼。

四、Css的命名规范(BEM,OOCSS):

什么是BEM:BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。

命名约定如下:

.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。

.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后,会有不同的外观。

优点:

BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器,可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中,所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性(specificity)都是相同的,也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了,而且类名的层次关系可以与 DOM 节点的树型结构相对应。

缺点:

这样类名过于长,且复杂。

什么是OOCSS(面向对象CSS):

OOCSS 表示的是面向对象 CSS(Object Oriented CSS),是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是:提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类,从而扩展基础组件的CSS规则,从而使CSS有更好的扩展性。

OOCSS的优点:

减少CSS代码。

具有清洁的HTML标记,有语义的类名,逻辑性强的层次关系。

语义标记,有助于SEO。

更好的页面优化,更快的加载时间(因为有很多组件重用)。

可扩展的标记和CSS样式,有更多的组件可以放到库中,而不影响其他的组件。

能轻松构造新的页面布局,或制作新的页面风格。

OOCSS的缺点:

OOCSS适合真正的大型网站开发,因为大型网站用到的可重用性组件特别的多,如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用,创建组件可能对于你来说是一堆没用的东西,成为一烂摊子,给你的维护带来意想不到的杯具,说不定还是个维护的噩梦。

  欢迎到优就业来了解

置顶的优点

1.减少跳出率:如果是从搜寻引擎而来的访客,对我们网站不熟,文章读完、资料找到后,没有个吸引注意力的设计,通常就直接离开了。那么如果浮动导览列恰巧有个访客有兴趣的主题,就有机会留住这位客人了。

2.随时提供导航:不是每个上网的人都很熟悉网站的构造、摆设位置等,那么这个浮动导览列只要项目设计得好,就能让这位迷途羔羊的网路生手有一个很好的重点指引。

3.节省操作:导览列置顶可以省去按「回到顶端」这个按钮,网页可以少安装、执行一个区块,而且「回到顶端」按钮有时会遮住一些文字。

实现方法

导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种,这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现

注意:dispaly:fixed;会使元素脱离文档,不占据文档空间。所以页面会有一些跳动,这时可以给相邻元素加上nav所占高度的margin-top或padding-top即可

(1)“导航栏下拉至一定高度后固定在顶部的特效”,也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码:

将这个js放到要实现效果的页面里面去,然后我们要修改的是第三行的.nav,“nav“改成你自己页面导航栏的class;第七行的”100“为下拉到100个像素的时候触发特效,可以自行修改至合适的高度。

(2)然后在css文件里面增加这个属性:

这样就差不多完成了。

讲下这个js的意思,判断下拉到一定高度的时候,给导航栏的div插入一个”fixednav“属性,然后给”fixednav“加上固定在顶部的参数。