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%的人还看了以下文章

  • 第1课:CSS是什么?

    CSS是Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

    2020年2月22日
    2.4K0
  • 22个HTML5的初级技巧

    本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。

    2018年3月18日
    1.4K0
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

     CSS3可以实现很多漂亮的图形,本文从互联网收集了最常见的40种形状和图形,现分享给大家。 包括圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右…

    2020年2月22日 网页制作
    4.0K0
  • 最简单的wmv视频网页播放代码

    如何在网页上播放wmv格式视频? 1、将以下代码复制到html网页的<body>中:如 <embed src=”wangyesheji1.wmv” width=”460″ height=”414″ autostart=”1″ filename=”mms:/wangyesheji1.wmv” showcontrols=”1″ showstat…

    2021年4月5日
    2.6K0
  • jQuery屏蔽页面右键,禁止复制,文本选择代码

    屏蔽页面右键,禁止复制,文本选择功能,用jQuery实现非常简单。 125建站网分享两种方法。 方法一: //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

    2019年10月16日
    3.0K0
  • jquery全选和反选功能代码,兼容所有浏览器

    <!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码,兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…

    2019年11月1日
    2.0K0

发表回复

登录后才能评论