css前端2

最新推荐文章于 2024-01-12 11:06:42 发布

苗苗大佬

最新推荐文章于 2024-01-12 11:06:42 发布

阅读量66

点赞数

分类专栏：前端 html 测试开发文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_39349045/article/details/119297894

版权

测试开发同时被 3 个专栏收录

71 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

3、都有哪些样式？
背景色：
background-color
字体颜色：
color
字体大小：
font-size
宽、高
height:
width:
边框
border: 2px solid firebrick;

    内外边距
        pandding
            内边距：元素和内部元素的间距叫内边距
        margin
            外边距：元素和外部的间距叫外边距

4、如何实现下面的图框？？？？
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <div style="width: 20%;height:10000px;float: left;background-color: rgb(69, 71, 71);">div</div>
        <div style="width: 80%;height:10000px;float: left;background-color: rgb(145, 158, 168);">div</div>
</body>
</html>

5、实现又一个展现
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>


.miao{
    margin-top: 20px;margin-bottom: 20px;height: 100px;margin-left: 20px;margin-right: 20px;width: 1000px;
    /* border: 2px solid black; */
    
   
}

</style>

</head>
<body>
        <div style="width: 20%;height:10000px;float: left;background-color: rgb(238, 234, 239);">距离宝宝出生还有110天</div>
        <div style="width: 80%;height:10000px;float: left;background-color: rgb(208, 216, 222);">

                <div class="miao" style="background-color: rgb(211, 222, 170);">
                        倒计时开始
                      </div>
                        110
                      </div>



        </div>
        
            
            
</body>
</html>

6、位置position、float
position:
fixed:固定在某一个位置 height为100%时，依托于屏幕的大小
absolute: 绝对位置,找的是屏幕的绝对位置通过top、left、right、bottom来进行控制
relative:相对父元素位置通过top、left、right、bottom来进行控制

<div class="pg-content" style="width: 80%;height:1000px;float: right;background-color: rgb(59, 219, 179)">
      <p style="position: absolute;top: 40px;left: 100px">这个是一个会找到绝对位置的 p标签 </p>
      <p style="position: relative;top:40px;left: 100px;">相对位置的P标签</p>
    <div class="pg-content-desc">
      <p style="display: inline">80%</p>
      <p style="display: inline">70%</p>

      <span style="display: block">span1</span>
      <span style="display: block">span2</span>

      <span style="display: inline-block">inline-block</span>
      <span style="display: None">inline-block-p</span>
    </div>
  </div>

7、display:
inline: 把块级标签转为行内标签，如

<p>

        block:  把行内标签转为块级标签 ，如

<span>

        inline-block: 即是块级又是行内标签
        None:不显示，隐藏

 <div class="pg-content" style="width: 80%;height:1000px;float: right;background-color: rgb(59, 219, 179)">
      <p style="position: absolute;top: 40px;left: 100px">这个是一个会找到绝对位置的 p标签 </p>
      <p style="position: relative;top:40px;left: 100px;">相对位置的P标签</p>
    <div class="pg-content-desc">
      <p style="display: inline">80%</p>
      <p style="display: inline">70%</p>

      <span style="display: block">span1</span>
      <span style="display: block">span2</span>

      <span style="display: inline-block">inline-block</span>
      <span style="display: None">inline-block-p</span>
    </div>
  </div>

苗苗大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css前端2

3、都有哪些样式？背景色：background-color字体颜色：color字体大小：font-size宽、高height:width:边框border: 2px solid firebrick; 内外边距 pandding 内边距：元素和内部元素的间距叫内边距 margin 外边距：元素和外部的间距叫外边距4、如何实现下面的图框？？？？<!DOCTYPE html>&l
复制链接

扫一扫

专栏目录