CSS 一个完整的例子

时间:2023-01-20 17:26:46

My first web page

What this is

A simple page put together using HTML. I said a simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.

Why this is

  • To learn HTML
  • To show off
    1. To my boss
    2. To my friends
    3. To my cat
    4. To the little talking duck in my brain
  • Because I have fallen in love with my computer and want to give her some HTML loving.

Where to find the tutorial

CSS 一个完整的例子

Some random table

Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3
Row 3, cell 1 Row 3, cell 2 Row 3, cell 3
Row 4, cell 1 Row 4, cell 2 Row 4, cell 3

Some random form

Note: It looks the part, but won't do a damned thing.

 //上述内容完全copy自html dog.

Name:

Comments:

Are you:

Male

Female

An hermaphrodite

Asexual

 //上述内容完全copy自html dog.

<!DOCTYPE html>

<html>

<head>

<title>My first web page</title>

<!-- This is a comment, by the way -->
<style type="text/css">
body
{
font-family
: arial, helvetica, sans-serif;
font-size
: 14px;
color
: black;
background-color
: #ffc;
margin
: 20px;
padding
: 0;
}
/* This is a comment, by the way */

p
{
line-height
: 21px;
}

h1
{
color
: #ffc;
background-color
: #900;
font-size
: 2em;
margin
: 0;
margin-bottom
: 7px;
padding
: 4px;
font-style
: italic;
text-align
: center;
letter-spacing
: 0.5em;
border-bottom-style
: solid;
border-bottom-width
: 0.5em;
border-bottom-color
: #c00;
}

h2
{
color
: white;
background-color
: #090;
font-size
: 1.5em;
margin
: 0;
padding
: 2px;
padding-left
: 14px;
}

h3
{
color
: #999;
font-size
: 1.25em;
}

img
{
border-style
: dashed;
border-width
: 2px;
border-color
: #ccc;
}

a
{
text-decoration
: none;
}

strong
{
font-style
: italic;
text-transform
: uppercase;
}

li
{
color
: #900;
font-style
: italic;
}

table
{
background-color
: #ccc;
}
</style>

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>
<p>A simple page put together using HTML. <em>I said a simple page put together using HTML.</em> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>

<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I have fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

<h2>Where to find the tutorial</h2>
<p>
<a href="http://www.htmldog.com"><img src="http://www.htmldog.com/badge1.gif" width="120" height="90" alt="HTML Dog"></a>
</p>

<h3>Some random table</h3>
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

<h3>Some random form</h3>
<p><strong>Note:</strong> It looks the part, but won't do a damned thing.</p>

<form action="somescript.php" method="post">

<p>Name:</p>
<p><input name="name" value="Your name"></p>

<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked> Asexual</p>

<p><input type="submit"></p>

</form>

</body>

</html>

 上述内容完全copy自html dog.

CSS 一个完整的例子

 

cnblogs_css样式保存

body {
font-family:'comic sans ms',sans-serif;
background: #00FF00 url(http://images2015.cnblogs.com/blog/1042431/201706/1042431-20170627223321649-1166499380.png) no-repeat fixed top;
}

#content {
background: #FFF;
box-shadow:0 10px 20px rgba(0,0,0,0.5);
/*参数:水平阴影 竖直阴影 模糊距离!阴影的距离 阴影的颜色*/
opacity:0.971;
}

#top {
display: none;
}

#sub {
visibility:hidden;
}

#green_channel {
display: none;
}

#ad_t2 {
display: none;
}

#cnblogs_c1 {
display: none;
}

.itnews c_ad_block {
display: none;
}

#cnblogs_c2 {
display: none;
}