html练习(5)

html练习(5)

大家好,又见面了,我是全栈君。

这个练习主要简单的展示了据对定位和相对定位;

在此说下html的定位:

1.static定位

这个是默认的方式。对static而言。leftright是不生效的。

2.relative定位(相对定位)

元素框偏离自身流相应的位置(靠left和top定位),元素仍然保持为定位前的形状,它原本所占的空间仍保留。从这一角度看,好像该元素仍然在文档流/标准流中一样。

注意:relative的參照点是它原来的位置,进行移动

3.absolute定位(绝对定位)

相当于元素从原来的位置脱离。并让出自己的空间,后面的元素就会占有让出的空间。

注意:absolute定位是相对于离自己近期的那个非标准流盒子而言的。

4.fixed定位

元素框的表现类似于将position设置为absolute,只是其包括块是视窗本身。


代码:

html文件(test5.html):


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
  <head>
    <title>作者:一叶扁舟</title><!–
/*练习绝对定位和相对定位*/
    –><meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
    <meta http-equiv=”description” content=”this is my page”>
    <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
    <link rel=”stylesheet” type=”text/css” href=”./test5.css”>

  </head>  
  <body>
    <h1>练习html的定位,包含绝对定位和相对定位</h1>
    <div class = “class1”>
   相对定位
    <div class = “style1”>这是第一个方格</div>
    <div class = “style1” id = “style2”>这是第二个方格</div>
    <div class = “style1”>这第三个方格</div>
   <div class = “style1”>这是第四个方格</div>
   </div>
   <div class =”class1″>
   绝对定位
    <div class = “style1”>这是第五个方格</div>
    <div class = “style1” id = “style3”>这是第六个方格</div>
    <div class = “style1”>这第七个方格</div>
   <div class = “style1”>这是第八个方格</div>
   </div>
  </body>
</html>


CSS文件(test5.css):

.style1 {
width:100px;
height:70px;
background-color:red;
margin-top:12px;
margin-left:3px;
float:left;
}

body {
width:800px;
height:500px;
border:2px solid blue;
background-color:green;

}

#style2 {
/*使用相对定位*/
position:relative;
left:110px;
top:90px;
}

div.class1 {
width:700px;
height:200px;
border:1px solid gray;
}

#style3 {
/*使用绝对定位*/
position:absolute;
left:400px;
top:300px;
}

执行的效果图:

html练习(5)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116460.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • char转int的方法_char 转 int

    char转int的方法_char 转 int这是我的第一篇博客,也是我学习的一种方法,我会将学习中总结出的方法问题通过博客记录下来,希望能帮到同样在努力学习的朋友,也希望有什么不足得到大家的补充帮助回归正文,在编程中我们常常会涉及到类型转换的问题,类型转换最重视的装箱与拆箱带来的性能损耗。char类型与int类型同属于值类型,因此在char转换成int的时候就想不造成装箱拆箱的性能损耗的同时完成转换就可以这样做,首先大家要明

  • java接口详解

    java接口详解Java基础——接口一、接口的概述:官方解释:Java接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为(功能)。我的解释:接口可以理解为一种特殊的类,里面全部是由全局常量和公共的抽象方法所组成。接口是解决Java无法使用多继承的一种手段,但是接口在实际中更多的作用是制定标准的。或者我们可以直接把接口理解为100%的抽象类,既接口中的方法必须全部是抽象方法。(JDK1.8之前可以这样理解)二、接

  • 有序的四字成语_LinkedHashMap

    有序的四字成语_LinkedHashMapHashMap是无序的,HashMap在put的时候是根据key的hashcode进行hash然后放入对应的地方。所以在按照一定顺序put进HashMap中,然后遍历出HashMap的顺序跟put的顺序不同(除非在put的时候key已经按照hashcode排序号了,这种几率非常小)单纯的HashMap是无法实现排序的,这的排序是指,我们将键值对按照一定的顺序put进HashMap里,然后在进行

  • 拓端tecdat|基于R语言实现LASSO回归分析「建议收藏」

    拓端tecdat|基于R语言实现LASSO回归分析「建议收藏」模拟假数据集set.seed(0820)n<-50p<-25beta<-rep(0,p)beta[1:5]<-1:5/5X<-matrix(rnorm(n*p),n,p)X<-scale(X)Xb<-X%*%betaY<-X%*%b…

  • Java安全之C3P0链利用与分析

    Java安全之C3P0链利用与分析0x00前言在一些比较极端情况下,C3P0链的使用还是挺频繁的。0x01利用方式利用方式在C3P0中有三种利用方式httpbaseJNDIHEX

    2021年12月13日
  • 随机数生成机制

    随机数生成机制

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号