咨询电话
:赵先生
0755-2590-5343
:深圳市龙岗区坂田商务大厦8楼
 
防水补漏

网页定制设计时Clear等5个难点属性的处理

触碰未来软件定制公司


 
对于大部分人而言,利用css设计一个网站风格是十分简单的事情。只要语义上你已经标记你的HTML,并且以合法方式设计了div元素和类,那么你的设计过程将是十分轻松愉悦的。然而,css还有很多强大的功能被设计人员忽视,而且我们大多数人是主观意识上回避了这些复杂的css性能。原因在于这些功能不是那么的直观,需要较多的注释来让我们理解他们是如何运作的。下面我将介绍5个边角难于处理的css属性,同时教会你们如何轻松驾驭他们。
 
CLEAR
首先我们假设你正在建立一个网站并且正在用css设计美化他。你建了一个container div,采用了浮动功能,并且你同时拥有两个div – 一个用于你的文章主题内容一个用于你的工具条。但是当你完工后你会发现你的container并没有完全的覆盖你设计的两个div元素下面,而是仅仅包含了这两个div元素。他完工的状态就像所有元素随意堆砌起来,看上去就是那么怪异,这里是HTML代码
 
 
在这我们设计了一个所有内容都建立在定宽的container并且主主体内容只能在这个container内滚动。我们建立了一个主体内容区域和两个工具条区域。他们都定义为靠左浮动,所以他们是处在同一行的。那么我们就会在下方产生一个页脚。现在我们来查看一下用这些div后,你所期待生成的 css的外观
 
显然上面的这个结果不是你想要的。主文章的专栏比共工具条栏长了不少,而且container div将页脚挤到了可用空白,而并未延展至所有文章涵盖的区域。对于这些问题我们只需一行简单的css代码就可以搞定,而且你压根不会相信这行代码有多么简单。在页脚,你可以敲入下面这行css代码这就是那行代码!
 
现在你的container div可以将H2两个标题涵盖进去了。在这行代码输入后,在同一行,你的网页可以显示文章的div和你需要的两个siderbar div。在这行下面将是页脚div元素,由于页脚div并未设置背景,所以他显示出来的将是container div的蓝颜色。经过这样处理后,container div 布满整个页面下层,并将你的文章包围起来。
 
我都没想通为什么这个功能会给设计者带来这么多困扰。一旦你将他的工作机理分解开来,那么这个功能将会显的无比简单。首先我们从最经的例子中抽取一些HTML和css的样本。这次,我将在content div中创建一个内部窗口让他看起来像是嵌入式。下面这些代码会产生一个红色嵌入阴影。
 
我对这些代码做了微小改动。现在工具条的宽都是95像素的,我在padding属性中添加5像素,这样以来该样式在边界处将是错误的。
一定要记住添加第三方前缀,这样你制作的效果才能在多数浏览器中得到支持。我们拆解css后,你会发现工作机理是比较简单的。Inset中的第一个值是告诉浏览器将阴影嵌入box中。如果没有这个声明的话,浏览器将会把阴影默认的放置在外部。设置该属性时,前两个像素设置的是这个阴影的水平和垂直放置的位置。将这个两个值都设置为0的话阴影四周边距将会相等。这两个像素如果是正值的话阴影将向右或者向下移动,负值的话阴影将会向左边或者上方。
 
这属性设置的第三个值决定了阴影的模糊直径,这样阴影看上去将会有个柔和的外观。第四个值是阴影的延展,这个值使得阴影更加,并且让这个阴影更加明显。你可以使用RGBA或者hex的值来决定你阴影的颜色。RGABA替换hex的代码可能与下面这个有点类似
 
 

深圳市触碰未来科技有限公司

180-3811-4500

0755-2590-5343

:深圳市龙岗区坂田商务大厦8楼

备案号:粤ICP备15043031号

深圳网站建设公司微信二维码
本站关键词: 软件定制 软件开发 软件设计