当前位置： 移动技术网 > IT编程>网页制作>HTML > 学习CSS浮动知识 & 做个简单对话框

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

2020年07月22日  | 移动技术网IT编程  | 我要评论

浮动

以三个div为例，如果直接运行，会从上至下排列。
效果如下：
在这里插入图片描述
那么如何让图片乖乖的从左到右排列呢？
我们利用float，即浮动布局。

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

效果如下：
在这里插入图片描述
若要让三者中间有间隔呢？
可利用margin

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

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

浮动元素的重叠问题

  • 浮动元素不会覆盖文字内容；
  • 浮动元素不会覆盖图片内容；
  • 浮动元素不会覆盖表单（输入框，单选按钮，下拉选择等）内容。

聊天对话框制作

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

  • 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;
}

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网