Welcome to My Homepage

Use the menu to select different Stylesheets

Stylesheet 1
Stylesheet 2
Stylesheet 3
Stylesheet 4
No Stylesheet

Same Page Different Stylesheets

This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
Stylesheet1, Stylesheet2, Stylesheet3, Stylesheet4.

No Styles

This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:
No Stylesheet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

My First CSS Example

This is a paragraph.

Hello World!

These paragraphs are styled with CSS.

p { text-align: center; color: red; } #para1 { text-align: center; color: red; } .center { text-align: center; color: red; } p.center { text-align: center; color: red; }

This paragraph refers to two classes.

* { text-align: center; color: blue; }

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } h1, h2, p { text-align: center; color: red; } /* This is a single-line comment */ p { color: red; } p { color: red; /* Set text color to red */ } /* This is a multi-line comment */ p { color: red; }

Demonstrating the Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.

This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px Total element width = width + left padding + right padding + left border + right border + left margin + right margin Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin a { color: hotpink; }

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; }

Link Button

A link styled as a button:

This is a link

Using CSS to style an HTML Form

A full-width input field:

Padded text fields:

Text fields with borders:

input[type=text] { border: none; border-bottom: 2px solid red; } input[type=text] { background-color: #3CBC8D; color: white; } input[type=text]:focus { background-color: lightblue; } input[type=text]:focus { border: 3px solid #555; }

Input with icon:

Animated search input:

A styled select menu.

The display Property

display: inline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

“Web开发基础”实验报告