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

来源：互联网发布：冒险岛自由市场数据编辑：程序博客网时间：2024/05/16 05:47

今天要完成的是主页面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主页面的压缩包

拜拜！さよなら！！！

阅读全文

2 0