<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
flex-direction: column;
align-items: center;
}
.navs{
width: 100%;
display: flex;
justify-content: space-between;
line-height: 40px;
height: 40px;
background-color: lightblue;
font-size: 20px;
}
.navs ol{
display: flex;
list-style: none;
}
.navs ol li{
width: 60px;
text-align: center;
}
.navs ol li a{
text-decoration: none;
color: white;
}
.navs ol li a:hover, .navs ol li.active a{
color: lightcoral;
}
.body{
width: 1100px;
background-color: lightgray;
display: flex;
}
.body .main{
width: 70%;
padding: 10px 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.body .aside{
width: 30%;
}
.body .main .item{
display: flex;
align-items: center;
padding: 10px 20px;
border: 1px solid lightcoral;
margin-bottom: 10px;
border-radius: 15px;
width: 40%;
}
.body .main .item .left{
width: 40%;
margin-right: 20px;
}
.body .main .item .left img{
width: 100%;
border-radius: 50%;
}
.body .main .item .right .head{
font-size: 20px;
text-align: center;
font-weight: 700;
}
.body .main .item .right .content{
text-indent: 2em;
}
.body .aside ol{
list-style: none;
}
.body .aside ol li{
height: 40px;
line-height: 40px;
margin: 5px 0;
font-size: 30px;
}
.body .aside ol li a{
text-align: center;
color: white;
text-decoration: none;
}
.body .aside ol li a:hover{
color: lightcoral;
}
</style>
</head>
<body>
<div class="navs">
<ol>
<li class="active"><a href="">首页</a></li>
<li><a href="">我的</a></li>
<li><a href="">文档</a></li>
</ol>
<ol>
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ol>
</div>
<div class="body">
<div class="main">
<div class="item">
<div class="left">
<img src="./img/head.webp" alt="">
</div>
<div class="right">
<div class="head">我是一个前端工程师</div>
<div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="./img/head.webp" alt="">
</div>
<div class="right">
<div class="head">我是一个前端工程师</div>
<div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="./img/head.webp" alt="">
</div>
<div class="right">
<div class="head">我是一个前端工程师</div>
<div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="./img/head.webp" alt="">
</div>
<div class="right">
<div class="head">我是一个前端工程师</div>
<div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="./img/head.webp" alt="">
</div>
<div class="right">
<div class="head">我是一个前端工程师</div>
<div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="./img/head.webp" alt="">
</div>
<div class="right">
<div class="head">我是一个前端工程师</div>
<div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="./img/head.webp" alt="">
</div>
<div class="right">
<div class="head">我是一个前端工程师</div>
<div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="./img/head.webp" alt="">
</div>
<div class="right">
<div class="head">我是一个前端工程师</div>
<div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
</div>
</div>
</div>
<div class="aside">
<ol>
<li><a href="">点我发现更多1</a></li>
<li><a href="">点我发现更多2</a></li>
<li><a href="">点我发现更多3</a></li>
<li><a href="">点我发现更多4</a></li>
<li><a href="">点我发现更多5</a></li>
<li><a href="">点我发现更多6</a></li>
<li><a href="">点我发现更多7</a></li>
<li><a href="">点我发现更多8</a></li>
<li><a href="">点我发现更多9</a></li>
<li><a href="">点我发现更多10</a></li>
</ol>
</div>
</div>
</body>
</html>
Flex弹性容器基础页面布局
最新推荐文章于 2024-08-14 09:51:23 发布