1  <!--首先在div中添加四个span标签-->
<div>
<!--span*4+tab-->
<!--span{span$}*4-->
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
</div>
2  设置span标签的背景色，让其显示出来
/*div span表示div子标签中第几个span*/
div span:nth-child(1){
background: saddlebrown;
}
 
结果如下图所示：

3

一旦设置了绝对位置：absolute，
它跑到其他地方，下一个span就会挤上来，占到它的位置

4   分别设置四个span的位置，注意这里设置的是绝对位置

5  但是这里我的div并没有显示出颜色来，怎么办呢

设置背景

background: pink;
没有居中，需要调一下div的margin，设置为auto
/*整体居中 margin: 0 auto;*/
margin: 200px auto;
position: relative;

完整html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<!--然后设置div和span的样式-->
<style>
div{
height:300px;
width: 300px;
background: pink;
border: 20 solid red;
/*整体居中 margin: 0 auto;*/
margin: 200px auto;
position: relative;
}
/*div span表示div子标签中第几个span*/
div span:nth-child(1){
background: saddlebrown;
/*一旦设置了绝对位置：absolute，
它跑到其他地方，下一个span就会挤上来，占到它的位置*/
position: absolute;
/*对于left和right，top设置，设左不设右，设上不设下*/
left: 0px;
top: 0px;
 
}
div span:nth-child(2){
background: plum;
position: absolute;
right: 0px;
top: 0px;
 
}
div span:nth-child(3){
background:green;
position: absolute;
/*对于left和right，top设置，设左不设右，设上不设下*/
left: 0px;
bottom: 0px;
}
div span:nth-child(4){
background: orange;
position: absolute;
/*对于left和right，top设置，设左不设右，设上不设下*/
right: 0px;
bottom: 0px;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VS Code编写html之页面布局</title>
</head>
<body>
<!--首先在div中添加四个span标签-->
<div>
<!--span*4+tab-->
<!--span{span$}*4-->
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
</div>
</body>
</html>
 
 

VS Code中编写html(5) 标签的布局设置的更多相关文章

  1. VS Code中编写html(4) 标签的宽高颜色背景设置

    1  <!+Tab键--> <!--有两个div标签时,分别设置style,有两种方法--> <div id="div1">第一个div标签:& ...

  2. VS Code中编写html(3) 标签的宽高颜色背景设置

    1 创建一个div标签: <body> <div> 这是一个div标签: </div> </body> 变成了圆圆的,是因为后面有设置了样式: back ...

  3. 在VS Code中编写IAR项目

    在VS Code中编写IAR项目 首先按照网上的教程,下载C/C++插件,以及IAR Eebedded Workbench插件,安装完成重启VS Code. 项目目录下新建.vscode文件夹,并新建 ...

  4. VS Code中编写C

    Visual Studio Code如何编写运行C.C++? Visual Studio Code的C/C++扩展功能 vscode配置C/C++的编译调试环境

  5. Visual Studio Code 中编写 C++ 的工作流

    1. 官网下载 Visual Studio Code ,安装.按提示安装 cpp 插件和 cmake 插件. 官网下载 CMake ,安装. 官网下载 Mingw ,安装. 安装 Mingw 时,注意 ...

  6. VS Code中html 如何查找标签（5）

    1  添加几个标签 <body> <span>第一个span标签</span> <p>这是第一个p标签</p> <span>第二 ...

  7. 微软发布 Pylance：改善 VS Code 中的 Python 体验

    原标题:微软发布 Pylance:改善 VS Code 中的 Python 体验 来源:开源中国 微软宣布推出一种新的 Python 语言服务器,名为 Pylance,其可利用语言服务器协议与 VS ...

  8. HTML中head与body标签

    一 head内常用标签 1.meta相关 #1.指定字符集 <meta charset="gbk"> #2.页面描述 <meta name="Descr ...

  9. Dubbo中对Spring配置标签扩展

    Spring提供了可扩展Schema的支持,完成一个自定义配置一般需要以下步骤: 设计配置属性和JavaBean 编写XSD文件 编写NamespaceHandler和BeanDefinitionPa ...

随机推荐

  1. PHP多进程初探 --- 利用多进程开发点儿东西吧

    [原文地址:https://blog.ti-node.com/blog...] 干巴巴地叨逼叨了这么久,时候表演真正的技术了! 做个高端点儿的玩意吧,加入我们要做一个任务系统,这个系统可以在后台帮我们 ...

  2. 2、在1.VMware虚拟机上安装ubantu系统

    1.新建新的虚拟机系统 2.使用自定义高级安装 3.选择下一步操作 4.选择稍后安装 4.因为我们要安装的是Linux的发行版本ubuntu,所以这里选择Linux(L),版本是Ubuntu 64位, ...

  3. 1 java开发工具IDEA的使用

    IntelliJ IDEA 2017.1汉化破解版安装图文教程(附汉化补丁) 注册码:http://idea.lanyus.com/  点击在线生成 IntelliJ IDEA 2017.1正式版发布 ...

  4. C#--Task知识点

    5天玩转C#并行和多线程编程 TASK使用总结 Task是什么,字面意思是任务 表示一个异步操作.它是异步操作的首选方式.Task是FRAMEWORK4中的新特性,封装了以前的Thread,并管理Th ...

  5. Remote Desktop安卓软件实现手机远程控制电脑

    这篇文章写的是利用Remote Desktop安卓软件实现手机远程控制电脑. 电脑上的操作: 鼠标右击计算机>属性>远程设置>计算机名 如下图:

  6. OSX: 安装打印机的有用命令行

    事实上非常easy.就是有用lpadmin命令,以下给出一个样例: printername="YOUR_PRINTER_NAME" location="LOCATION ...

  7. error at ::0 can't find referenced pointcut...解决方法

    error at ::0 can't find referenced pointcut...解决方法 学习了:http://dyldragon.iteye.com/blog/512612 升级aspe ...

  8. Android--真机调试程序方法

    方法例如以下: (1)手机通过数据线连接到手机上. (2)在手机中设置:设置-->应用程序-->开发-->USB调试 (3)在CMD中測试一下.连接是否正常,CMD中命令例如以下: ...

  9. 新安装的wampserver怎么使用本机已有的mysql作为数据库

    一般在一台没有安装mysql的机器上安装好wamp后,能够直接在wamp的phpMyAdmin中打开集成的mysql并设置用户信息. 而假设之前已经安装配置好mysql(实usernamepasswo ...

  10. 使用java -jar运行jar包

    使用java -jar运行jar包 摘要 其实不难,网上搜了不少,但是讲不全,或者讲得不少,有的细节却漏掉了, 在此,我想将详细点 java -jar 1.其实命令比较简单:进入相应的目录后,执行ja ...