在线免费毛片,亚洲国产精品一区二区尤物区,黄色aa久久

BACKGROUND IMAGES AND IMAGE REPLACEMENT

��奇 — Tue, 03 Apr 2007 06:44:00 GMT

在这章我们将学习刎ͼ�

1.Fixed- and flexible-width rounded-corner boxes
2.The sliding doors technique
3.Mountaintop corners
4.CSS drop shadows
5.PNG transparency support for Internet Explorer 5.x and above
6.Image replacement

基本的背景图�?/strong>

body {
background:url(pattern.gif);
}

body {
background: #ccc url(gradient.gif) repeat-x;
}

#branding {
width: 700px;
height: 200px;
background:url(/images/branding.gif) no-repeat;
}

h1 {
padding-left: 30px;
background: url(/images/bullet.gif) no-repeat left center;
}

h1 {
padding-left: 30px;
background: url(/images/bullet.gif) no-repeat 0 50%;
}

Rounded-corner boxes

.box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}
.box h2 {
padding: 10px 20px 0 20px;
}
.box p {
padding: 0 20px 10px 20px;
}

Headline

Content

.box {
width: 424px;
background: url(images/bg-tile.gif) repeat-y;
}
.box h2 {
background: url(images/bg-top.gif) no-repeat left top;
padding-top: 20px;
}
.box .last {
background: url(images/bg-bottom.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;
padding-right: 20px;
}

Headline

Content

Flexible rounded-corner box

.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif)
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}

Headline

Content

Mountaintop corners

.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif)
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}

Headline

Content

Drop shadows

Easy CSS drop shadows

.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}
.img-wrapper img {
margin: -5px 5px 5px -5px;
}
height="300" alt="Dunstan Orchard" />

.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -5px 5px 5px -5px;
}

.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}

Drop shadows a la Clagnut

.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}

Fuzzy shadows

.img-wrapper {
background: url(images/shadow.gif) no-repeat right bottom;
float: left;
}
.img-wrapper div {
background: url(images/mask.png) no-repeat left top !important;
background: url(images/mask.gif) no-repeat left top;
padding: 0 5px 5px 0;
float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}

Onion skinned drop shadows

.img-wrapper {
background:url(images/shadow.gif) no-repeat right bottom;
float: left;
}
.img-outer {
background:url(images/bottom-left2.gif) no-repeat left bottom;
float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}
.img-inner {
background:url(images/top-right2.gif) no-repeat top right;
padding: 0 5px 5px 0;
float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
}

alt="Dunstan" />

Image replacement

Fahrner Image Replacement (FIR)

h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
span {
display: none;
}

Hello World

Phark

h2 {
text-indent: -5000px;
background:url(hello_world.gif) no-repeat;
width: 150px;
height:35px;
}

Hello World

Gilder/Levin method

h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

Hello World

��奇 2007-04-03 14:44 发表评论

VISUAL FORMATTING MODEL RECAP

��奇 — Mon, 02 Apr 2007 08:49:00 GMT

在这章我们将学习刎ͼ�

1.盒子模式的复杂和特征
2.怎样�q�且��Z��么页边空白收�~?br>3.�l�对位置和相对位�|�的不同
4.floating �?clearing怎样工作

Box model recap

* {
margin: 0;
padding: 0;
}

#myBox {
margin: 10px;
padding: 5px;
width: 70px;
}

Margin collapsing

Positioning recap

Relative positioning 相对位置

#myBox {
position: relative;
left: 20px;
top: 20px;
}

Absolute positioning �l�对位置

#branding {
width: 700px;
height: 100px;
position: relative;
}
#branding .tel {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
}

Tel: 0845 838 6163

Floating

Line boxes and clearing

.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}

Some text

.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}

Some text

更简��L��Ҏ��如下:

.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}

.news p {
float: right;
}

Some text

��奇 2007-04-02 16:49 发表评论

css mastery ��M��W�记

��奇 — Sat, 31 Mar 2007 11:18:00 GMT

让我们开始阅读这本书

我所用的工具

UltraEdit

IE ��览�?/p>
�W?章�?打下基础

在这章我们将学习刎ͼ�

1.一个好的结构的重要性和有意义的文档
2.�~�写最优方�?br />3.共有的编写错�?br />4.文档�c�d��Q�DOCTYPE switching和浏览器样式
5.建立自己的样�?br />6.层叠�Q�特征和�l�承

(X)html包括很多元素。例�?/p>
h1,h2,..
ul,ol,dl
strong,em
blockquote,cite
abbr,acronym,code
fieldset,legend,label
caption,thead,tbody,tfoot

IDs 和类�?class names)

Home

About Us

Contact

Divs �?spans

Home

About Us

Contact

��?/p>

Home

About Us

Contact

Where’s Durstan?

Published on March 22nd, 2005
by Andy Budd

DOCTYPE switching
(X)HTML 文档遵��@的文档类型定�?DTD)�?/p>
"

"

"

建立自己的样�?/font>

Common selectors

Type selectors

p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}

descendant selectors

li a {text-decoration: none;}

ID and class selectors

#intro {font-weight: bold;}
.datePosted {color: green;}
Some Text

24/3/2006

#mainContent h1 {font-size: 1.8em;}
#secondaryContent h1 {font-size: 1.2em;}

Welcome to my site

...

Latest news

...

Pseudo-classes

/* makes all unvisited links blue */
a:link {color:blue;}

/* makes all visited links green */
a:visited {color:green;}

/* makes links red when hovered or activated */
a:hover, a:active {color:red;}

/* makes table rows red when hovered over */
tr:hover {background-color: red;}

/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}

IE 6 �?:focus不支�?/p>
The universal selector

* {
padding: 0;
margin: 0;
}

Advanced selectors

Child and adjacent sibling selectors

#nav > li {font-weight: bold;}

Home

Services

Design

Development

Consultancy

Contact Us

覆盖
#nav li {font-weight: bold;}
#nav li * {font-weight: normal;}

��q��
h1 + p {font-weight: bold;}
Main Heading

First Paragraph

Second Paragraph

Attribute selectors

CSS

abbr[title] {border-bottom: 1px dotted #999;}
abbr[title]:hover {cursor: help;}

a[rel="nofollow"] {
background-image: url(nofollow.gif);
padding-right: 20px;
}

.intro {border-style: solid;}
[class="intro"] {border-style: dotted;}

a[rel~="friend"] {background-image: url(friend.gif);}

John Hicks

��奇 2007-03-31 19:18 发表评论

��奇 — Tue, 10 Oct 2006 11:44:00 GMT

CSS�?/span>Cascading Style Sheets的羃�?/span>.在一个网��中引入CSS�?/span>2�U�方�?/span>:


     也可以直接在�|�页中直接添加如�?/span>:


i'm red

你好

Home

About Us

Contact

Where’s Durstan?

Published on March 22nd, 2005

by Andy Budd

Some Text

24/3/2006

Welcome to my site

...

Latest news

...

Home

Services

Design

Development

Consultancy

Contact Us



��奇 2006-10-10 19:44 发表评论

在线免费毛片,亚洲国产精品一区二区尤物区,黄色aa久久

BACKGROUND IMAGES AND IMAGE REPLACEMENT

Headline

Headline

Headline

Headline

Hello World

Hello World

Hello World

VISUAL FORMATTING MODEL RECAP

css mastery ��M���W�记

Where’s Durstan?

Welcome to my site

Latest news

Main Heading

Where’s Durstan?

Welcome to my site

Latest news

css mastery ��M��W�记