css入門練手靜態網頁項目之第一天代碼

來源:互聯網
上載者:User
今天要完成的是首頁面index.html

首先上效果圖:

描述:1.中間是swf動畫。如下匯入:

<embed src="images/index.swf" type="" width="712px" height="428px">

2.下面有個ENTER連結跳轉頁面,是白色的(因為預設連結是藍色的)。在body裡面用link標籤修飾。
下面稍微介紹一下link標籤:

<body link="顏色">

它對網頁中所有未單獨設定的元素起作用。

<body alink="顏色">

使用alink可以設定按一下滑鼠超連結時的顏色

<body vlink="顏色">

使用vlink可以設定已瀏覽過的超連結文字的顏色

最後代碼實現:

<body link="white" alink="#0066ff" vlink="#ff0000">

3.最下面也是一個圖片,代碼在css檔案裡面寫,如下:
下面的路徑解釋: ../是轉到上一目錄。路徑如下圖:

background: url("../images/copyright.jpg") no-repeat;

到這裡了上代碼吧。

首先index.html代碼

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>河畔林語</title>   <link href="css/index.css" rel="stylesheet" type="text/css" /></head><body link="white" alink="#0066ff" vlink="#ff0000"><div class="swf">    <embed src="images/index.swf" type="" width="712px" height="428px"><div class="enter">    <a href="url">ENTER</a></div><div class="end"></div></div></body></html>

index.css代碼

        *{            margin: 0px;            padding: 0px;        }        body{            background: url("../images/bg.jpg") repeat;        }        .swf {            position: absolute;            left:50%;            top:50%;            margin-left: -356px;            margin-top: -215px;        }        .enter {            width: 100%;            font-size: 18px;            text-align: center;            color:red;            font-weight: bold;            text-decoration: underline;            margin-top: 8px;        }        .end{            width: 574px;            height: 70px;            background: url("../images/copyright.jpg") no-repeat;            margin: 0 auto;        }

完事兒。

如果你也想手動敲一遍代碼,可以點擊下載這個index首頁面的壓縮包

拜拜。さよなら。。。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.