小妖女 发表于 2015-1-16 10:39:01

DIV教程之不成不知的css十年夜密技

你可能会说,好多英文看不懂,不过我告诉你,很抱歉那三个英文你必须记住,而且是最重要的三个,你可以把这么个盒子看成一个DIV,而所有标签都带有这三个属性。

[*]
[*]
1.css字体简写划定规矩
当利用css界说字体时你大概会如许做:
font-size:1em;
line-height:1.5em;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
font-family:verdana,serif;
现实上你能够简写这些属性:
font:1em/1.5embolditalicsmall-capsverdana,serif
如今很多多少了吧,不外有一点要注重:利用这一简写体例你最少要指定font-size和font-family属性,其他的属性(如font-weight,font-style,font-varient)如未指定将主动利用默许值。


2.同时利用两个class
一般我们只为属性指定一个class,但这其实不即是你只能指定一个,实践上,你想指定几就能够指定几,比方:
<pclass="textside">...</p>
经由过程同时利用两个class(利用空格而不是逗号支解),这个段落将同时使用两个class中制订的划定规矩。假如二者中有任何划定规矩堆叠,那末后一个将取得实践的优先使用。


3.css中边框(border)的默许值
当编写一条边框的划定规矩时,你一般会指定色彩、宽度和款式(任何按次都可)。比方:border:3pxsolid#000(3像素宽的玄色实线边框),实在这个例子中独一必要指定的值只是款式。假设你指定款式为实线(solid),那末其他的值将利用默许值:默许的宽度为中等(相称于3到4像素);默许的色彩为边框里的笔墨色彩。假如这恰是你想要的效果,你完整能够不在css里指定。


4.!important会被IE疏忽
在css中,一般最初指定的划定规矩会取得优先权。但是对除IE之外的扫瞄器来讲,任何前面标有!important的语句将取得相对的优先权,比方:
margin-top:3.5em!important;margin-top:2em
除IE之外一切扫瞄器中的顶部界限都是3.5em,而IE为2em,偶然候这一点很有效,特别在利用绝对界限值时(就像这个例子),能够显现出IE与其他扫瞄器的渺小不同。
(良多人大概还注重到了css的子选择器也是会被IE疏忽的)


5.图片交换的技能
利用尺度的html而不是图片来显现笔墨一般更加明智,除加速下载还能够取得更好的可用性。可是假如你决计利用会见者的呆板中大概没有的字体时,你只能选择图片。
举例来讲,你想在每页的顶部利用“Buywidgets”的题目,但你同时又但愿这是能被搜刮引擎发明的,为了美妙你利用了少见的字体那末你就得用图片来显现了:
<h1><imgsrc="/uploadfile/200806/17/96162027360.gif"alt="Buywidgets"/></h1>
如许固然没错,可是有证据显现搜刮引擎对实在文本的器重远凌驾alt文本(由于已有太多网站利用alt文本充任关头字),因而,我们得用另外一种办法:<h1><span>Buywidgets</span></h1>,那你的大度字体怎样办呢?上面的css能够帮上忙:
h1
{
background:url(/uploadfile/200806/17/96162027360.gif)no-repeat;
}

h1span
{
position:absolute;
left:-2000px;
}
如今你既用上了大度的图片又很好的埋没了实在文本——借助css,文本被定位于屏幕左边-2000像素处。


6.css盒模子hack的另外一选择
css盒模子hack被用来办理IE6之前的扫瞄器显现成绩,IE6.0之前的版本会把某元素的边框值和添补值包括在宽度以内(而不是加在宽度值上)。比方,你大概会利用以下css来指定某个容器的尺寸:
#box
{
width:100px;
border:5px;
padding:20px;
}
然后在html中使用:<divid="box">...</div>
盒的总宽度在几近一切扫瞄器中为150像素(100像素宽度+两条5像素的边框+两个20像素的添补),惟独在IE6之前版本的扫瞄器中仍旧为100像素(边框值和添补值包括在宽度值中),盒模子的hack恰是为懂得决这一成绩,可是也会带来贫苦。更复杂的举措以下:
css:
#box
{
width:150px;
}

#boxdiv{
border:5px;
padding:20px;
}
html:
<divid="box"><div>...</div></div>
如许一来在任何扫瞄器中盒的总宽度都将是150像素。


7.将块元素居中
假定你的网站利用了流动宽度的结构,一切的内容置于屏幕中心,可使用以下的css:
#content
{
width:700px;
margin:0auto;
}
你能够把html的body以内任何项目置于<divid="content"></div>中,该项目将主动取得相称的摆布界限值从而包管了居中显现。不外,这在IE6之前版本的扫瞄器中仍旧有成绩,将不会居中,因而必需修正以下:
body
{
text-align:center;
}

#content
{
text-align:left;
width:700px;
margin:0auto;
}
对body的设定将招致主体内容居中,可是连一切的笔墨也居中了,这生怕不是你想要的效果,为此#content的div还要指定一个值:text-align:left

8.利用css完成垂直居中
垂直居中对表格来讲是小菜一碟,只需指订单元格为vertical-align:middle便可,但这在css结构中不论用。假定你将一个导航菜单的高度设为2em,然后在css中指定垂直对齐的划定规矩,笔墨仍是会被排到盒的顶部,基本没有甚么区分。
要办理这一成绩,只需将盒的行高设为与盒的高度不异便可,以这个例子来讲,盒高2em,那末只需在css中再到场一条:line-height:2em便可完成垂直居中了!

9.容器内的css定位
css的最年夜长处之一就是能够将工具定位在文档的任何地位,一样的也能够将工具在某容器内举行定位。只必要为该容器增加一条css划定规矩:
#container
{
position:relative;
}
则容器内的任何元素的定位都是相对该容器的。假定你利用以下html布局:
<divid="container"><divid="navigation">...</div></div>
假如想将navigation定位在容器内离右边界30像素,离顶部5像素,可使用以下css语句:
#navigation
{
position:absolute;
left:30px;
top:5px;
}

10.延长至屏幕底部的背景致
css的弱点之一是缺少垂直偏向的把持,从而招致了一个表格结构不会碰到的成绩。假定你在页面的左边设定了一列用于安排网站的导航。页面为红色背景,但你但愿导航地点的列为蓝色背景,利用以下css便可:
#navigation
{
background:blue;
width:150px;
}
成绩在于导航项不会一向延长到页面的底部,天然它的背景致也不会延长究竟部。因而左列的蓝色背景在页面上被半路截断,华侈了你的一番计划。怎样办呢?很不幸我们如今只能用棍骗的举措,行将body的背景指定为与左列同色彩同宽度的图片,css以下:
body
{
background:url(blue-image.gif)00repeat-y;
}
背景图应为宽150像素的蓝色图片。这一举措的弱点是没法利用em来指定左列的宽度,当用户改动笔墨的巨细招致内容的宽度扩大时,背景致的宽度不会随之改动。
到写这篇文章为止这是对这类成绩的独一办理举措,因而你只能为左列利用像素值来取得可以主动延长的分歧的背景致。
其实DIV+CSS是很简单的一种布局方式,甚至比任何一种编程语言都要简单(虽然它不能算是编程语言)。

简单生活 发表于 2015-1-18 07:44:46

还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

蒙在股里 发表于 2015-1-26 19:46:53

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。

精灵巫婆 发表于 2015-2-4 21:07:13

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。

不帅 发表于 2015-3-1 13:22:58

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

因胸联盟 发表于 2015-3-10 19:54:43

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

第二个灵魂 发表于 2015-3-17 10:13:50

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

深爱那片海 发表于 2015-3-24 07:59:36

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
页: [1]
查看完整版本: DIV教程之不成不知的css十年夜密技