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. CF789B. Masha and geometric depression

    /* CF789B. Masha and geometric depression http://codeforces.com/contest/789/problem/B 水题 各种特判,贼烦 */ ...

  2. mongodb--游标与链式查找

    一:游标 [能不用游标的地方就不要用游标,它是占用数据库资源的] find操作是返回一个游标,为了方便我们查看结果,mongodb shell会自动迭代结果.[游标也是递增的] 2.迭代结果的两种方式 ...

  3. 【日常学习】【搜索/递归】codevs2802 二的幂次方题解

    转载请注明出处 [ametake版权全部]http://blog.csdn.net/ametake欢迎来看 题目描写叙述 Description 不论什么一个正整数都能够用2的幂次方表示. 比如:13 ...

  4. CSDN日报20170423 ——《私活，永远挽救不了自己屌丝的人生！》

    [程序人生]私活,永远挽救不了自己屌丝的人生! 作者:北漂周 大多数接私活的人.是压根不知道下班后的时间他能够干什么!看剧?追星?逛街?当然,与这些对照,私活是一个更好的选择. 假设有这个时间,为什么 ...

  5. With Storm Spouts, when is declareOutputFields( ) called?

    The method IComponent.declareOutputFields(...) is called on the client machine when the client code ...

  6. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第12章节--SP 2013中远程Event Receivers 总结

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第12章节--SP 2013中远程Event Receivers  总结         本章节向你介绍了SP平台上eve ...

  7. UVA - 11077 Find the Permutations (置换)

    Sorting is one of the most usedoperations in real life, where Computer Science comes into act. It is ...

  8. C语言高速入门系列(一)

    C语言高速入门系列(一)  本系列引言: 本教程的宗旨是将C语言入门的内容进行关键知识点的提纯,将一些笼统的废话去除; 再进行压缩,然后将本章的关键知识点做成路线图的,能够更加方便地掌握学习的方向; ...

  9. Python生成器实现杨辉三角打印

    def triangles(): c = [1] while 1: yield c a,b=[0]+c,c+[0] c=[a[i]+b[i] for i in range(len(a))] n = 0 ...

  10. 大数字运算——2、BigDecimal

    package com.wh.BigInteger; import java.math.BigDecimal; import java.util.Arrays; /** * @author 王恒 * ...