新学网页前端可能遇见的几个坎

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了新学网页前端可能遇见的几个坎相关的知识,希望对你有一定的参考价值。

前言:UI设计师最怕就是的编程,但是了解一些简单应用也是可以的。文章内容整理自2016年1月(遗忘了一年多 = = )。工欲善其事必先利其器,首推写网页工具 sublime text 3+谷歌浏览器,Dreamweaver次之。

学习过程:html/CSS挺简单的,多写点就理解了。看懂了得敲,敲的时候会找手册,敲对了,改不同数值,有不同效果基本上就掌握了。

1、理解CSS(层叠样式表)有何作用   

1、层叠样式表,开始的时候记住它是用来记录网页的样式(字体、间距和颜色等)就够了。

2、要明白CSS样式分四种:内联样式、嵌入样式、外联样式、导入样式,

传送门:http://www.zzyyss.com/archives/727

可别都把所有的代码及属性写在一个网页上,这样很不利于维护,所以CSS样式单独存为一个css文件放在,用的多数是外联样式。

 

技术分享

 2、盒子模型(内边距、外边距) 

 

技术分享

上图中,由内而外依次是元素内容(content)、内边矩(padding-top、padding-right、padding-bottom、padding-left)、边框(border-top、border-right、border-bottom、border-left)和外边距(marging-top、margin-right、margin-bottom、margin-left)。

 

技术分享

 请务必记住内边距、外边距书写顺序 :上、右、下、左。 

 

技术分享

进阶:区分IE盒子和W3C盒子,以及在移动端上面的应用

3、id与class应用区别

关于css的ID和class这两种选择符,就页面效果而言,两个的视觉效果几乎无差别,但W3C对于ID与CLASS的设定是ID具有唯一性,CLASS具有普遍性,所以一个页面同一个ID只能使用一次,而class可以无限制使用。

在实际使用中,单一的元素或需要程序、JS控制的东西,需要用id定义;重复使用的元素、类别,则用class定义。

ID需要具有唯一性,并且尽量在外围使用,如网页的大致布局,多数选用ID选择符 来控制以施加样式,而CLASS具有可重复性,并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改。正式是因为ID是不能重复的,所 以在XHTML的结构中,大结构一定是用ID。比如标志、导航、主体内容、版权,规范命名为#logo , #nav , #content , #copyright。

类别选择器和ID选择器的简单示例:

 

<div id="style1"></div>

 

<div class="style2"></div>

style1 只能定义为 #style1{…..} 这就是ID选择器

style2 只能定义为 .style2{…..} 这就是类别选择器

总结:一个页面上所有控件ID不能重复且只能使用一次,但class可以被多个 html控件所套用,无限次使用。

进阶学习:合理利用CSS优先级->提高代码复用

4、网页水平居中显示:

需要设置两个地方,一个是body,一个是外边框div。 

(块级元素如何垂直居中请看张鑫旭大神的博客)

技术分享

5、文字垂直居中显示:

在DIV中定义一个行高与其高度相同即可。 

 

技术分享

6、图片垂直居中显示:

在标签中加入align="absmiddle" ,vertical-align: middle;

 

技术分享

7、清除浮动:

如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码,否则就会出现父元素高度为零的情况(高度塌陷)。如果在一行上只是一个DIV,则不必使用浮动、清除浮动。

CSS:HTML示例:

三列结构中的的DIV写法:

适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应。

HTML:

技术分享

CSS: 

技术分享

最佳清除浮动方法: <div class="main clearfix" id="main"></div>

技术分享

 

8、水平导航条的制作示例:

HTML代码如下:

CSS中,首先清除ul 、li的list-style、margin和padding:

 

技术分享

然后,可以将li的display属性设置了inline-block或者设置float为left,display:inline-block;会在各个li元素之间出现几个像素的空格(看需选取),可以用float left的方法:

技术分享

 

9、HTML、CSS里引用图片的路径不一样

CSS里的图片:一定一定要记得“..”表示上层目录,表示相对引用;

 

 

技术分享

 

技术分享

10、为什么设置了浮动为什么它就偏偏不往右靠过来呢?

很多人遇见这种问题,首先检查父DIV(或者class)的宽度是否容得下子DIV(或者class)加起来的高度,如果容纳不下自然往下排;反之,高度也如此。

 

技术分享

还有一种可能就是即便做了浮动也还是这样z,那么问题就除杂div的包含关系里,例如上图的搜索按钮并未跟文本框hello在一个父DIV下。

特别注意:新手百分之九十都出在单词拼写错误、CSS文件中ID、class等跟HTML文件中所要调用名字不一致。拼写错误在sublime里面很容易看出来,正确的拼写是高亮的,错误的则没有。

请记住,为什么属性没有生效,是因为你没写对!

以上是关于新学网页前端可能遇见的几个坎的主要内容,如果未能解决你的问题,请参考以下文章

网页设计师非常有用的几个在线工具

前端页面需要考虑的几个点

前端工程师必备的几个实用网站

前端工程师必备的几个实用网站

前端工程师必备的几个实用网站

前端工程师必备的几个实用网站