Flex布局和Float布局的实现

心态呀

于 2023-09-22 20:10:22 发布

阅读量308

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_61885578/article/details/133184210

版权

一、Flex布局：

1.创建一个新的HTML文件。在HTML文件中输入以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>Flex布局</title>
    <style>
        /* 在这里编写CSS样式 */
    </style>
</head>
<body>
    <!-- 在这里编写Flex布局的HTML结构 -->
</body>
</html>

2.在`<style>`标签内编写CSS样式，定义Flex布局的属性。例如，可以使用以下样式来创建一个简单的水平居中布局：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

3.在`<body>`标签内编写HTML结构，以实现所需的Flex布局。例如，可以创建一个包含两个子元素的Flex容器：

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
</div>

4.在CSS样式中，为容器和子元素添加类选择器，并定义它们的样式。

.container {
    display: flex;
    justify-content: space-between;
}
 
.item {
    background-color: lightblue;
    padding: 10px;
}

5.保存HTML文件，并使用VS Code的Live Server扩展或直接在浏览器中打开HTML文件以查看Flex布局的效果。

二、Float布局：

1.创建一个新的HTML文件。在HTML文件中输入以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>Float布局</title>
    <style>
        /* 在这里编写CSS样式 */
    </style>
</head>
<body>
    <!-- 在这里编写Float布局的HTML结构 -->
</body>
</html>

2.在`<style>`标签内编写CSS样式，定义Float布局的属性。例如，可以使用以下样式来创建一个简单的左浮动布局：

body {
    overflow: hidden;
}
 
.left {
    float: left;
    width: 50%;
}
 
.right {
    float: right;
    width: 50%;
}

3.在`<body>`标签内编写HTML结构，以实现所需的Float布局。例如，可以创建一个包含左浮动和右浮动元素的布局：

<div class="left">
    <!-- 左浮动的内容 -->
</div>
<div class="right">
    <!-- 右浮动的内容 -->
</div>

4.保存HTML文件，并使用VS Code的Live Server扩展或直接在浏览器中打开HTML文件以查看Float布局的效果。

心态呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex布局和Float布局的实现

一、Flex布局：1.创建一个新的HTML文件。在HTML文件中输入以下基本结构：<!DOCTYPE html><html><head> <title>Flex布局</title> <style> /* 在这里编写CSS样式 */ </style></head><body> <!-- 在这里编写Flex布局的HTML结构 --&g
复制链接

扫一扫