欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

学习CSS浮动知识 & 做个简单对话框

程序员文章站 2022-06-23 12:28:11
浮动以三个div为例,如果直接运行,会从上至下排列。效果如下:那么如何让图片乖乖的从左到右排列呢?我们利用float,即浮动布局。div{float:left; /*左浮动*/}效果如下:若要让三者中间有间隔呢?可利用margindiv{float:left; /*左浮动*/ margin: 10px;}效果如下:下面制作出一个简单的聊天对话框,利用列表:html 文件:

浮动

以三个div为例,如果直接运行,会从上至下排列。
效果如下:
学习CSS浮动知识 & 做个简单对话框
那么如何让图片乖乖的从左到右排列呢?
我们利用float,即浮动布局。

div{
	float:left; /*左浮动*/
}

效果如下:
学习CSS浮动知识 & 做个简单对话框
若要让三者中间有间隔呢?
可利用margin

div{
	float:left;  /*左浮动*/
    margin: 10px;
}

效果如下:
学习CSS浮动知识 & 做个简单对话框

浮动元素的重叠问题

  • 浮动元素不会覆盖文字内容;
  • 浮动元素不会覆盖图片内容;
  • 浮动元素不会覆盖表单(输入框,单选按钮,下拉选择等)内容。

聊天对话框制作

下面制作出一个简单的聊天对话框,利用浮动和列表:

  • html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天对话框</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p>
        聊天对话框
    </p>
    <div id="box">
        <ul>
            <li class="one">你好</li>
            <li class="two">你也好</li>
            <li class="one">吃饭了吗</li>
            <li class="two">吃了</li>
            <li class="one">吃的什么</li>    
            <li class="two">你吃的什么</li>           
            <li class="one">我没吃</li>
            <li class="two"></li>      
            <li class="one">那你吃的什么</li>
            <li class="two">海鲜,牛排,炸鸡,烤串,冰淇淋,寿司...</li>
            <li class="one">再见</li>
        </ul>
    </div>   
</body>
</html>
  • css 文件:
ul {                                /*设置聊天边框*/
    width: 400px;
    height: 800px;
    border-width: 1px;              /*边框宽度为 1 像素*/
    border-style: solid;            /*边框为实线*/
    border-color: royalblue;        /*边框颜色*/
    margin: auto;                   /*居中*/
    padding: 0 ;
}

li {
    margin: 10px 0;                 /*每句话上下间隔为10像素*/
    line-height: 40px;
    background-color: skyblue;
    list-style: none;               /*列表前无修饰*/
}

.one {
    float: left;                    /*左浮动*/
    margin-left: 20px;
    clear: right;                   /*清除右浮动*/
}

.two {
    float: right;
    margin-right: 20px;
    clear: left;
}

p {
    font-size: large;
    font-weight: bolder;
    text-align: center;
    color: royalblue;
}

效果如下:
学习CSS浮动知识 & 做个简单对话框

本文地址:https://blog.csdn.net/Web_blingbling/article/details/107465074

相关标签: html5 CSS