css入门练手静态网页项目之第一天代码

今天要完成的是主页面index.html


首先上效果图:


css入门练手静态网页项目之第一天代码_第1张图片


描述:1.中间是swf动画。如下导入:

"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文件里面写,如下:
下面的路径解释: ../是转到上一目录。路径如下图:
css入门练手静态网页项目之第一天代码_第2张图片

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">ENTERa>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主页面的压缩包


拜拜!さよなら!!!

你可能感兴趣的:(css)