1  <!+Tab键-->
<!--有两个div标签时，分别设置style，有两种方法-->
<div id="div1">第一个div标签：</div>
<div class="div2">第二个div标签：</div>
2  设置div样式两种对应也不同，id用#，class用“.”
<style>
#div1{
height:
}
.div2{
}
</style>

3

/*设置和模型，宽高多少，标签就多大，不考虑标签的内边距因素*/
/*以边距为界向内压缩*/
box-sizing: border-box;
 

4   对第二个div标签的设置：

/*div标签字体的设置*/
color: green;
font-size: 25px;
background: rgba(150, 100, 0, 0.5);
/*background:rgb(200, 20, 30)}*/
/*边框*/
border:5px solid orange ;
/*切圆角*/
/*border-radius: 50%;*/
border-radius: 20px;
/*文字居中*/
text-align: center;
line-height: 200px;

两个div如下：

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 
<style>
#div1{
height:200px;
width: 200px;
border: 40px solid olive;
/*设置和模型，宽高多少，标签就多大，不考虑标签的内边距因素*/
/*以边距为界向内压缩*/
box-sizing: border-box;
/*对合内容的设置*/
box-sizing: content-box;
}
.div2{
width:200px;
height: 200px;
/*div标签字体的设置*/
color: green;
font-size: 25px;
background: rgba(150, 100, 0, 0.5);
/*background:rgb(200, 20, 30)}*/
/*边框*/
border:5px solid orange ;
/*切圆角*/
/*border-radius: 50%;*/
border-radius: 20px;
/*文字居中*/
text-align: center;
line-height: 200px;
}
</style>
 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=div">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>样式设置</title>
</head>
<body>
<!--<div>第一个div标签：</div>-->
<!--<div>第二个div标签：</div>-->
<!--有两个div标签时，分别设置style，有两种方法-->
<div id="div1">第一个div标签：</div>
<div class="div2">第二个div标签：</div>
</body>
</html>

VS Code中编写html(4) 标签的宽高颜色背景设置的更多相关文章

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

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

  2. VS Code中编写html(5) 标签的布局设置

    1  <!--首先在div中添加四个span标签--> <div> <!--span*4+tab--> <!--span{span$}*4--> < ...

  3. 在VS Code中编写IAR项目

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

  4. 多媒体开发之h264中的sps---sps信息提取之分辨率宽高提取2

    -------------------author:pkf -----------------------------time:2015-8-20 -------------------------- ...

  5. 如何设置a标签的宽高，如何使a标签的文字垂直居中

    通常情况下a标签是没有宽高的,设置 width 和 height 没有作用. 若要使用 width 和 height,需要把a标签转为块级元素,即:display:block|inline-block ...

  6. VS Code中编写C

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

  7. 为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别

    一直很困惑为什么canvas标签和其他标签不一样,宽高需要设置在canvas标签里,设置在style里就会有问题. 纯粹个人理解,有错误欢迎指出. > 结论写在头 设置在style里有问题其实是 ...

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

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

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

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

随机推荐

  1. java反射，简单demo

    直接上码 //获取方法.属性.构造函数时加 Declared 表示获取本类全部的,不分修饰符:不加 Declared 表示获取从父类继承的和本类公共的 //获取 First 类的无参构造函数 Cons ...

  2. Luogu P1198 BZOJ 1012 最大数 (线段树)

    手动博客搬家: 本文发表于20170821 14:32:05, 原地址https://blog.csdn.net/suncongbo/article/details/77449455 URL: (Lu ...

  3. 使用idea创建maven项目时 需要注意的问题

    截几张图来说明吧 上面的红色框如果不选中  将来创建的工程中没有webapp目录以及下面的子目录 选中之后  然后一直“下一步”  直到工程创建 但是我第一次按照正确的方式操作时  工程中并没有src ...

  4. rmq的st算法模板题 nyoj 119

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进行比 ...

  5. 【ACM】hdu_zs1_1005_大明A+B _201307291603

    大明A+B Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other)Total Submissi ...

  6. bzoj2878 [Noi2012]迷失游乐园 [树形dp]

    Description 放假了,小Z认为呆在家里特别无聊.于是决定一个人去游乐园玩. 进入游乐园后.小Z看了看游乐园的地图,发现能够将游乐园抽象成有n个景点.m条道路的无向连通图,且该图中至多有一个环 ...

  7. Setting up a EDK II build environment on Windows and Linux：搭建Windows和Linux开发环境[2.2]

    Setting up a EDK II build environment on Windows and Linux:搭建Windows和Linux开发环境[2.2] 2015-07   北京海淀区  ...

  8. Item 8：析构函数不要抛出异常 Effective C++笔记

    Item 8: Prevent exceptions from leaving destructors. 析构函数不要抛出异常 因为析构函数经常被自己主动调用,在析构函数中抛出的异常往往会难以捕获,引 ...

  9. 【POJ 3071】 Football

    [题目链接] http://poj.org/problem?id=3071 [算法] 概率DP f[i][j]表示第j支队伍进入第i轮的概率,转移比较显然 [代码] #include <algo ...

  10. Java-Spring MVC：JAVA之常用的一些Spring MVC的路由写法以及参数传递方式

    ylbtech-Java-Spring MVC:JAVA之常用的一些Spring MVC的路由写法以及参数传递方式 1.返回顶部 1. 常用的一些Spring MVC的路由写法以及参数传递方式. 这是 ...