- html>
- <html>
- <head>
- <title>Flex布局title>
- <style>
- /* 在这里编写CSS样式 */
- style>
- head>
- <body>
-
- body>
- html>
标签内编写CSS样式,定义Flex布局的属性。例如,可以使用以下样式来创建一个简单的水平居中布局:- body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- }
```
在这个例子中,`display: flex;`将body元素设置为使用Flex布局,`justify-content: center;`和`align-items: center;`将内容水平和垂直居中,`height: 100vh;`设置body元素的高度为整个视口的高度。
标签内编写HTML结构,以实现所需的Flex布局。例如,可以创建一个包含两个子元素的Flex容器:- <div class="container">
- <div class="item">Item 1div>
- <div class="item">Item 2div>
- div>
- .container {
- display: flex;
- justify-content: space-between;
- }
-
- .item {
- background-color: lightblue;
- padding: 10px;
- }
```
在这个例子中,`.container`类应用于容器元素,设置其为Flex布局,并使用`justify-content: space-between;`将子元素在容器内水平排列,并在它们之间留有空白间距。`.item`类应用于子元素,并设置背景色和内边距。
- html>
- <html>
- <head>
- <title>Float布局title>
- <style>
- /* 在这里编写CSS样式 */
- style>
- head>
- <body>
-
- body>
- html>
标签内编写CSS样式,定义Float布局的属性。例如,可以使用以下样式来创建一个简单的左浮动布局:- body {
- overflow: hidden;
- }
-
- .left {
- float: left;
- width: 50%;
- }
-
- .right {
- float: right;
- width: 50%;
- }
在这个例子中,`body`元素的`overflow: hidden;`属性用于清除浮动,以便正确包含浮动元素。`.left`和`.right`类选择器分别应用于左浮动和右浮动的元素,并使用`width`属性设置宽度为50%。
标签内编写HTML结构,以实现所需的Float布局。例如,可以创建一个包含左浮动和右浮动元素的布局:- <div class="left">
-
- div>
- <div class="right">
-
- div>