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. 邓_ SVN·最新使用教程总结

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  2. 洛谷 P1129 BZOJ 1059 cogs 660 [ZJOI2007]矩阵游戏

    题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏――矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作: 行交 ...

  3. Jquery语法基础

    Jquery语法基础 一.Jquery一般语法格式为:$(selector).action() l  美元符号定义 jQuery (又称工厂函数) l  选择器(selector)“查询”和“查找” ...

  4. Shallow Heap 和 Retained Heap的区别

    http://blog.csdn.net/a740169405/article/details/53610689 Shallow Heap 和 Retained Heap的区别 https://i.c ...

  5. Sigma Function 数学 因子求和

    Sigma function is an interesting function in Number Theory. It is denoted by the Greek letter Sigma ...

  6. [bzoj3389][Usaco2004Dec]Cleaning Shifts安排值班_最短路

    Cleaning Shifts bzoj-3389 Usaco-2004Dec 题目大意:每天有n个时间段,每个时间段都必须安排一个奶牛值班.有m个奶牛,每个奶牛只有一个空闲时间s[i]~e[i],求 ...

  7. spring-cloud-feign 使用@RequetParam报错QueryMap parameter must be a Map: class java.lang.String

    这里使用spring-cloud-start-feign: 1.2.2 REALEASE版本,依赖管理器版本是 Camden.SR2 出错的原因是@RequestParam的value为empty时, ...

  8. 今天玩了tensorflow playground，太好玩了

    先上地址: http://playground.tensorflow.org 我试了一个最复杂的,螺旋形的.开始怎么训练都不行.后来我多加了几个神经元,居然能训练成功了.真是太牛逼了!

  9. 在windows下怎样更新vundle？

    本文出自Svitter的blog 更新Vundle的时候.不管是输出BundleInstall.还是PluginInstall! 都会调用系统的git,所以必须安装git才干达到目的更新插件. git ...

  10. [Wikioi 1226]倒水问题

    题目描写叙述 Description 有两个无刻度标志的水壶.分别可装 x 升和 y 升 ( x,y 为整数且均不大于 100 )的水. 设另有一水 缸,可用来向水壶灌水或接从水壶中倒出的水, 两水壶 ...