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. 单例模式的理解【php】

    单例模式(Singleton Pattern):顾名思义,就是只有一个实例.作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 为什么要使用单例模式 1.P ...

  2. django异常--数据库同步

    在新创建的Django项目中执行makemigrations时,遇到: 而仔细观察,这个报错的app名字是我们之前项目中的app名字,但现在却在我们当前的项目中报错了.究其原因,则是因为之前的项目中的 ...

  3. Maven学习总结（26）——maven update时，报：Preference node "org.eclipse.wst.validation"...

    详细情况如下: An internal error occurred during: "Updating Maven Project". Preference node " ...

  4. Spring Cloud Sleuth(十四)

    作用 再微服务中 服务调用服务很常见.服务中相互调用链路追踪的尤为重要,能够帮助我们再异常时分析出哪个服务出了异常.以及各个链路中相互调用所消耗时间,通过这些数据能够帮助我们分析出各个服务的性能瓶颈 ...

  5. 0807再整理SQL执行流程

    转自http://www.cnblogs.com/annsshadow/p/5037667.html MySQL架构总览->查询执行流程->SQL解析顺序   前言: 一直是想知道一条SQ ...

  6. JAVA实现多线程的两种方法

    参考URL: http://www.cnblogs.com/jbelial/archive/2013/03/17/2964472.html 1.继承 java.lang.Thread 类. 2.实现R ...

  7. 导致“mysql has gone away”的两种情况

    导致“mysql has gone away”的两种情况 By Cruise 1.  wait_timeout参数 在开发代理server时, 我使用了jdbc连接数据库,并采用长连接的方式连接数据库 ...

  8. android高速上手（二）android开发环境搭建及hello world

    基本了解了java语法,下一步.我们一起开启hello world的神奇之旅. (一)android开发环境搭建 之前搭建android开发环境是件很费力的事情,下载Eclipse.安装ADT等,现在 ...

  9. 简单总结static、final、this关键字的使用

    在最近看书的过程中,常常遇到static.final.this这三个关键字,不是很明白它们的使用,查阅资料结合实例做了如下总结: 一.static——无需创建对象就可以调用(方法.属性). 1.静态变 ...

  10. 【iOS开发-80】Quartz2D画图简单介绍：直线/圆形/椭圆/方形以及上下文栈管理CGContextSaveGState/CGContextRestoreGState

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2Vpc3ViYW8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...