B3log Solo  当前在线人数:12 登录 注册

奔放的胸毛。

天行健 胸毛以自强不息

DIV + CSS 教程(六)——table

2011-02-21 21:21:51 奔放的胸毛。
2  评论    14,355  浏览

Table

初学者在熟悉一些HTML之后在制作页面时大多是在Dreamweaver这样的软件中使用鼠标的拖拉点击形成的页面,由于不是自己编写的每一行代码,所以一旦出现所见非所得(在DW中显示的样子跟在实际浏览器中展现的样子不一样)时就会变得痛苦不堪。

我个人认为,我们应当为自己生产的每一行代码负责,做到心中有数。所以,当我们渐渐能够使用DW拖拽出一些东西的时候我们应当精益求精去了解代码,自己用字符去控制页面上的每一个像素,否则当需求变更或出现小毛病时,页面越来越复杂,代码凌乱不堪无法认读(不是自己写的所以更加难以认读),最后导致页面无法维护与修改直至崩溃。

所以最有效的解决方案便是自己手动去编写每一行代码,并使用CSS来控制其样式,拒绝<img width="234" src="XXX.jpg"/>这样的标签属性来控制其样式。HTML只管把网页的内容带到这个页面上来,至于其样式,全部交给CSS来控制。

其实细细算来,网页上的样式调来调去无非是颜色、高度、宽度、边框、距离、水平对齐、垂直对齐等这些东西,内容并不多。

放弃鼠标,敲打代码来控制页面上的每一个像素。

几乎每一个人都曾在DW里将一个table拖来拉去,让它按照自己的想法来对齐,花费大量的时间做这种很浪费生产力的事情。今天我们要尽量解决(尽量解决,一下子就想功到垂成就太贪心了)这种浪费生产力的现状。

通常一个页面,它的宽度是固定的,而高度是无限的。table是一个比较“庞大”的页面内容,它在页面上占多宽的地皮一定要固定下来。

有这样一段代码:

<table style="border:1px solid green;width:500px;height:100px">

<tr>

<th style="border:1px solid #E27907">日记标题</th>

<th style="border:1px solid #E27907">日记正文</th>

</tr>

<tr>

<td style="border:1px solid #E27907">我视美女如浮云</td>

<td style="border:1px solid #E27907">所有美女都是浮云,最温暖可靠的还是自己的右手。</td>

</tr>

<tr>

<td style="border:1px solid #E27907">祈祷</td>

<td style="border:1px solid #E27907">让我们敲希望的钟啊  多少祈祷在心中  让大家看不到失败  叫成功永远在  让地球忘记了转动啊  四季少了夏秋冬  叫宇宙关不了天窗  叫太阳不西沉</td>

</tr>

</table>

它的效果是这样的:

日记标题日记正文
我视美女如浮云 所有美女都是浮云,最温暖可靠的还是自己的右手。
祈祷 让我们敲希望的钟啊 多少祈祷在心中 让大家看不到失败 叫成功永远在 让地球忘记了转动啊 四季少了夏秋冬 叫宇宙关不了天窗 叫太阳不西沉

完全没有特别之处,大家对于这样的效果完全没有新鲜感。是的,完全没有什么新鲜感。只是,我们有没有想过,上面的代码中width只出现了一次,且是出现在table中,我们并没有控制单元格的宽度,那么这个table里的两个列,为什么宽度不是一样宽呢?为什么这些字要换行呢?为什么单元格的高度变高了呢?总而言之,它为什么是这样子的。

首先,当一个table整体的宽度固定了之后,它内部的所有列的宽度是根据此列中其“最宽单元格”的宽度来分配的。什么是“最宽单元格”?最宽单元格是此列中所有单元格的内容一行铺开,最宽的那个便是“最宽单元格”。第一列,第二行的内容最宽。第二列,第三行的内容最宽。然后再根据这两个最宽单元格的宽度比例来分配整个table的宽度。蛋疼的童鞋可以算下,第一列的宽度 : 第二列的宽度  是否约等于  第一列第二行单元格文字的字数 : 第二列第三行单元格文字的字数。所以说,在没有规定单元格宽度的情况下,table里各列的宽度是“按需分配”的。

至于为什么会换行,当一个单元格的宽度被限定之后如果一行显示不下,便会换行,换行后行数多了,高度也就被撑大了,这个不用多解释。

修改第一列的宽度:

<table style="border:1px solid green;width:500px;height:100px">

<tr>

<th style="border:1px solid #E27907;width:100px">日记标题</th>

<th style="border:1px solid #E27907">日记正文</th>

</tr>

<tr>

<td style="border:1px solid #E27907">我视美女如浮云</td>

<td style="border:1px solid #E27907">所有美女都是浮云,最温暖可靠的还是自己的右手。</td>

</tr>

<tr>

<td style="border:1px solid #E27907">祈祷</td>

<td style="border:1px solid #E27907">让我们敲希望的钟啊  多少祈祷在心中  让大家看不到失败  叫成功永远在  让地球忘记了转动啊  四季少了夏秋冬  叫宇宙关不了天窗  叫太阳不西沉</td>

</tr>

</table>

它的效果是这样的:

日记标题日记正文
我视美女如浮云 所有美女都是浮云,最温暖可靠的还是自己的右手。
祈祷 让我们敲希望的钟啊 多少祈祷在心中 让大家看不到失败 叫成功永远在 让地球忘记了转动啊 四季少了夏秋冬 叫宇宙关不了天窗 叫太阳不西沉

之前提到table是二维表结构,二维表最明显的外观特征便是“具有整齐的行与列”,所以上面的代码中只需要修改第一行第一列单元格的宽度(<th style="border:1px solid #E27907;width:100px">日记标题</th>),这整个列所有的宽度都会跟此单元格的宽度一致。我们无法让一个列中的两个单元格宽度不一,或一个行中的某两个单元格高度不一。

当一个列被限定宽度之后,此table中其它的列会自觉地吃空所有剩余的宽度。所以上面我们指定第一列的宽度为100像素后,第二列的宽度用膝盖也能想出来约等于400像素。为什么是约等于?这个问题其实很重要,网页上多一个像素少一个像素都是不妥的,我们来分析下目前这整个table的500像素是怎么分配出去的。

奔放的胸毛。

500 - 2(第一个缝隙) - 100(第一列宽度) - 2(第二个缝隙) - 2(第三个缝隙) - 1(table左边框的线条宽度) - 1(table右边框的线条宽度) = 392。无论如何,网页上看见的任何东西都是占位置的,所以就算是这么细的边框线也要占至少一个像素的宽度。第二列的标准宽度为392像素。一个物件的宽度,table的边框是table的,table的宽度为500,是算上边框之后的宽度是500,所以无论如何,尽最大的努力,两个列所能分配到的宽度也只能是500 - 2(左右边框线的宽度) = 498。

上面是直接精确控制列宽的情况,但是在有些时候我们并不知道一个列到底占多少,只是大概的希望一个列占一半,或者三分之一,或者两个列的宽度按照黄金比例分配(1 : 0.618)。

CSS中的宽度可以用百分比表示,代码如下:

<table style="border:1px solid green;width:500px;height:100px">

<tr>

<th style="border:1px solid #E27907;width:30%">日记标题</th>

<th style="border:1px solid #E27907">日记正文</th>

</tr>

<tr>

<td style="border:1px solid #E27907">我视美女如浮云</td>

<td style="border:1px solid #E27907">所有美女都是浮云,最温暖可靠的还是自己的右手。</td>

</tr>

<tr>

<td style="border:1px solid #E27907">祈祷</td>

<td style="border:1px solid #E27907">让我们敲希望的钟啊  多少祈祷在心中  让大家看不到失败  叫成功永远在  让地球忘记了转动啊  四季少了夏秋冬  叫宇宙关不了天窗  叫太阳不西沉</td>

</tr>

</table>

它的效果是这样的:

日记标题日记正文
我视美女如浮云 所有美女都是浮云,最温暖可靠的还是自己的右手。
祈祷 让我们敲希望的钟啊 多少祈祷在心中 让大家看不到失败 叫成功永远在 让地球忘记了转动啊 四季少了夏秋冬 叫宇宙关不了天窗 叫太阳不西沉

第一列的宽度占了可用宽度(498px)的30%,剩余的都让第二列占了。

【习题6.1】使用table制作一份化学元素周期表示意图

,

关于北京梁蓓委员谈80后无力应对高房价的建议

2011-02-18 17:07:00 奔放的胸毛。
3  评论    15,168  浏览
北京梁蓓委员谈80后无力应对高房价的建议:我觉得80后男孩子如果买不起房子,80后女孩子可以嫁给 40岁的男人。80后的男人如果有条件了,到40岁再娶20岁的女孩子也是不错的选择。

2楼
故事一则
终于到40岁了,找到一个年轻貌美的20岁女友。去她家见家长,开门的是当年读大学时相处了几年的初恋女友……
新女友喊了一声:妈~~

3楼
补充后面情节:
她妈看到我,惊得倒吸一口冷气。
没等我反应过来,然后把女儿拉进房间里,对女儿说“你不能和他在一起,他是你亲生父亲啊!”

4楼
补充后面情节:
女儿:我已经有了他的骨肉…

5楼
这时女孩的60多岁的父亲走出来看见了女孩的男友,小声的对他说:“你怎么来了?给你妈和你的生活费不是每月都按时打去的吗?”
6楼
请问现在这个女孩和男孩是什么关系?

推荐25个带单输入框和提交按钮的表单设计案例

2011-02-12 10:38:27 奔放的胸毛。
2  评论    10,352  浏览

原文From:http://webdesignledger.com/inspiration/25-examples-of-subscription-forms-and-buttons-in-web-design

提交表单是网站非常重要的一部分,之前曾介绍了25个优秀网页表单设计案例,今天要介绍的是25个带单个输入框和提交按钮的表单设计案例,这种表单最常见的应用场景是搜索和邮件订阅。让我们一起来参考一下这些非常有吸引力的设计。

300 Pixels

subscribe01

dribbblr

subscribe02

Meta Set

subscribe03

CardFly

subscribe06

acosmin

subscribe07
subscribe08

Life Could be Better

subscribe09
subscribe10

enjoythis

subscribe11
subscribe12

Oak Street Bootmakers

subscribe13
subscribe14

These are Things

subscribe15
subscribe16

Still Pointe

subscribe17
subscribe18

campwapo.org

subscribe19
subscribe20

Parachute Clothing

subscribe21
subscribe22

Jewell & Ginnie

subscribe23
subscribe24

Cure

subscribe25
subscribe26

Every Pixel Counts

subscribe27
subscribe28

MumMade

subscribe29
subscribe30

Portable.tv

subscribe31
subscribe32

13 Creative

subscribe33
subscribe34

Style & Conscience

subscribe35
subscribe36

Mentaway

subscribe37
subscribe38

The New Toy

subscribe39
subscribe40

Desina

subscribe41
subscribe42

So1o

subscribe43
subscribe44

Barley’s

subscribe04
subscribe05

Oi Polloi

subscribe45

推荐25个优秀网页表单设计案例

2011-02-12 10:29:41 奔放的胸毛。
0  评论    10,570  浏览

原文From:http://webdesignledger.com/inspiration/25-excellent-examples-of-forms-in-web-design

表单是网站非常重要的一部分。每个网站都有带自己风格的表单,可能是简洁的,也可能是多彩的、很有创意的。当你设计网站的时候,表单是你应该重点关注的元素,像登录、注册、留言等等。我们需要牢记的是应尽量吸引用户的注意力,使他们想要往表单里填写信息。这里收集了一些很好的例子供大家参考。

Awesome

forms06

forms07

Foundation Six

forms09
forms10

Wanken

forms13
forms14

Visual Republic

forms15
forms16

Andrew McClintock

forms17

Chris Woods

forms18

bio-bak

forms19

Vincent Mazza

forms20

Ed Peixoto

forms21

Christian Sparrow

forms22

olga designs

forms23

Krista Ganelon

forms24

Forever Heavy

forms25

Cornerd

forms26
forms27

Justdot

forms28
forms29

sikbox

forms30

Justalab

forms31
forms32

Buffalo

forms33
forms34

Sprocket House

forms35

Gardener & Marks

forms36

Pentagon

forms11
forms12

Gams

forms08

All Creative

forms01

forms02

Creditable

forms03

Gowalla

forms04

forms05

DIV + CSS 教程(五)——table

2011-01-30 15:37:46 奔放的胸毛。
0  评论    10,287  浏览

table

按照W3C的初衷来讲,table并不是用于布局的。所以严格来说不应该有table布局这个概念,只是tabel展示内容时是以很整齐的一块一块来展示的,很符合我们页面布局的习惯,所以便有了“table布”局这一说。

那么,如果table不是用来布局的,它是什么呢?其实可以这么理解,table跟img或Flash一样,它是被展示的内容,主要展示二维表结构的数据。所以Table被展示的内容,而不是用来布局的。尽管table也能起到布局的效果,习惯使用“table布局”的童鞋要慢慢转变观念,抛弃这种手段。

想要能够精确地控制table的样式,首先要将table“解剖”开来,弄清楚它的结构。请看下图:

TableModel

红色线条框起来的整体是一个table,里面的每一个小框(比如蓝色框)是一个单元格。从图中很容易看出,table其实是不存在“行”的概念的,这里说它不存在行的概念是从外观上来讲的,因为我们所能看到的部分只是table的边框和td的边框,并不存在tr。所以我们在控制table的外观的时候只能控制table和td的相关元素。

这里是一个完整的table的HTML表示:

<table>

<tr>

<th>技能名称</th>

<th>掌握程度</th>

</tr>

<tr>

<td>HTML</td>

<td>精通</td>

</tr>

<tr>

<td>CSS</td>

<td>熟练</td>

</tr>

</table>

它的效果是这样的:

技能名称掌握程度
HTML 精通
CSS 熟练

th表示表头,th里的文本会默认加粗。简单地修改下table的样式(是改变table,不是td),代码如下:

<table style="border:1px solid green;width:500px;height:100px">

它的效果是这样的:

技能名称掌握程度
HTML 精通
CSS 熟练

现在看到table变大,并且多了个边框线之后似乎还看不出什么东西,好的,我们给单元格(td或th)也加上边框:

<table style="border:1px solid green;width:500px;height:100px">

<tr>

<th style="border:1px solid #E27907">技能名称</th>

<th style="border:1px solid #E27907">掌握程度</th>

</tr>

<tr>

<td style="border:1px solid #E27907">HTML</td>

<td style="border:1px solid #E27907">精通</td>

</tr>

<tr>

<td style="border:1px solid #E27907">CSS</td>

<td style="border:1px solid #E27907">熟练</td>

</tr>

</table>

它的效果是这样的:

技能名称掌握程度
HTML 精通
CSS 熟练

好的,到目前为止我们仅仅只是给所有能加上边框的元素加上了边框,然后还把他们的“个子”变大了些。从上面的展示中可以看到:

①:table的所有单元格在垂直方向上默认都是垂直居中的

②:th单元格除了默认加粗之外在水平方向上也是居中的

③:td单元格默认居左

④:所有容器(table、th、td)之间的间隔是两个像素(这是用之前文章中共享的截图工具量出来的)

因为我们修改某元素的样式是在它默认样式的基础上修改,所以我们了解它的“本色”十分重要。比如hr中的文本本来就是加粗的,如果我们不知道的话再给它写个加粗的样式,不但做了无用功,还会成为笑柄,显得很业余。

在有些情况中我们并不希望th里的内容(注意这里是内容,内容包括文字、图片等所有展示出来的东西)水平居中和垂直居中,甚至我们也不想里面的文本加粗,我们可以这样来改变它:

<tr>

<th style="border:1px solid #E27907;font-weight:normal;text-align:left;vertical-align:bottom">技能名称</th>

<th>掌握程度</th>

</tr>

改变后它的效果是这样的:

技能名称掌握程度
HTML 精通
CSS 熟练

很好,正如我们希望的那样,“技能名称”这几个字所在的单元格已经按照我们所希望的样子来展现了。由于上面的代码中我们只改变了第一个th单元格的样式,所以,只有“技能名称”这几个字有了变化。

看看我们刚才都写了哪些样式:font(字体)weight(重量)普通(normal),这一句得到了取消加粗的效果;text(文字)align(排列)left(左边),这一句得到了居左的效果;vertical(垂直方向)align(排列)bottom(底部),这一句得到了居下的效果。

table是一个“毛病”很多的标签,下一篇将会很重要,它将会解决新手们在Dreamweaver这样的软件的预览视图中小心翼翼地拖动边框大小,却很难得到理想效果的问题。

我在学习网页制作的时候我是这样要求我自己的:绝不采用“拖”的方式来调整界面。后来学习了一阵子CSS之后,我又给自己下了个规矩:绝不使用table来布局。再后来我就在我的电脑中卸载了Dreamweaver,因为它会将我变傻。

,

辽美走秀门 看完之后必蛋疼

2011-01-29 14:33:18 奔放的胸毛。
2  评论    7,723  浏览

自古风流出少年,个个都是骚气蓬勃好儿郎,猥天琐地文成武德,此视频一出,叫天地变色,叫日月换颜,太恐怖了。

老实说,寡人收到惊吓了。

DIV + CSS 教程(四)——img

2011-01-28 23:40:27 奔放的胸毛。
1  评论    10,109  浏览

img

网页展现的优势在于它所能展现的元素的多样性。网页上的信息来源于文字、图片、声音、视频和Flash等,另外一些漂亮的页面特效也加强了浏览者的浏览体验。

一个没有图像的页面是无法让浏览者接受的,我们不可能愚蠢到使用纯文本去展现一个页面的所有信息,当然,特出情况下除外。事实上我们的确没有见过没有图像的网页,就算是纯Flash的网页,Flash也是包含图片的。人类对图片的处理能力更强,更容易从一张图片上获取到许多的信息。我们应当充分利用这个特点。

对于一张图片而言,使用CSS来改变其样式的时候其实并不多,因为一张好的图片是不需要被改变其外观的。不过对于大多数人而言,我们没有足够的精力去制作每一张我们需要的图片,互联网的共享精神让我们常常能够“不劳而获”。使用别人已经做好的图片来丰富自己的网页,这也是一项技能。

一张图片原本就应该是一个漂亮的而又完美的元素,所以使用CSS改变其外貌的地方少之又少:高度、宽度、边框线。

奔放的胸毛。

上面的这张图片没有经过任何修改,事实上只要摆放得当的话我觉得它已经足够好了。不过对于有些地方来说,它显得小了些,我们试着来改变下它的大小。

<img src="xxx.xxx" style="width:500px;height:300px" />

奔放的胸毛。

为了将调整后的效果展示得更加明显,我很无奈得将它的宽度拉大到了500像素,高度为300像素。错误的大小会丢失图片的清晰度,除非是矢量图,但是网页是无法展示矢量图的。

下面演示下给它加上边框后的效果:

<img src="xxx.xxx" style="border:2px solid green" alt="实线" />
实线

<img src="xxx.xxx" style="border:2px dashed #F89B1B" alt="虚线" />
虚线

<img src="xxx.xxx" style="border:2px dotted #E42222" alt="点线" />
点线

<img src="xxx.xxx" style="border8px double green" alt="双实线" />
双实线

<img src="xxx.xxx" style="border:8px inset green" alt="凹进" />
凹进

<img src="xxx.xxx" style="border:8px outset green" alt="凸出" />
凸出

border(边框)2px(线的宽度为两个像素)solid(线的样式为实线)green(线的颜色)。

形如style="border:8px outset green"的写法其实是一种简写,里面的线宽、线的样式和线的颜色分别用空格隔开。

注意:里面是顺序是可以打乱的,也就是说可以写成这样style="border:outset green 8px"。

刚刚提到上面是一种简写,它的详细写法是这样子的:

<img src="xxx.xxx" style="border-width:2px;border-style:dotted;border-color:#E42222" alt="点线" /> 
凸出

上图效果告诉我们,简写与非简写的作用是一样的。

事实上让我们崩溃的是,上面的这种“非简写”依然是一种“简写”。这下有的同学可能会糊涂了,这不是将三种样式分开了么?还是简写?!是的,它依然是简写。

因为一张图片的边框其实是由上、右、下、左(老外习惯用上右下左的顺序,因为这是顺时针的顺序)四条线组成的,所以上面的写法是同时控制四条线的写法。单独控制右边框线的详细写法是这样的:

<img src="xxx.xxx" style="border-right-width:2px;border-right-style:dotted;border-right-color:#E42222" alt="右侧点线" />
右侧点线

上面的代码才是最详细写法,单单控制图片的右边框就写了如此多的代码,由此可见CSS对元素的控制是十分精确和灵活的。我们在调整CSS的时候不能用差不多来形容自己的界面,差不多就是失败。我们应该使每一个像素点都按照我们的意愿来展示。

详细写法很麻烦,如果不是特殊需要,我们完全可以使用style="border:8px outset green"这样的简洁语法来控制图片边框线的宽度、样式和颜色。

对于CSS,我想到现在已经有个初步了解了,做做练习,加深下记忆。我们的原则是,如果没有牢牢掌握之前的知识,我们就坚决不往楼上走。

【练习4.1】在QQ空间中发表一篇带有文字和图片的日志,在HTML模式下编辑其源码,Show一下我们所学到的知识。做完后在此文下方回帖贴出日志所在地址,方便大家互相交流。空间有访问权限的就不用贴地址了,贴了我也进不去,可以截图后将图片Email至lyzane@live.cn

这里共享一个十分好用的截图工具

Tricks:对于HTML标签而言,所有的标签都应该有结尾,比如<div></div>。缺少结尾是一个重大的错误。像img这样的标签也应该有结尾,形如这样:<img />。在后面的尖括号之前加上斜杠。专业的人做专业的事,这些细节更能体现我们的素质。另外img标签内缺少alt属性也是不被允许的,这是标准,做网页的标准。
,

DIV + CSS 教程(三)——文本

2011-01-26 21:36:55 奔放的胸毛。
0  评论    4,924  浏览

Text

在上一小节中我们改变了文本的颜色(color)、字体(font-family)和大小(font-size)。

文字是一个网站上不可或缺的元素,掌握关于文字的样式处理技巧是十分有用的。今天继续学习关于文字的一些其它样式控制。

看这样一行代码:

<body>

<div style="color:#68391D;font-family:中华隶书;font-size:26px;font-style:italic">lyzane@live.com</div>

</body>

它的效果是这样的:

lyzane@live.com

我给它加了个斜体样式(font-style:italic,italic是斜体字的意思,英文不好的跟上脚步),看起来它的确是倾斜了。有人可能说,html里面的 i 标签很容易达到斜体效果,比font-style:italic好记多了。我只能说,HTML是HTML,CSS是CSS,CSS控制样式有它更专业的一面,使用CSS来产生斜体是十分有必要的。其优越性在以后讲,现在的原则是:能以后再说的就以后再说,用尽量少的知识来理解CSS是如何工作的。

细心点的人可能会发现,里面有问题。上面的字体样式应该是中华隶书,但是效果展示的字体样式好像不是那回事。是的,效果展示的的确不是中华隶书,这是为什么呢?原因很简单:你的机器上没有“中华隶书”这一种字体。世界上的字体有无数种,我们的电脑上不可能每一种字体都有。所以,我们在给文本设置字体样式的时候要考虑到浏览者的机器上是否已经安装有这种字体。

这样一下子又纠结了,我哪知道我设置的这种字体别人机器上有没有呢?这字体这么好看,我就想用这款字体!那么就有一种折中的办法来解决。

<body>

<div style="color:#68391D;font-family:中华隶书,Georgia,serif,黑体;font-size:26px;font-style:italic">lyzane@live.com</div>

</body>

它的效果是这样的:

lyzane@live.com

我给这段文本设置了中华隶书、Georgia、serif和黑体四种字体样式,那么浏览者看到这段文字的时候首先会应用第一款字体“中华隶书”,浏览器发现机器上没有这种字体,那么就会找后面的“Georgia”字体在浏览者机器上是否存在,这个字体大多数情况下都存在,所以就会使用Georgia字体来展示这段文本。当然,如果没有的话就继续找后面的“serif”字体是否存在,万一最后发现四个中一个都没有的话就不找了。使用浏览器默认样式展现此文本。

如果你做了前面一节的【实验1.1】,你就会知道当前国内所有主流浏览器的默认字体样式。

看这样一段代码:

<body>

<div style="color:#68391D;font-family:中华隶书,Georgia,serif,黑体;font-size:26px;font-style:italic;text-decoration:overline">lyzane@live.com</div>

<div style="color:#68391D;font-family:中华隶书,Georgia,serif,黑体;font-size:26px;font-style:italic;text-decoration:line-through">lyzane@live.com</div>

<div style="color:#68391D;font-family:中华隶书,Georgia,serif,黑体;font-size:26px;font-style:italic;text-decoration:underline">lyzane@live.com</div>

</body>

它的效果是这样的:

lyzane@live.com
lyzane@live.com
lyzane@live.com

这是给字体添加三种线条的展示,上划线(text-decoration:overline)、删除线(text-decoration:line-through)和下划线(text-decoration:underline)。用法倒是没什么难度,不过想要记住这么多单词可就有点麻烦了。没事,先知道怎么用就好了,以后要是忘记了就百度谷歌。

最后,对于文本样式的控制,还有个加粗,代码如下:

<body>

<div style="color:#68391D;font-family:中华隶书,Georgia,serif,黑体;font-size:26px;font-style:italic;text-decoration:underline;font-weight:bold">lyzane@live.com</div>

</body>

它的效果是这样的:

lyzane@live.com

font(字体)weight(重量)bold(厚颜无耻的)。是的,bold有厚颜无耻的意思。童鞋们可以用这个词来形容身边那些猥琐同仁们,嘿嘿,我?bold已经不能形象表达的我的猥琐了,哈哈~

Tricks:CSS代码是不区分大小写的,所以在书写的时候单词大写或小写都是不影响其效果的。通常,我们使用小写。这是潜规则。
,

60多年过去 有几个中国人知道

2011-01-26 10:54:56 奔放的胸毛。
0  评论    9,767  浏览

奔放的胸毛。:本文转自互联网,其内容不代表本人立场。请持辩证的立场看待此文。

60多年过去了,蒋介石动用70万国军发动了淞沪会战。在会战中,国军空军炸毁日本海军陆战队司令部,炸沉日本海军第3舰队旗舰,国军陆军为补充战损而五次发布动员令,超过半数的团职以上高级将领以身殉国。淞沪会战未能阻止日军占领上海,却改变了日军在中国战场的战略部署,还为上海资本向西转移赢得三个月时间。

60多年过去了,有几个中国人知道:最让外国人刮目相看的不是叶挺的新四军,而是孙立人的新一军。新一军远征缅甸,以伤亡1.7万人的代价击毙击伤日军 10.9万人。在新一军攻占缅甸重镇于邦的时候,下属向孙立人询问如何处理日军战俘,孙将军的回答是:你去问问那些狗za种,都谁到过中国,到过中国的就地枪毙,以后都这样办。

60多年过去了,有几个中国人知道:八路军在平型关大捷中只不过是消灭了一支日军运输队。而且平型关大捷只是平型关战役的一部分,平型关战役又是太原会战的一部分。

60多年过去了,有几个中国人知道:李向阳和他的游击队是虚构的,真正让日军闻风丧胆的军队是国军的委员长卫队。这支军队使用德军的装备,甚至有德军教官亲手指导。在南京雨花台,委员长卫队的两个营独自阻击日军一个甲种师团(在第二次世界大战中,日军一共只有六个甲种师团),平均每个士兵要坚守25米长的阵地,面对50名日军精锐部队的士兵,但胜利者依然是中国人。

60多年过去了,有几个中国人知道:在影视作品中恶贯满盈的张灵甫是抗战英雄。在长沙会战中,他率领敢死队包抄小道,夜夺张古峰,为国军成功阻击日军立下汗马功劳。张灵甫还为抗战丢了一条腿。

60多年过去了,有几个中国人知道:在常德保卫战中,74军57师的8000名官兵阻击10万日军15天之久,最后只有200人能够战斗。师长发出了74 军57师最后一封电报:弹尽,援绝,人无,城已破。职率副师长、师附、政治部主任、参谋部主任死守中央银行,各团长划分区域,扼守一屋,作最后抵抗,誓死为止,并祝胜利。

60多年过去了,有几个中国人知道在武汉上空爆发过持续时间仅次于不列颠空战的武汉空战。那场空战中,国军空军击落日军飞机78架,炸沉日军舰艇23艘。那个时候,每当防空警报响起,很多武汉市民不是钻进防空洞,而是爬上房顶,为的是能看到日军飞机被击落的场景。

60多年过去了,有几个中国人知道在重庆有17家军工厂在敌机轰炸下坚持24小时不间断生产。以金陵军工厂为例,抗战期间共生产迫击炮7000门、重机枪1.8万挺、步枪28万支、手榴弹30万枚、炸药包20万个。

60多年过去了,有几个中国人知道日军投降书是什么样子。为什么某党只宣传9.18日军侵华而不宣传8.15日军投降,不让国民看看日军投降书?难道仅仅是因为文中多次出现:日本陆海空军及其辅助部队向蒋委员长投降。或者是因为受降落款是:中国战区最高统帅特级上将蒋中正特派代表陆军一级上将何应钦。

要知道,伟大的中国卫国战争是世界四大反法西斯战争之一!它不是用游击战、麻雀战、地道战、地雷战就能打赢的。它是用重兵集团与敌人浴血奋战才打赢的!战争期间,国军陆军有3211418名官兵壮烈牺牲,其中包括8名上将,41名中将,71名少将。国军空军有6164名飞行员血洒长空,2468架战机被击落。国军海军全军覆没,所有舰艇全部打光。 向所有为中华民族的生存与尊严而战斗过的人致敬!

历史是真实发生的,不是靠教科书宣传的,了解历史,是反思过去的基础,一个不懂自己国家民族历史的民族是没有希望的民族,篡改历史是愚弄人民的卑鄙者的惯用手段。

DIV + CSS 教程(二)——何谓CSS

2011-01-25 22:58:27 奔放的胸毛。
7  评论    13,018  浏览

HTML

什么是CSS,百度一下,你就知道。

用一句话概括:用于控制Web页面的外观。

话不多说,先来看看它是如何控制页面上的元素的样式的。

 

 

有这样一行代码:

<body>

<div style="color:brown">Hello CSS!</div>

</body>

它的效果是这样的:

Hello CSS!

颜色变成了棕色。在CSS中,颜色不止能直接用颜色的英文单词来表示某种颜色,还能用十六进制表示,行如:#000000。

<body>

<div style="color:#ff0000">Hello CSS!</div>

</body>

它的效果是这样的:

Hello CSS!

如何知道某种颜色的十六进制代码呢?这个工具可以帮助你,另外,百度一下,也可以获取到十六进制颜色的的一些信息,这都不重要,重要的是我们迈出了第一步,我们学会了更改文字的颜色。有了第一步就会有第二步,就像上楼梯一样,一次只提高很小的一点点,但是每一步都有因为提高而带来成就感,激发我们学习的兴趣,不知不觉中我们就到了楼顶。

好的,我们再来改变点别的,将它的字体改变一下。

<body>

<div style="color:#ff0000;font-family:黑体">Hello CSS!</div>

</body>

它的效果是这样的:

Hello CSS!

英文不太好的童鞋可能就要加把劲了,对于我来说,family可是个不太容易记住的词。但是没关系,至少我们学会了如何改变文字的字体了,虽然不怎么好看。它看起来似乎有点模糊,好的,我们将它放大点。

<body>

<div style="color:#ff0000;font-family:黑体;font-size:24px">Hello CSS!</div>

</body>

它的效果是这样的:

Hello CSS!

将它的大小设置为24px,px是像素的意思,24px表示文字的高度为24个像素。现在我们来总结一下,如果要改变一些文字的样式,那么就在它的容器中(这里body内的div就是它的容器)写上style,然后上style里面写上样式,多个样式用英文分号隔开。

好的,今天就学这么多。CSS就是这么写出来的,它很简单。留给童鞋们一道实验题。前面说过,没有自己独立完成实验就不要继续后面的学习,每一步都走踏实。

【实验1.1】将下面两段代码分别在IE、Firefox、Chrome、Opera和Safari这四种浏览器中查看其样式,仔细分辨这八个(四种浏览器 X 两种代码 = 八)样式的差异:

代码一:

<body>

<div>Hello CSS!</div>

</body>

代码二:

<body>

<div style="font-family:serif">Hello CSS!</div>

</body>

认真完成之后写出实验报告回帖贴出来大家探讨。

,

公告

业精于勤,荒于嬉;行成于思,毁于随。

有些事现在不做,一辈子都不会做了
这一刻就计划
下一刻就实施
绝对不给自己找任何退却的理由
做,去做
做了才能有改变,有收获

最新评论

评论最多的文章

访问最多的文章

分类标签

友情链接

存档

TOP
Copyright (c) 2009-2017, b3log.org