（网页制作）【1】

最新推荐文章于 2025-07-23 10:52:02 发布

Aioverst

最新推荐文章于 2025-07-23 10:52:02 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.youkuaiyun.com/goatherd_/article/details/104857499

记录一下自己第一次制作网页学到的东西。

1.html链接css代码：

<link href="Untitled-2.css" rel="stylesheet" type="text/css">

注：Untitled-2.css是链接的css文档名，不固定

2.让文字显示在图片上面

法一：设置body的background属性，让图片成为背景图片
<body background="images/b1.jpg">
缺点：一个html文档里一般只有一个body标签，因此不能实现多个图片各自搭配文字的效果
ps.我试过用多个body设置background属性，用不同的图片，结果背景图片仍然是第一个body的背景图片，其他body的背景图片根本不出现

法二：设置包含图片和文字的div的style="position:relative;"然后将文本的样式设为position:absolute;left:xxx;top:xxx;(left和top是用来控制文本在图片中的位置

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移
top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

注释：如果 “position” 属性的值为 “static”，那么设置 “top”，“left” 属性不会产生任何效果。

），将图片的宽度设为100%（同时最开始时要设置*{ margin: 0px; padding: 0px; } ）

html
<div style="position: relative;">
 <img src="images/3DC8B59D5D1C26657AC59F5BB136EABD.jpg" class="image">
 <div class="wenzi">
  <text class="wenzi1">Zoey</text><br>
  <text class="wenzi2">For you,a thousand times over.</text><br>
  <text class="wenzi3">生日快乐</text><br>
  <text class="wenzi4">2020.3.13</text>
 </div>
  </div>

图片css
.image {
 width: 100%;
 height: 700px;
}

文字css示例
.wenzi1{
 text-align: center;
 position: absolute;
 left: 42.5%;
 top: 255px;
 color:#FFFFFF;
 font-size: 48px;
}

缺点：调文本的位置时比较麻烦
下面是我用第二种方法弄的在这里插入图片描述

3.设置文本的淡入淡出效果

需要用到css的animation属性和不透明度opacity属性（值从0-1，值越大越不透明）

.wenzi{
 animation: wenzi 5s;
}

定义animation名称为wenzi，持续时间为5s

@keyframes wenzi{
 0%{opacity: 0;}
 50%{opacity: 0.5;}
 100%{opacity: 1;}
}

用@keyframes来创建定义的wenzi动画，并设置透明度的渐变进程

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

4.设置文本的阴影效果

利用文本的text-shadow属性

语法：text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊的距离。

color 可选。阴影的颜色。

我觉得这个需要自己慢慢摸索调整为好看的，下面是我调的颜色
在这里插入图片描述
留下文字的css代码：
color: #78AF84; text-shadow:10px 0px 5px #FFFFCC

5.总结

并没有考虑到在不同浏览器中的一些属性设置不同的问题，导致在有些浏览器中显示的效果跟我预想的不同（如下面的ie浏览器）

然后把我的完整代码留在这，之后学得更多了以后想办法解决ie浏览器的问题
或者如果有人看到了代码知道我的问题出现在了哪欢迎留言和私信

最后留下我的制作的第一个网页的完整代码
html：在这里插入图片描述
css：

网页效果：
ie浏览器中：（跟我想象中的完全不一样啊）microsoft edge浏览器中：（因为修改时就是用的这个浏览器，所以这个的效果我还是比较满意的）
在谷歌浏览器也是这个效果在这里插入图片描述这个是在microsoft edge浏览器中的效果