网页设计-第七次作业

最新推荐文章于 2024-10-13 22:21:38 发布

一株没有思想的芦苇

最新推荐文章于 2024-10-13 22:21:38 发布

阅读量289

点赞数

分类专栏：网页设计作业文章标签： css3 html5 web html css

本文链接：https://blog.csdn.net/weixin_44622916/article/details/116105981

版权

网页设计作业专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>kc_homework_6</title>
    <link rel="stylesheet" type="text/css" href="kc_homework_6.css">
</head>


<body>
    <div class="top">
        <img src="images/scenery.jpg" alt="风景">
        <span>这段文字在图片中间显示</span>
    </div>

    <hr>

    <div class="bottom">
        <img src="images/scenery.jpg" alt="风景">
    </div>

</body>

</html>

css代码

/* 整体布局 */
/* 1.网页背景颜色淡紫色 */
body {
  background-color: Lavender;
  position: relative;
}

/* 2.1 图片水平居中 */
.top {
  position: relative;
  text-align: center;
}

/* 2.2 文本在图片上水平垂直居中，字体大小20像素，字体为红色
 */
.top span {
  font-size: 20px;
  color: red;

  position: absolute;
  top: 50%;
  line-height: 5px;
  /* 5px是看着图片调的 */
  left: 50%;
  text-indent: -120px;
  /* 20px一个字体，要相对左移一半 */
}

/* 
3.1 图片沿X轴和Y轴分别移动150和100像素
3.2 图片顺时针旋转60度
3.3 图片在X轴和Y轴分别倾斜20和30度 
*/
.bottom {
  position: absolute;
  transform: translate(150px, 100px) rotate(60deg) skew(20deg, 30deg)
    scale(0.8, 0.8);
  /* 缩放看图片调的，要求没给，不确定比例 */
}