商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 万博体育娱乐 > 网站设计 >

写给设计师的前端小知识之征服霸道DIV篇(二)

发表日期:2017-06-30 17:36万博娱乐体育浏览次数: 本文关键词:写给设计师的前端小知识

 

  Sunny萧萧:本文作为小白入门级,相对基础,是写给现在想了解一点前端知识的设计师同行们。文章把前端相关的术语都用设计师熟悉的东西解释一遍,通俗易懂幽默风趣,基于上一篇,要让div乖乖“听话”,今天来应用和深挖float这个属性。

  上篇回顾:《零基础也能看懂!写给设计师的前端小知识之小白入门篇(一)》

  div是带着霸道基因出生的(不明白的请先看完上一篇哦),其实它主要是还没有碰上能征服它的你吧!哈哈……今天带大家来把他拿下。

  好吧,我承认“附加样式”这个词不知道是从哪儿看的还是我自己这么叫的,我们之后就分为样式和默认样式吧。

  一、矩形排排坐

  乃们还记得下面这张图吗?

  

10qd20160401

 

  他们真的是很霸道呢,不过在html界,霸道的多了去了,今天我们先来把它收拾一下吧。

  在body内画两个矩形:

  那为了让蓝色矩形排在黄色矩形右边让他们排成一横排的话,首先让黄色矩形让个位置,“靠边站”,

  在第一个矩形中加入一条新样式:float:left;(即向左靠,遵循我们的写字习惯从左往右排吧,你也可以试试向右靠)

  然后……

  

8qd20160401

 

  啊嘞?怎么只剩一个了!!!

  待我给你慢慢道来……

  

7qd20160401

 

  嗯,你问我讲这个干嘛?再教你一个属性:opacity(透明度),其后跟的是小数,0.5即表示50%透明度。

  然后保存刷新:

  

6qd20160401

 

  如果你去验证了,你会发现这个颜色就是我们在PS里降低黄色透明度与蓝色相交得到的颜色。也就是说:

  

5qd20160401

 

  是的,没错,蓝色矩形被黄色矩形遮住啦。(下面我们简称两个矩形为小蓝和小黄)

  至于为什么会被遮住,这是跟float这个属性相关的。float直译过来即是浮动的意思,也就是添加了float属性的小黄实际上是浮起来了,所以原先它“站”的位置就空了,小蓝“篡位”而上占据了小黄原来的位置。就像图层一样,上面的图层会遮住与它自身一样大小的面积,所以后来的小蓝永远不能与小黄“平起平坐”(呜呜呜……你是我无法企及哒)。但是你光在蓝色矩形上加浮动属性又没有用,div天生的霸道基因不允许……不信你试试,哈哈……

  

4qd20160401

 

  那么问题来了,想排排坐,又不想被小黄踩在脚下,怎么办呢?

  只有把小蓝也提起来咯。

  所以两个矩形都应该加float属性,这样他们才处于同一层,

  

3qd20160401

 

  好啦,可以自己尝试多画点大小不一的矩形,让他们排一下,不过不是所有的都能好好排的。在html中,body的大小虽然是无限的,可是你的屏幕也只能显示那么点东西做再宽有什么意义呢。除了现在很流行的满屏网页,一般网页都会规定宽度而不会规定高度。你可能经常见到有竖滚动条的网页,但是横向滚动条的几乎没有(除非你的设备屏幕小于一般PC屏幕或者把网页放大了几倍等其他原因),所以也可以说网页大小是和你浏览器显示区域有关。

  

2qd20160401

 

  所以许多网站会取一个多种屏幕都适用的内容宽度,也就是做webUI时你留的有效内容区域(常见的有1200px、1001px等)。开发人员会根据你的尺寸来确定一个最大宽度来排版。

  多画几个高度一样宽度不一的矩形,为它们都加上向左浮动的属性(float:left;)缩小你的浏览器宽度,你会发现,它们不会一直呆在第一排,有时候竟会换行。当最右边的距离不足以放下它,他就会选择换一行。这也是现在响应式网站的奥妙之一,同一个网页,PC和手机都可以浏览,且布局会有所改变但不影响内容。如下图:

  

1qd20160401

 

  你猜红色的是不是在发现没有位置了换到第三行而变成了手机上看到的页面那样?(*^__^*)

  所以float这个属性是html中非常重要的一个属性,花的篇幅比较长。所以今天其实就讲了float一 个东西,透明度(opacity)和颜色那些顺带提一下。仿网页排版布局今天就不讲了,下次更新讲排版!

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.bluecatslive.com/news/wzsj/5001.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5369

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:640

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:633

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:622

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:617

相关文章

零基础也能看懂!写给设计师的...

A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院、产品经理、人物访谈为内容驱动,与互联网创业者共同进步。...

日期:2017-06-30 浏览次数:2

写给设计师的前端小知识之小白...

A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院、产品经理、人物访谈为内容驱动,与互联网创业者共同进步。...

日期:2017-06-30 浏览次数:5

零基础也能看懂!写给设计师的...

A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院、产品经理、人物访谈为内容驱动,与互联网创业者共同进步。...

日期:2017-06-30 浏览次数:7

随机推荐

作为交互设计师,该如何设计社...

这是一篇绝无任何套路的产品规...

你应该知道的网页设计中的规则...

小心谨慎!网页重设计的7个常见...

企业网站设计的布局有哪几种,...

如何做好排版设计?格式塔原理...