web程序设计（4）——设置浮动的div样式

最新推荐文章于 2021-08-03 22:35:32 发布

My_summers

最新推荐文章于 2021-08-03 22:35:32 发布

阅读量1.3k

点赞数

分类专栏： Web 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44164249/article/details/103927935

版权

Web 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

实验要求

在这里插入图片描述

实验7 清除特性
在这里插入图片描述

实验目的

熟悉掌握盒子模型，理解div的浮动属性。

实验内容

打开visual studio core，创建一个文件夹。在文件夹中增添html文件，记得加上后缀名.html
打出‘！’+tab键，使用emmet插件进行自动补齐
写‘title’标签，命名网页名
[实验1]
<1>设置最外围的div,利用class选择器设置其背景颜色，字体，字体大小等属性，设置padding使内容与边框分隔开一些距离，设置边框界线为黑色实线【border:1px solid black】，设置margin使其与其他同级别的元素分隔开来，让页面更美观;
<2>往outside里面嵌入三个div,其中第一个是left浮动型，第二，三个是正常div,第一个div设为浮动型后可以与第二个div显示在同一行，而且第二个div的左边框被覆盖。但是第三个div在正常标准流内，一定会另起一行。
<3>将内嵌的div(不包括文字div)背景颜色都设为蓝色，设置padding ,margin还有border属性，使每个内嵌的div都存在一定间隔，内容显示在div内部，边界线都为黑色虚线。不需要设置div的宽高，高度以输入的字符高度为准，宽度均为外层div的content宽度（浮动型div与正常div共享宽度）
<4>往外层div再加入文字层，利用class选择器设置属性，主要不同的是要将其背景颜色设为粉色；再往里面写入文字

HTML：

 <div class="outside">

<div class="inside1">Box1</div>

<div class="inside2">Box2</div>

<div class="inside2">Box3</div>

<div class="text">
    <p>
            我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
            如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
    </p>
</div>
</div>
CSS:
外界div：
.outside
{
font-size:12px;
font-family: Arail;
padding:10px;
background-color:#fffcd3;
border:1px solid black;
width:50%;
margin: 20px;
}

第一种小div：

.inside1
{
padding:10px;

border:1px dashed black;

background:#a9d6ff;

margin:5px;

float:left;    
}

第二种小div:

.inside2
{
padding:10px;
border:1px dashed black;
margin: 5px;
background:#a9d6ff;
}

文字div:

.text
{
    background-color:pink;
    border:1px dashed black;
    padding: 5px;
}

效果图：
在这里插入图片描述
[实验2]
<1>只要将实验一中的Box2的class改成inside1就可以了，两个浮动的div与正常div共享宽度，Box3的左边框被覆盖
HTML:

<div class="outside">

        <div class="inside1">Box1</div>
        
        <div class="inside1">Box2</div>
        
        <div class="inside2">Box3</div>
        <div class="text">
                <p>
                        我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
                        如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
                </p>
            </div>
</div>

效果图：
在这里插入图片描述

[实验3]
<1>将实验2中的Box3的class改成inside1，文字div中的文字不能被覆盖，所以显示在三个浮动div的旁边

在这里插入图片描述

[实验4]
<1>将实验3中的Box3删去之后，新增inside3类型的div,inside3的float属性设为right,其他属性和Box1，Box2一样
HTML：

<div class="outside">

        <div class="inside1">Box1</div>
        
        <div class="inside1">Box2</div>
        
        <div class="inside3">Box3</div>
        <div class="text">
                <p style="clear: both;">
                        我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
                        如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
                </p>
            </div>
</div>

CSS：

.inside3
{
padding:10px;

border:1px dashed black;

background:#a9d6ff;

margin:5px;

float:right;    

}

效果图：
在这里插入图片描述

[实验5]
<1>把实验4中Box2的float方向改为right，Box3的float方向改为left
效果图:
在这里插入图片描述
[实验6]
<1>在实验3中的Box1中再内嵌一个默认的div，Box1的高度被撑高
Html:

 <div class="inside1">Box1
                <div >Box1</div>
 </div>

在这里插入图片描述 [实验7]
在实验4中的文字部分使用行内样式的方法，给p添加样式，分别设置clear属性为both，left，查看效果
Html:

<p style="clear: both;">
                        我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
                        如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
</p>

效果图:
在这里插入图片描述

在这里插入图片描述

实验效果

在这里插入图片描述

实验完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
.outside
{
font-size:12px;

font-family: Arail;

padding:10px;

background-color:#fffcd3;

border:1px solid black;

width:50%;
margin: 20px;
}
.inside1
{
padding:10px;

border:1px dashed black;

background:#a9d6ff;

margin:5px;

float:left;    
}
.inside2
{

padding:10px;
border:1px dashed black;
margin: 5px;
background:#a9d6ff;
}

.inside3
{
padding:10px;

border:1px dashed black;

background:#a9d6ff;

margin:5px;

float:right;    

}
.text
{
    background-color:pink;
    margin:0px;
    border:1px dashed black;
    padding: 5px;

}

        </style>
    <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>实验04</title>
   
        
</head>
<body>
<!-- 浮动布局01 -->
<div class="outside">

<div class="inside1">Box1</div>

<div class="inside2">Box2</div>

<div class="inside2">Box3</div>

<div class="text">
    <p>
            我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
            如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
    </p>
</div>
</div>

<!-- 浮动布局02 -->
<div class="outside">

        <div class="inside1">Box1</div>
        
        <div class="inside1">Box2</div>
        
        <div class="inside2">Box3</div>
        <div class="text">
                <p>
                        我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
                        如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
                </p>
            </div>
</div>
<!-- 浮动布局03 -->
<div class="outside">

                <div class="inside1">Box1</div>
                
                <div class="inside1">Box2</div>
                
                <div class="inside1">Box3</div>
                <div class="text">
                        <p>
                                我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
                                如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
                        </p>
                    </div>
        </div>
<!-- 浮动布局03 -->
<div class="outside">

        <div class="inside1">Box1</div>
        
        <div class="inside1">Box2</div>
        
        <div class="inside3">Box3</div>
        <div class="text">
                <p>
                        我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
                        如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
                </p>
            </div>
</div>
 <!-- 浮动布局04 -->
<div class="outside">

        <div class="inside1">Box1</div>
        
        <div class="inside3">Box2</div>
        
        <div class="inside1">Box3</div>
        <div class="text">
                <p>
                        我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
                        如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
                </p>
            </div>
</div>
  <!-- 浮动布局05 -->
<div class="outside">

        <div class="inside1">Box1
                <div >Box1</div>
        </div>
        
        <div class="inside1">Box2</div>
        
        <div class="inside1">Box3</div>
        <div class="text">
                <p>
                        我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
                        如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
                </p>
        </div>
</div>

<div>
        <img src="love.jpg" alt="a" style="width:50%;  height: 100%;float:left;">
        <p>
                        我们都知道，这个世界是由无数多个的微粒组成的，看起来庞大的宇宙其实可以细微到比尘埃还小。
                        如同物质世界，人类的可贵品质——诚信，也是由一个个微不足道的行为来体现的。生活中的诚信之举，若你留心，点滴可见。
        </p>
        
 </div>

</body>
</html>

My_summers

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web程序设计（4）——设置浮动的div样式

实验要求实验7 清除特性实验目的熟悉掌握盒子模型，理解div的浮动属性。实验内容打开visual studio core，创建一个文件夹。在文件夹中增添html文件，记得加上后缀名.html打出‘！’+tab键，使用emmet插件进行自动补齐写‘title’标签，命名网页名[实验1]<1>设置最外围的div,利用class选择器设置其背景颜色，字体，字...
复制链接

扫一扫

专栏目录