css布局基础:定位练习1

主要知识点:

1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位)

position:static/relative/absolute/fixed/sticky。

2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。

效果图:

效果图

效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。

参考:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>css布局基础:定位练习1|www.125jz.com</title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
   div {
    width: 170px;
    height: 120px;
    border: 1px double #696969;
    position: relative;
   }
   img {
    width: 150px;
    height: 100px;
    margin: 10px;
   }
   p {
    width: 150px;
    height: 30px;
    background-color: #000000;
    opacity: 0.7;
    text-align: center;
    line-height: 30px;
    color: white;
    position: absolute;
    bottom: 10px;
    left: 10px;
   }
  </style>
 </head>
 <body>
  <div>
   <img src="img/图片2.jpg" />
   <p>故宫</p>
  </div>
 </body>
</html>

本文来自投稿,不代表125jz立场,如若转载,请注明出处:http://www.125jz.com/5535.html

(0)
上一篇 2020年4月4日 上午7:57
下一篇 2020年4月4日 上午8:25

99%的人还看了以下文章

  • javascript-快速掌握DOM技术

    Javascript的组成: 1.  js的语法(核心)。 2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本):DOM1,DOM2,DOM3 3. BOM(浏览器模型)  BOM是Browser Object Model的…

    2018年7月17日
    1.2K0
  • 注册表单验证常用js代码:用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

    2021年11月30日
    4530
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    3.2K0
  • CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

    CSS3的transform:scale()可以实现按比例放大或者缩小功能,transform呈现的是一种变形结果。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡,transition呈现的是一种过渡,是一种动画转换过程,如渐显、渐弱、动画快慢等。 transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间; t…

    2018年8月1日
    2.8K0
  • 纯JS实现的验证码-可自定义长度和字符

    纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

    2018年10月9日
    1.8K0
  • 纯CSS实现表格的自适应布局

    本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

    2018年2月19日
    4.8K0

发表回复

登录后才能评论