冷月葬花魂 发表于 2015-1-16 06:39:52

来一发技能再现:css网页计划技能

一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
本翻译并未失掉作者或网站受权。统统权力都回原作者及原网站一切。假如你失掉原作者或原宣布网站的受权,能够自在利用本翻译。

1.CSS字体属性简写划定规矩

一样平常用CSS设定字体属性是如许做的:

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也能够把它们全体写到一行上往:

font:bolditalicsmall-caps1em/1.5emverdana,sans-serif;

真不错!只要一点要提示的:这类简写办法只要在同时指定font-size和font-family属性时才起感化。并且,假如你没有设定font-weight,font-style,和font-varient,他们会利用缺省值,这点要记上。

2.同时利用两个类

一样平常只能给一个元素设定一个类(Class),但这其实不意味着不克不及用两个。现实上,你能够如许:

<pclass="textside">...</p>

同时给P元素两个类,两头用空格格开,如许一切text和side两个类的属性城市加到P元素下去。假如它们两个类中的属性有抵触的话,后设置的起感化,即在CSS文件中放在前面的类的属性起感化。

增补:关于一个ID,不克不及如许写<pid="textside">...</p>也不克不及如许写

3.CSSborder的缺省值

一般能够设定界限的色彩,宽度微风格,如:
border:3pxsolid#000
这位把界限显现成3像素宽,玄色,实线。但实践上这里只必要指定作风便可。

假如只指定了作风,其他属性就会利用缺省值。一样平常地,Border的宽度缺省是medium,一样平常即是3到4个像素;缺省的色彩是个中笔墨的色彩。假如这个值恰好符合的话,就不必设那末多了。
4.CSS用于文档打印

很多网站上都有一个针对打印的版本,但实践上这其实不必要,由于能够用CSS来设定打印作风。

也就是说,能够为页面指定两个CSS文件,一个用于屏幕显现,一个用于打印:

<linktype="text/css"rel="stylesheet"href="stylesheet.css"media="screen"/><linktype="text/css"rel="stylesheet"href="printstyle.css"media="print"/>

第1行就是显现,第2行是打印,注重个中的media属性。

但应当在打印CSS中写甚么器材呢?你能够按计划一般CSS的办法来设定它。计划的同时就能够把这个CSS设成显现CSS来反省它的效果。大概你会利用display:none这个命令来关失落一些粉饰图片,再关失落一些导航按钮。要想懂得更多,能够看“打印差别”这一篇。

5.图片交换技能

一样平常都倡议用尺度的HTML来显现笔墨,而不要利用图片,如许不仅快,也更具可读性。但假如你想用一些特别字体时,就只能用图片了。

好比你想全部卖器材的图标,你就用了这个图片:
<h1>...</div>
这时候盒子的全宽应当是150点,这在除IE6之前的IE扫瞄器以外的一切扫瞄器上都是准确的。但在IE5如许的扫瞄器上,它的全宽还是100点。能够用之前人创造的Box调剂办法来处置这类差别。

但用CSS也能够到达一样的目标,让它们显现效果分歧。

#box{width:150px}#boxdiv{border:5px;padding:20px}

如许挪用:
<d
123下一页


Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。

冷月葬花魂 发表于 2015-1-16 07:52:57

来一发技能再现:css网页计划技能

对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
ivid="box"><div>...</div></div>
如许,不论甚么扫瞄器,宽度都是150点了。

7.块元素居中对齐

假如想做个流动宽度的网页而且想让网页程度居中的话,一般是如许:

#content{width:700px;margin:0auto}

你会利用<divid="content">来围上一切元素。这很复杂,但不敷好,IE6之前版本会显现不出这类效果。改CSS以下:

body{text-align:center}#content{text-align:left;width:700px;margin:0auto}

这会把网页内容都居中,以是在Content中又到场了
text-align:left。
1.Block和inline元素对照
一切的HTML元素都属于block和inline之一。
block元素的特性是:
老是在新行上入手下手;
高度,行高和顶和底边距都可把持;
宽度缺省是它的容器的100%,除非设定一个宽度
<div>,<p>,<h1>,<form>,<ul>和<li>是块元素的例子。

相反地,inline元素的特性是:
和其他元素都在一行上;
高,行高及顶和底边距不成改动;
宽度就是它的笔墨或图片的宽度,不成改动。
<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子。

用display:inline或display:block命令就能够改动一个元素的这一特征。甚么时分必要改动这一属性呢?
让一个inline元素重新行入手下手;
让块元素和其他元素坚持在一行上;
把持inline元素的宽度(对导航条出格有效);
把持inline元素的高度;
不必设定宽度便可为一个块元素设定与笔墨同宽的背景致。

2.再来一个box黑客办法
之以是有这么多box黑客办法,是由于IE在6之前对box的了解跟他人都纷歧样,它的宽度要包括边线宽和空缺。要想让IE5同等其他扫瞄器坚持分歧,能够用CSS的办法:

padding:2em;
border:1emsolidgreen;
width:20em;
width/**/:/**/14em;

第一个宽度一切扫瞄器都认得,但IE5.x不认得第2行的宽度设置,只由于那一行上有空缺的正文标记(何等蠢的语法剖析!),以是IE5.x就用20减失落一些空缺,而其他扫瞄器会用14这个宽度,由于它是第2行,会掩盖失落第1行。

3.页面的最小宽度

min-width是个十分便利的CSS命令,它能够指定元素最小也不克不及小于某个宽度,如许就可以包管排版一向准确。但IE不认得这个,而它实践上把width当作最小宽度来使。为了让这一命令在IE上也能用,能够把一个<div>放到<body>标签下,然后为div指定一个类:

<body>
<divclass="container“>

然后CSS如许计划:

#container
{
min-width:600px;
width:expression(document.body.clientWidth<600?"600px":"auto");
}

第一个min-width是一般的;但第2行的width利用了Javascript,这只要IE才认得,这也会让你的HTML文档不太正轨。它实践上经由过程Javascript的判别来完成最小宽度。

一样的举措也能够为IE完成最年夜宽度:

#container
{
min-width:600px;
max-width:1200px;
width:expression(document.body.clientWidth<600?"600px":document.body.clientWidth>1200?”1200px“:”auto";
}
4.IE与宽度和高度的成绩

IE不认得min-这个界说,但实践上它把一般的width和height看成有min的情形来使。如许成绩就年夜了,假如只用宽度和高度,一般的扫瞄器里这两个值就不会变,假如只用min-width和min-height的话,IE上面基本即是没有设置宽度和高度。

好比要设置背景图片,这个宽度是对照主要的。要办理这个成绩,能够如许:

.box
{
width:80px;
height:35px;
}

html>body.box
{
width:auto;
height:auto;
min-width:80px;
min-height:35px;
}

一切的扫瞄器都可使用第一个box设置,但IE不认得第2段设置,由于个中用到了子选择器命令。第2个设置更特别些,以是它会掩盖失落第1个设置。

5.字体变形命令

text-transform命令很有效,它有3个值:text-transform:uppercase,text-transform:lowercase和text-transform:capitalize。第1个会把笔墨酿成全年夜写,第2个酿成全小写,第3个酿成首字母年夜写。这对拼音笔墨十分有效,即便输出时有巨细写毛病,在网页上也看不到。

6.IE中图片笔墨消散的成绩

偶然会碰到笔墨或背景图俄然消散的成绩,革新一下又呈现了,这在接近漂泊元素时更简单产生(注:没见过)。此时,能够为消散的元素设定:position:relative,假如不可,再思索为这些元素指定一个宽度尝尝。

7.不成见笔墨

不管由于何种缘故原由但愿某些网页笔墨不在扫瞄器中显现,好比为了打印或为了小屏幕而让某些笔墨不显现,都能够用display:none。这十分复杂,但偶然对某些人这有点没用,他们能往失落这个把持,这时候就要用到:position:absolute;left:-9000px。

这实践上是把笔墨指定在页面之外显现。

8.为手持设备计划专门的CSS

也就是手机/PDA等小屏幕用户,能够专门计划一个CSS来让网页显现更恬逸些。为此,能够把扫瞄器窗口调剂到150点宽来看效果。指定专门的手持设备的CSS的语法是:

<linktype="text/css"rel="stylesheet"href="handheldstyle.css"media="handheld"/>

也能够浏览专门的手持设备可用性。
9.3D效果的按钮

之前要想制造带有3D效果,而且点击下往还会变更的按钮,就得用图片交换的办法,如今CSS就能够了:

a
{
display:block;
border:1pxsolid;
border-color:#aaa#000#000#aaa;
width:8em;
background:#fc0;
}

a:hover
{
position:relative;
top:1px;
left:1px;
border-color:#000#aaa#aaa#000;
}

至于效果,还能够本人调剂了。

10.在分歧页面上利用一样的导航代码

很多网页上都有导航菜单,当进进某页时,菜单上响应这一项就应当变灰,而其他页亮起来。一样平常要完成这个效果,必要写程序或专门为每页做计划,如今靠CSS就能够完成这个效果。

起首,在导航代码中利用CSS类:

<ul>
<li><ahref="#"class="home">Home</a></li>
<li><ahref="#"class="about">Aboutus</a></li>
<li><ahref="#"class="contact">Contactus</a></li>
</ul>

然后分离为每页的Body指定一个id,和下面类同名。如<bodyid="contact">。

然后计划CSS以下:
</p>#home.home,#about.about,#about.about
{
commandsforhighlightednavigationgohere
}

这里,当id设为home时,.home就会起感化,也就是class设为home的那一行导航条就会显现出特别效果来。其他页也是云云。

本文作者是:TrentonMoss。
宣布网站是:http://www.webcredible.co.uk

上一页123下一页


CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

冷月葬花魂 发表于 2015-1-16 08:00:45

来一发技能再现:css网页计划技能

表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
</p>上一页123


在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

若天明 发表于 2015-1-16 14:51:13

来一发技能再现:css网页计划技能

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。

小女巫 发表于 2015-1-18 17:52:02

只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

精灵巫婆 发表于 2015-1-27 14:55:47

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

深爱那片海 发表于 2015-2-5 14:13:29

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

分手快乐 发表于 2015-2-12 05:46:57

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

小妖女 发表于 2015-3-3 00:06:05

直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

莫相离 发表于 2015-3-11 08:48:26

布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。

灵魂腐蚀 发表于 2015-3-18 08:24:13

由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。

再现理想 发表于 2015-3-25 20:29:39

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
页: [1]
查看完整版本: 来一发技能再现:css网页计划技能