小练习

最新推荐文章于 2022-06-22 18:59:46 发布
最新推荐文章于 2022-06-22 18:59:46 发布
阅读量94 收藏
点赞数
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44721518/article/details/108144834
版权

在这里插入图片描述
请用html与css编写一个程序，展示效果如上图。要求无论怎么滚动该图像固定不动。代码如下：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <div class="box">
	 <div class="d1"> </div>
	 <div class="d2"> </div>
	 <div class="d3"> </div>
     <div class="d4"> </div>
	 <div class="d5"> </div>
	 </div>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
     <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br> 
	 <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>

</body>
</html>




div.box{
   position:fixed;
   left:50%;
   top:50%;
   margin-left:-185px;
   margin-top:-90px;
   width:370px;
   height:180px;
   background-color:white;
}
div.d1{
   position:absolute;
   left:0px;
   top:0px;
   width:100px;
   height:100px;
   border:10px solid blue;
   border-radius:50%;

}
div.d2{
   position:absolute;
   left:65px;
   top:60px;
   z-index:1;
   width:100px;
   height:100px;
   border:10px solid yellow;
   border-radius:50%;

}
div.d3{
   position:absolute;
   left:125px;
   top:0px;
   width:100px;
   height:100px;
   border:10px solid black;
   border-radius:50%;

}
div.d4{
   position:absolute;
   left:190px;
   top:60px;
   z-index:1;
   width:100px;
   height:100px;
   border:10px solid green;
   border-radius:50%;
   

}
div.d5{
   position:absolute;
   left:250px;
   top:0px;
   width:100px;
   height:100px;
   border:10px solid red;
   border-radius:50%;

}

或者

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <div class="plat">
	 <div class="circle1"> </div>
	 <div class="circle2"> </div>
	 <div class="circle3"> </div>
     <div class="circle4"> </div>
	 <div class="circle5"> </div>
	 </div>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
     <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br> 
	 <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <div>欢迎报考湖南师范大学</div>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>
	 <br>

</body>
</html>


*{
  margin:0;
  padding:0;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position:absolute;
width:100px;
height:100px;
border:10px solid black;
border-radius:50%;
}
.plat{
   position:fixed;
   left:50%;
   top:50%;
   margin-left:-185px;
   margin-top:-90px;
   width:370px;
   height:180px;
}
.circle1{
   left:0px;
   top:0px;
   border-color: blue;
 

}
.circle2{
   left:65px;
   top:60px;
   z-index:1;
   border-color:yellow;
   
}
.circle3{
   left:125px;
   top:0px;
   border-color: black;
   

}
.circle4{
   left:190px;
   top:60px;
   z-index:1;
   border-color: green;
   }
.circle5{
   left:250px;
   top:0px;
   border-color:red;

}
叹！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C语言小练习
10-26
此文档主要包括一些基础的联系，对于一些C/C++入门的同学，或者想巩固一些基础语法编程的同学有很大的帮助。
for循环的小练习！
selints的博客
06-06 2471
for循环的小练习！
python的二十个小练习（入门级别）
weixin_43795407的博客
04-23 1514
python的基本语法练习 #练习一 a=10 b=10 print(a+b) #提示bug是缩进问题，下次注意 #练习二 a=33 if a<10\ and a>100: print("大于100") else: print("大于10") #注意if与else后面一定要加“:”，如果一个语句要分段写的话，就得在首句末用“\”进行分隔 #练习三 print("3");print("6") #事实证明，语句仍以分号作为分隔符号，分号加不加其实在便是分隔的时候都是可以的
《前端》vue小练习合集
BelleDiao的博客
07-09 1519
1、效果 别人代码示例： <!DOCTYPE html> <html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2020年7月9日</title> <script src="./lib/vue-2.4.0.js"></...
鼠标点击小练习
wangmengsasa的博客
06-22 1418
DOM节点的小练习
10道JQuery的小练习
qq_40411946的博客
07-03 5764
期 末 复 习 的 10 道 jQuery 小练习 1.使用jquery修改div元素的背景色(随意颜色)&lt;body&gt; &lt;div&gt; &lt;/div&gt; &lt;script&gt; /* 1.使用jquery修改div元素的背景色(随意颜色) * * */ $('div').css('background',"...
node中的api小练习
05-17
node中的api小练习
Java小练习
04-02
jdk的熟悉，方便新手熟悉jkd方法，jdk的熟悉，方便新手熟悉jkd方法，jdk的熟悉，方便新手熟悉jkd方法，
html小练习.docx
08-27
html小练习.docx
小练习css
03-11
简单的一个小例子希望大家能够参考，不需要积分，免费下载
树的遍历（先序、中序、后序详解）
热门推荐
qq_44721518的博客
06-28 3万+
树的遍历主要有三种 1、先序遍历：先遍历根节点，再遍历左节点，最后遍历右节点； 2、中序遍历：先遍历左节点，再遍历根节点，最后遍历右节点； 3、后序遍历：先遍历左节点，再遍历右节点，最后遍历根节点； 总结：先、中、后就表示根节点的遍历处于哪个位置，而总是先左节点后右节点。例如先序遍历，“先”表示根节点最先遍历，再左节点，最后右节点。依此类推中序遍历，后序遍历。 接下来看一个题目，看一下你们是怎么做的。 我们以中序遍历为例来讲（每次以三个节点为一个整体）： 首先从树的根节点开始即C F E 我们再依次来看，
Collections.sort()的详细讲解
qq_44721518的博客
05-29 3万+
Collections.sort()的详细讲解 很多时候都需要对一些数据进行排序的操作。然而那些数据一般都是放在一个集合中如：Map ，Set ，List 等集合中。他们都提供了一个排序方法 sort()，要对数据排序直接使用这个方法就行，但是要保证集合中的对象是 可比较的。 怎么让一个对象是 可比较的，那就需要该对象实现 Comparable 接口啦。然后重写里面的 compareTo()方法。我们可以看到Java中很多类都是实现类这个接口的 如：Integer，Long 等 假设我们有一个学生类，默认需
码分复用的详解
qq_44721518的博客
06-17 1万+
在CDMA中，每个比特时间再划分为m个短的间隔，成为码片，通常m值为64或128，一般m=8 规则如下： 1、使用CDMA的每一个站被指派一个唯一的m bit码片序列，一个站如果要发送比特1，则发送它自己的m bit码片序列，如果要发送0，则发送该码片序列的二进制反码，按照惯例将码片中的0写成-1，将1写成+1、 例如 站点A：0 0 0 1 1 0 1 1 一般写成-1 -1 -1 1 1 -1 1 1 发送比特1，则A站发送码片序列为（0 0 0 1 1 0 1 1）表示发送1 2、【CDMA给每一个站
Spooling（假脱机）系统
qq_44721518的博客
05-01 2945
Spooling（假脱机）系统 多道程序技术：一台物理CPU虚拟为多台逻辑CPU Spooling技术：一台物理I/O设备虚拟为多台逻辑I/O设备 前身：为了缓和CPU的高速性与I/O设备的低速性间的矛盾，引入了脱机输入、脱机输出技术。（例如脱机输入）该技术是利用专门的外围控制机，先将低速I/O设备上的数据传送到高速磁盘上。当处理机需要输入数据时，直接从磁盘中读取数据。 Spooling（Simu...
java中带标号的break与continue详解
qq_44721518的博客
03-10 2183
java中带标号的break与continue详解 结合后都会 int i = 0,j = 0,t = 0; for(i = 0;i<2;i++) { outer: for(j = 0;j<2;j++) { for(t = 0;t<3;t++) { if(t == 2) continue outer; System.out.println("i = "...
实验一循环首次适应算法
qq_44721518的博客
06-12 1898
package Test; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.Scanner; public class adapt { public static void main(String[] args) { Txt txt = new Txt(); txt.request(); }
I/O系统的层次结构与模型
qq_44721518的博客
05-03 1629
I/O系统的层次结构与模型
构造函数详细总结
qq_44721518的博客
03-25 958
构造函数详细总结 一.构造函数的功能：在创建对象时初始化对象的实例变量； 【注意事项】 1.构造函数【与类具有相同的名字】，除了构造函数，其他的方法不能与类同名。 2.构造函数【没有返回值】，也不能在前面加void修饰符 3.如果类中没有定义构造函数，编译器会自动创建一个缺省的、不带参数的构造函数。 【构造函数是在对象创建之后，new操作完成前被调用的。】 二.this指代构造函数 1.在一个类...
实验二、进程调度模拟实验
qq_44721518的博客
06-12 867
import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.LinkedHashSet; import java.util.LinkedList; import java.util.Queue; import java.util.Scanner; import com.sun.jndi.url.iiopname.iiopnameURLContextFact.
vb.net 编程小练习
最新发布
11-28
VB.NET编程小练习是一个旨在帮助学习者熟悉VB.NET编程语言和解决问题的练习。在这些练习中，学习者可以通过编写简单的程序来实践他们所学的知识，从而提高他们的编程技能和理解能力。 这些小练习可以包括以下内容：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值