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

最新推荐文章于 2024-04-04 12:25:24 发布

Web企鹅

最新推荐文章于 2024-04-04 12:25:24 发布

阅读量519

点赞数 5

本文链接：https://blog.csdn.net/Web_blingbling/article/details/107465074

版权

html5 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 0 订阅

订阅专栏

浮动

以三个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;
}

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

Web企鹅

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习CSS浮动知识 & 做个简单对话框

浮动以三个div为例，如果直接运行，会从上至下排列。效果如下：那么如何让图片乖乖的从左到右排列呢？我们利用float，即浮动布局。div{ float:left; /*左浮动*/}效果如下：若要让三者中间有间隔呢？可利用margindiv{ float:left; /*左浮动*/ margin: 10px;}效果如下：下面制作出一个简单的聊天对话框，利用列表：html 文件：<!DOCTYPE html><html lang="e
复制链接

扫一扫

专栏目录