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. Q&A to prepare interview of HSBC

    1.How do you keep updating lastest IT knowledge? 1).keep an eye on current project technology evetho ...

  2. 提高生产力:开源Java工具包Jodd(Java的”瑞士军刀”)

    官方网站:http://jodd.org/ 下载地址:http://jodd.org/download/index.html Jodd=tools + ioc + mvc + db + aop + t ...

  3. 认识一下.net的架构设计

    首先我们先逐步的了解一下.net都包含什么? 从层次结构上来看,公共语言运行时(CLR:Common Language Runtime).服务框架(Services Framework)和上层的两类应 ...

  4. Spring MVC-环境设置（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_environment_setup.htm 说明:示例基于Spring MVC 4 ...

  5. 一篇文档掌握Jdk8中Javascript引擎Nashorn的使用方法

    翻译和编译自: http://docs.oracle.com/javase/8/docs/technotes/guides/scripting/nashorn/toc.html 用Notepad++新 ...

  6. HDU 4518

    整理一下思路,明天再写... 这道题,其实就是求包含大于10的斐波那切数字的第K(K是斐波那契数)个数.注意到斐波那契数的爆炸性增长,所以在范围 内的符合要求的F数并不多吧.比如求第K个F数,那么,前 ...

  7. 2015多校联合训练赛 hdu 5308 I Wanna Become A 24-Point Master 2015 Multi-University Training Contest 2 构造题

    I Wanna Become A 24-Point Master Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 ...

  8. 利用scrapy抓取网易新闻并将其存储在mongoDB

    好久没有写爬虫了,写一个scrapy的小爬爬来抓取网易新闻,代码原型是github上的一个爬虫,近期也看了一点mongoDB.顺便小用一下.体验一下NoSQL是什么感觉.言归正传啊.scrapy爬虫主 ...

  9. android制作闪动的红心

    先上一张效果图吧: 说说这个东西的来源吧.今天突然想到笛卡尔心形图,想去看看能不能画个心出来,可是看到一篇不错的文章,那篇文章罗列了非常多关于心形的函数方程,这可把我高兴坏了,于是我选取了一个比較好看 ...

  10. SpringMVC文件上传和下载的实现

    SpringMVC通过MultipartResolver(多部件解析器)对象实现对文件上传的支持. MultipartResolver是一个接口对象,需要通过它的实现类CommonsMultipart ...