HTML-Flex布局练习之仿写开源中国首页静态页面
说明
说明
- 开源中国网址:https://www.oschina.net/
- 开源中国首页静态页面仿写
- 全局使用Flex布局,需要学习者可以借鉴
- 下方代码含有本地图片地址,如需源码请下载,直接复制可能显示有问题!
- 效果图可能显示的不准确,请以运行结果为准
- ?:?山代码,大佬勿看!!! ≧ ﹏ ≦
效果图
效果图,点击展开查看
代码
点击展开查看代码
<!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">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="https://static.oschina.net/new-osc/js/utils/semantic-ui/semantic.min.css?t=1671184943000">
<link type="text/css" rel="stylesheet" href="https://static.oschina.net/new-osc/dist/css/web.00ab557d.css">
<title>开源中国首页-静态页面模仿练习</title>
<style>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
min-width: 320px;
background: #fff;
font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 1.4285em;
color: rgba(0,0,0,.87);
background-color: #F7F8F9;
}
.header-box{
background-color: white;
height: 72px;
width: 100%;
display: flex;
padding: 0;
margin: 0;
position: fixed;
top: 0;
box-shadow: 2px 2px 2px rgb(228, 227, 227);
z-index: 999;
}
.logo {
height: 72px;
width: 200px;
/* background-color: aliceblue; */
display: flex;
align-items: center;
}
.menu1 {
height: 72px;
width: 750px;
/* background-color: rgb(109, 187, 255); */
display: flex;
align-items: center;
/* position: relative; */
}
.menu2 {
height: 72px;
width: 600px;
/* background-color: rgb(109, 255, 111); */
display: flex;
align-items: center;
}
#logo {
background-image: url(./imgs/logo.png);
width: 155px;
height: 44px;
margin: 0 left;
margin-left: 40px;
}
/* gitee */
.bar1 {
display: flex;
position: relative;
margin-left: 30px;
height: 72px;
width: 72px;
/* background-color: rgb(240, 193, 193); */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #666666;
font-size: 16px;
}
a {
text-decoration-line: none;
color: #666666;
font-size: 16px;
}
a:hover {
color: black;
}
/* DevOps */
.DevOps {
background-color:#c71d24;
width: 50px;
height: 18px;
color: white;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
/* background: url(https://static.oschina.net/dist/oschina/event/imgs/flash_wide.gif) no-repeat center; */
}
/* 资讯 */
.bar2{
display: flex;
position: relative;
height: 72px;
width: 64px;
/* margin-left: 30px; */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #666666;
font-size: 16px;
}
/* 动弹 */
.bar3 {
display: flex;
position: relative;
height: 72px;
width: 64px;
/* margin-left: 30px; */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #666666;
font-size: 16px;
}
/* 专区 */
.bar4 {
display: flex;
position: relative;
height: 72px;
width: 64px;
/* margin-left: 30px; */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #666666;
font-size: 16px;
}
/* 问答 */
.bar5 {
display: flex;
position: relative;
height: 72px;
width: 64px;
/* margin-left: 30px; */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #666666;
font-size: 16px;
}
/* GOTC2023 */
.bar6 {
display: flex;
position: relative;
height: 72px;
width: 113px;
/* margin-left: 30px; */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #22b250;
font-size: 16px;
}
/* -----------------活动--------------------- */
/* 设置下拉按钮的样式 */
.dropbtn {
/* background-color: #4CAF50; */
color: #666666;
/* padding: 16px; */
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown { /*容器*/
position: relative;
display: inline-block;
}
/* 下拉内容（默认隐藏） */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: center;
color: #666666;
font-size: 12px;
}
/* 下拉链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 悬停时更改下拉链接的颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* -------------------------------------- */
/* 软件库 */
.bar7 {
display: flex;
position: relative;
height: 72px;
width: 80px;
/* margin-left: 30px; */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #666666;
font-size: 16px;
}
/* Tool */
.bar8 {
display: flex;
position: relative;
height: 72px;
width: 64px;
/* margin-left: 30px; */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #666666;
font-size: 16px;
}
/* 博客 */
.bar9 {
display: flex;
position: relative;
height: 72px;
width: 64px;
/* margin-left: 30px; */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #666666;
font-size: 16px;
}
/*------------------- 搜索框 ------------------*/
.container {
height: 72px;
width: 200px;
margin: 0 left;
display: flex;
align-items: center;
margin-left: 10px;
}
.search {
width: 150px;
height: 30px;
border-radius: 18px;
outline: none;
border: 0;
padding-left: 20px;
position: absolute;
background-color: #f7f7f7;
}
.btn {
height: 15px;
width: 15px;
position: absolute;
background: url("./imgs/搜索.png");
top: 28px;
left: 1060px;
border: none;
outline: none;
cursor: pointer;
}
.search:focus {
border: 0.5px solid #ccc;
}
.btn:hover {
background: url("./imgs/搜索\ \(1\).png");
}
/* ------------------------------------------ */
/* Phone */
.phone {
height: 20px;
width: 20px;
/* background-color: #c71d24; */
background-image: url(./imgs/手机\ \(1\).png);
}
.phone:hover {
background-image: url(./imgs/手机.png);
}
/* 登录 */
.login {
display: flex;
position: relative;
height: 72px;
width: 50px;
margin-left: 10px;
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #f3f2f2;
font-size: 14px;
}
.login:hover {
color: #ccc;
}
/* 注册 */
.register {
display: flex;
position: relative;
height: 72px;
width: 50px;
/* margin-left: 30px; */
align-items: center;
text-align: center;
justify-content: center;
text-align: justify;
color: #f3f2f2;
font-size: 14px;
}
.register:hover {
color: #ccc;
}
/*------------------------------- 中间部分----------------------------------- */
.content-center{
height: 2500px;
width: 888px;
background-color: white;
border-radius: 5px;
margin-top: 95px;
margin-left: 160px;
display: flex;
align-items: center;
/* justify-content:center; */
/* flex-wrap: wrap; */
/* flex-direction: row; */
flex-direction: column;
box-shadow: 0px 0px 3px rgb(228, 227, 227);
}
.content-1 {
height: 407px;
width: 824px;
/* background-color: #ccc; */
margin-top: 25px;
display: flex;
}
.content-1-1 {
width: 400px;
height: 400px;
/* background-color: #ff8978; */
}
.content-1-2 {
width: 400px;
height: 400px;
/* background-color: #ff8978; */
margin-left: 23px;
}
.content-1-1-top {
width: 400px;
height: 30px;
/* background-color: #22b250; */
display: flex;
align-items: center;
}
.content-1-2-top {
width: 400px;
height: 30px;
/* background-color: #22b250; */
display: flex;
align-items: center;
}
.content-1-1-top-1 {
width: 300px;
height: 22px;
/* background-color: #c71d24; */
color: #111111;
font-size: 16px;
}
.content-1-1-top-2 {
width: 50px;
height: 22px;
/* background-color: #666666; */
display: flex;
align-items: center;
}
.content-1-1-top-3 {
width: 50px;
height: 22px;
/* background-color: #eb1e1e; */
text-align: center;
color: #999999;
}
.d {
width: 8px;
height: 8px;
/* background-color: #7ED321; */
background-color: #D8D8D8;
margin-left: 8px;
}
.d:hover {
background-color: #7ED321;
}
.content-1-2-top-1 {
width: 300px;
height: 22px;
/* background-color: #c71d24; */
color: #111111;
font-size: 16px;
}
.content-1-2-top-2 {
width: 50px;
height: 22px;
/* background-color: #666666; */
display: flex;
align-items: center;
}
.content-1-2-top-3 {
width: 50px;
height: 22px;
/* background-color: #eb1e1e; */
text-align: center;
color: #999999;
}
.content-bottom-left{
width: 400px;
height: 360px;
/* background-color: #828dcc; */
}
.content-bottom-right{
width: 400px;
height: 360px;
/* background-color: #041264; */
}
.content-bottom-1 {
width: 400px;
height: 22px;
color: #111111;
font-size: 16px;
}
.content-bottom-right-1 {
width: 400px;
height: 22px;
color: #111111;
font-size: 16px;
}
.content-bottom-2 {
width: 400px;
height: 40px;
color: #888888;
font-size: 14px;
}
.content-bottom-right-2 {
width: 400px;
height: 40px;
color: #888888;
font-size: 14px;
}
.content-bottom-3{
width: 400px;
height: 280px;
/* background-color: #22b250; */
position: relative;
margin-top: 14px;
}
.content-bottom-right-3{
width: 400px;
height: 280px;
/* background-color: #22b250; */
margin-top: 14px;
}
.content-bottom-3-1{
width:400px;
height: 24px;
/* background-color: #c71d24; */
display: flex;
align-items: center;
position: relative;
justify-self:center;
margin-top: 2px;
}
#d {
border-radius: 100%;
width: 5px;
height: 5px;
background-color: #7ED321;
width: 5px;
height: 5px;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgb(225, 225, 225), rgba(228, 224, 224, 0.75), rgb(235, 235, 235));
}
/* -------------------中间的中间部分 ------------------*/
.content-center-center{
width: 830px;
height: 100px;
/* background-color: #7ED321; */
/* margin-top: -1030px; */
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
/* background-color: #f7f8f9;
background-image: -webkit-gradient(linear,left top,right top,from(#fff2ec),color-stop(30%,#fdedfa),to(#e1f0ff));
background-image: linear-gradient(90deg,#fff2ec 0,#fdedfa 30%,#e1f0ff 100%);
border-radius: 6px;
overflow: hidden; */
}
.content-center-inner {
width: 830px;
height: 100px;
/* background-color: #c71d24; */
/* background-image: linear-gradient(0deg,#fff 0,rgba(247,248,249,0) 100%);
background-image: -webkit-gradient(linear,left bottom,left top,from(#fff),to(rgba(247,248,249,0))); */
background-color: #f7f8f9;
background-image: -webkit-gradient(linear,left top,right top,from(#fff2ec),color-stop(30%,#fdedfa),to(#e1f0ff));
background-image: linear-gradient(90deg,#fff2ec 0,#fdedfa 30%,#e1f0ff 100%);
border-radius: 6px;
overflow: hidden;
}
.center-inner {
width: 830px;
height: 100px;
background-image: linear-gradient(0deg,#fff 0,rgba(247,248,249,0) 100%);
background-image: -webkit-gradient(linear,left bottom,left top,from(#fff),to(rgba(247,248,249,0)));
display: flex;
align-items: center;
justify-content: center;
}
.inner {
width: 824px;
height: 88px;
/* background-color: #7ED321; */
display: flex;
justify-content: left;
}
.all {
display: flex;
flex-wrap: wrap;
}
/* 滚动条样式修改 */
/*滚动条整体样式*/
.right-bottom::-webkit-scrollbar {
width: 4px;
}
/* 内部样式 */ /*滚动条里面小方块*/
.right-bottom::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
.right-bottom::-webkit-scrollbar-track {
background: #fff;
}
</style>
</head>
<body>
<div class="all">
<!-- -----------------------顶部导航栏------------------------- -->
<div class="header-box">
<div class="logo">
<div id="logo">
<!-- Logo -->
</div>
</div>
<div class="menu1">
<!-- 菜单 -->
<div class="bar1">
<a href="https://gitee.com/explore?utm_source=oschina&utm_medium=link-index&utm_campaign=home">Gitee</a>
<div class="DevOps">
DevOps
</div>
</div>
<div class="bar2">
<a href="https://www.oschina.net/news">资讯</a>
</div>
<div class="bar3">
<a href="https://www.oschina.net/tweets-new" style="color: #fa7c74;text-shadow: 3px -1px 11px #ff8978;">动弹</a>
</div>
<div class="bar4">
<a href="https://www.oschina.net/groups">专区</a>
</div>
<div class="bar5">
<a href="https://www.oschina.net/question">问答</a>
</div>
<div class="bar6">
<a href="https://www.oschina.net/action/visit/ad?id=1480" style="color: #22b250;">GOTC2023</a>
</div>
<div class="dropdown">
<a class="dropbtn" style="width: 87px;height: 72px;">活动 <i class="fa fa-sort-down"></i></a>
<div class="dropdown-content">
<a href="https://www.oschina.net/event" style="font-size: 12px;">开源活动</a>
<a href="http://bjos.oschina.net/" style="font-size: 12px;">开源创新大赛</a>
</div>
</div>
<div class="bar7">
<a href="https://www.oschina.net/project">软件库</a>
</div>
<div class="bar8">
<a href="https://tool.oschina.net/">Tool</a>
</div>
<div class="bar9">
<a href="https://www.oschina.net/blog">博客</a>
</div>
</div>
<div class="menu2">
<div class="container">
<input type="text" class="search" placeholder="大家都在搜...">
<input type="button" name="" id="" class="btn">
</div>
<div class="phone">
</div>
<div class="login">
<a href="https://www.oschina.net/home/login?goto_page=https%3A%2F%2Fwww.oschina.net%2F">登录</a>
</div>
<div class="register">
<a href="https://www.oschina.net/home/login?goto_page=https%3A%2F%2Fwww.oschina.net%2F">注册</a>
</div>
</div>
</div>
<!-- ----------------------中间 ----------------------------->
<div class="content-center">
<div class="content-1">
<div class="content-1-1">
<div class="content-1-1-top">
<div class="content-1-1-top-1">
综合资讯
</div>
<div class="content-1-1-top-2">
<div class="d" style="background-color: #7ED321;"></div>
<div class="d"></div>
<div class="d"></div>
</div>
<div class="content-1-1-top-3">
更多
</div>
</div>
<hr>
<div class="content-bottom-left"> <!-- 内容显示 1-->
<div class="content-bottom-1">
OpenAI 正式发布 GPT-4，支持接受图像输入
</div>
<div class="content-bottom-2">
GPT-4 通过了模拟律师考试，其分数在应试者的前 10% 左右；<br>相比之下，GPT-3.5 的得分却在倒数 10% 左右...
</div>
<div class="content-bottom-3">
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
</div>
</div>
</div>
<div class="content-1-2">
<div class="content-1-2-top">
<div class="content-1-2-top-1">
软件更新资讯
</div>
<div class="content-1-2-top-2">
<div class="d" style="background-color: #7ED321;"></div>
<div class="d"></div>
<div class="d"></div>
</div>
<div class="content-1-2-top-3">
更多
</div>
</div>
<hr>
<div class="content-bottom-right"> <!-- 内容显示 2-->
<div class="content-bottom-right-1">
PHPUnit 10 正式发布，PHP 单元测试框架
</div>
<div class="content-bottom-right-2">
PHPUnit 是一个轻量级的 PHP 测试框架。它是在 PHP5 下面对<br> JUnit3 系列版本的完整移植，是 xUnit 测试框...
</div>
<div class="content-bottom-right-3">
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
<div class="content-bottom-3-1">
<div id="d"></div>
<div style="margin-left: 10px; width: 364px;height: 24px;">
腾讯 2022 研发大数据报告：Go 蝉联最热编程语言
</div>
<div style="width: 31px;height: 24px; color: #AAAAAA; font-size: 12px;">
16:40
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 中间的中间部分 -->
<div class="content-center-center">
<div class="content-center-inner">
<div class="center-inner">
<div class="inner">
<div class="inner-left" style="width: 144px; height: 72px;display:
flex; justify-content:center;
flex-wrap: wrap;
flex-direction: row;">
<div class="inner-left-1" style="width: 117px;height: 20px; margin-left: 10px;color: #A21B1B;font-size: 14px;">
品牌专区
</div>
<div class="inner-left-2" style="width: 102px;height: 50px;display:flex; justify-content:center;
flex-wrap: wrap;
flex-direction: row;">
<img src="https://static.oschina.net/uploads/img/202008/26150206_XXzS.png" alt="" style="width: 37px;height: 37px;">
<span class="text" style="width: 91px;height: 13px; font-size: 13px;color: #111111;">华为开发者联盟</span>
</div>
</div>
<div style="width: 1px;height: 72px;background-image: linear-gradient(to right, rgb(225, 225, 225), rgba(228, 224, 224, 0.75), rgb(235, 235, 235));"></div>
<div class="inner-center" style="width: 234px; height: 72px; margin-left: 1px;justify-content:center;
flex-wrap: wrap;
flex-direction: row;">
<div class="inner-center-1" style="width: 218px;height: 20px;text-align: left; font-size: 14px;color: #A01F96;margin-left: 15px;">
推荐专区
</div>
<div class="inner-center-2" style="width: 222;height: 48px;display: flex;justify-content:center;
flex-wrap: wrap;
flex-direction: row;margin-top: 11px;">
<div style="width: 24px;height: 24px; margin-left: 10px;">
<img src="https://oscimg.oschina.net/oscnet/up-8c2c278c89999be12dd82a91603ba4bea5d.png" alt="" style="width: 24px;height: 24px;">
</div>
<div style="width: 56px;height: 20px; color: #111111;font-size: 14px;">
飞桨专区
</div>
<div style="width: 16px;height: 16px;margin-left: 30px;">
<img src="https://oscimg.oschina.net/oscnet/up-9c9306c8e26e02d12dc606d1bc677022887.png" alt="" style="width: 16px;height: 16px;">
</div>
<div style="width: 80px;height: 20px;color: #111111;font-size: 14px;text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;" >
OpenHarmony专区
</div>
<div style="width: 24px;height: 24px; margin-left: 10px;">
<img src="https://static.oschina.net/uploads/img/202011/04102009_4jWK.png" alt="" style="width: 16px;height: 16px;">
</div>
<div style="width: 56px;height: 20px; color: #111111;font-size: 14px;">
鲲鹏专区
</div>
<div style="width: 16px;height: 16px;margin-left: 30px;">
<img src="https://static.oschina.net/uploads/img/202010/30112123_qdW3.svg" alt="" style="width: 16px;height: 16px;">
</div>
<div style="width: 80px;height: 20px;color: #111111;font-size: 14px;text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;" >
openEuler
</div>
</div>
</div>
<div style="width: 1px;height: 72px;background-image: linear-gradient(to right, rgb(225, 225, 225), rgba(228, 224, 224, 0.75), rgb(235, 235, 235));"></div>
<div class="inner-right" style="width: 449px; height: 72px; margin-left: 1px;display: flex;flex-wrap: wrap;flex-direction: row;justify-content:center;">
<div class="inner-right-1" style="width: 423px;height: 20px;z-index: 999;">
<span style="font-size: 14px;color: #346fb6;">技术专区</span>
<span style="margin-left: 310px;font-size: 14px;color: #346fb6;">更多</span>
</div>
<div class="inner-right-2" style="width: 427px;height: 48px;display: flex;flex-wrap: wrap;flex-direction: row;justify-content:center;margin-top: 11px;">
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;text-align: left;">
非结构化数据
</div>
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;">
OpenVINO 中文社区
</div>
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;">
大前端
</div>
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;">
开发技能
</div>
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;">
程序库
</div>
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;text-align: left;">
云计算
</div>
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;">
飞桨专区
</div>
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;">
OpenHarmony专区
</div>
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;">
开源治理
</div>
<div style="width: 80px;height: 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; font-size: 14px;color: #111111;">
程序人生
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 中间偏下位置 -->
<div class="center-bottom-lite" style="width: 824px;height: 251px; display: flex;justify-content:center;
flex-wrap: wrap;
flex-direction: row;margin-top: 10px;">
<div class="center-bottom-lite-left" style="width: 400px;height: 251px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;">
<div style="width: 400px;height: 33px; display: flex;align-items: center;">
<img src="https://static.oschina.net/uploads/img/202008/31180532_jX3A.png" alt="" style="width: 24px;height: 24px;">
<span style="font-size: 16px;color: #111111;width: 80px;height: 20px;margin-left: 5px;">大前端专区</span>
<span style="width: 86px;height: 17px;color: #999999;font-size: 13px;margin-left: 200px;">104.6万人关注</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-left-2" style="width: 400px;height: 206px;margin-top: 5px;">
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
</div>
</div>
<div class="center-bottom-lite-right" style="width: 400px;height: 251px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;margin-left: 23px;">
<div style="width: 400px;height: 33px;display: flex;align-items: center;">
<img src="https://static.oschina.net/uploads/img/202008/31180731_vRmf.png" alt="" style="width: 24px;height: 24px;">
<span style="font-size: 16px;color: #111111;width:96px;height: 20px;margin-left: 5px;">开发技能专区</span>
<span style="width: 80px;height: 17px;color: #999999;font-size: 13px;margin-left: 195px;">105万人关注</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-right-2" style="width: 400px;height: 206px;margin-top: 5px;">
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">基于声网 Flutter SDK 实现互动直播</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">2.2k阅</span>
</div>
</div>
</div>
</div>
<!-- 中间偏下位置2 -->
<div class="center-bottom-lite" style="width: 824px;height: 251px; display: flex;justify-content:center;
flex-wrap: wrap;
flex-direction: row;margin-top: 10px;">
<div class="center-bottom-lite-left" style="width: 400px;height: 251px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;">
<div style="width: 400px;height: 33px; display: flex;align-items: center;">
<img src="https://static.oschina.net/uploads/img/202008/31180631_12ev.png" alt="" style="width: 24px;height: 24px;">
<span style="font-size: 16px;color: #111111;width: 80px;height: 20px;margin-left: 5px;">数据库专区</span>
<span style="width: 86px;height: 17px;color: #999999;font-size: 13px;margin-left: 200px;">109.9万人关注</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-left-2" style="width: 400px;height: 206px;margin-top: 5px;">
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
</div>
</div>
<div class="center-bottom-lite-right" style="width: 400px;height: 251px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;margin-left: 23px;">
<div style="width: 400px;height: 33px;display: flex;align-items: center;">
<img src="https://static.oschina.net/uploads/img/202008/31180625_Yr71.png" alt="" style="width: 24px;height: 24px;">
<span style="font-size: 16px;color: #111111;width:106px;height: 20px;margin-left: 5px;">云计算专区</span>
<span style="width: 90px;height: 17px;color: #999999;font-size: 13px;margin-left: 175px;">109.8万人关注</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-right-2" style="width: 400px;height: 206px;margin-top: 5px;">
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">官宣：OpenDAL 成功进入 Apache 孵化器</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">252阅</span>
</div>
</div>
</div>
</div>
<!-- 中间偏下位置3 -->
<div class="center-bottom-lite" style="width: 824px;height: 147px; display: flex;justify-content:center;
flex-wrap: wrap;
flex-direction: row;margin-top: 20px;">
<div class="center-bottom-lite-left" style="width: 400px;height: 147px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;">
<div style="width: 400px;height: 33px; display: flex;align-items: center;">
<img src="https://oscimg.oschina.net/oscnet/up-dd456b947d6db0f1833fd5df883c14fd80f.jpg" alt="" style="width: 24px;height: 24px;">
<span style="font-size: 16px;color: #111111;width: 93px;height: 20px;margin-left: 5px;">DevOps专区</span>
<span style="width: 86px;height: 17px;color: #999999;font-size: 13px;margin-left: 190px;">109.9万人关注</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-left-2" style="width: 400px;height: 102px;margin-top: 5px;">
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">DevOps整合Jenkins+k8s+CICD</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">4.5w阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">DevOps整合Jenkins+k8s+CICD</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">4.5w阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">DevOps整合Jenkins+k8s+CICD</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">4.5w阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">DevOps整合Jenkins+k8s+CICD</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">4.5w阅</span>
</div>
</div>
</div>
<div class="center-bottom-lite-right" style="width: 400px;height: 147px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;margin-left: 23px;">
<div style="width: 400px;height: 33px;display: flex;align-items: center;">
<img src="https://oscimg.oschina.net/oscnet/up-9c9306c8e26e02d12dc606d1bc677022887.png" alt="" style="width: 24px;height: 24px;">
<span style="font-size: 16px;color: #111111;width:145px;height: 20px;margin-left: 5px;">OpenHarmony专区</span>
<span style="width: 90px;height: 17px;color: #999999;font-size: 13px;margin-left: 135px;">104.3万人关注</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-right-2" style="width: 400px;height: 102px;margin-top: 5px;">
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">DevOps整合Jenkins+k8s+CICD</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">4.5w阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">DevOps整合Jenkins+k8s+CICD</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">4.5w阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">DevOps整合Jenkins+k8s+CICD</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">4.5w阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">DevOps整合Jenkins+k8s+CICD</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">4.5w阅</span>
</div>
</div>
</div>
</div>
<!-- 中间偏下位置4 -->
<div class="center-bottom-lite" style="width: 824px;height: 147px; display: flex;justify-content:center;
flex-wrap: wrap;
flex-direction: row;margin-top: 20px;">
<div class="center-bottom-lite-left" style="width: 400px;height: 147px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;">
<div style="width: 400px;height: 33px; display: flex;align-items: center;">
<img src="https://static.oschina.net/uploads/img/202008/31180557_CtYD.png" alt="" style="width: 24px;height: 24px;">
<span style="font-size: 16px;color: #111111;width: 120px;height: 20px;margin-left: 5px;">AI & 大数据专区</span>
<span style="width: 86px;height: 17px;color: #999999;font-size: 13px;margin-left: 165px;">109.9万人关注</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-left-2" style="width: 400px;height: 102px;margin-top: 5px;">
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">InstructPix2Pix: 动动嘴皮子，超越PS</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">480阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">InstructPix2Pix: 动动嘴皮子，超越PS</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">480阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">InstructPix2Pix: 动动嘴皮子，超越PS</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">480阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">InstructPix2Pix: 动动嘴皮子，超越PS</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">480阅</span>
</div>
</div>
</div>
<div class="center-bottom-lite-right" style="width: 400px;height: 147px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;margin-left: 23px;">
<div style="width: 400px;height: 33px;display: flex;align-items: center;">
<img src="https://static.oschina.net/uploads/img/202008/31180557_CtYD.png" alt="" style="width: 24px;height: 24px;">
<span style="font-size: 16px;color: #111111;width:145px;height: 20px;margin-left: 5px;">软件架构专区</span>
<span style="width: 90px;height: 17px;color: #999999;font-size: 13px;margin-left: 135px;">105.5万人关注</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-right-2" style="width: 400px;height: 102px;margin-top: 5px;">
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">InstructPix2Pix: 动动嘴皮子，超越PS</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">480阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">InstructPix2Pix: 动动嘴皮子，超越PS</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">480阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">InstructPix2Pix: 动动嘴皮子，超越PS</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">480阅</span>
</div>
<div style="width: 400px;height: 24px; display: flex;align-items: center;">
<div style="width: 5px;height: 5px;background-color: #CFCFCF;border-radius: 100%;"></div>
<span style="width:355px ;height: 24px;color: #111111;font-size: 14px;margin-left: 8px;">InstructPix2Pix: 动动嘴皮子，超越PS</span>
<span style="width: 40px;height: 24px;color: #AAAAAA;font-size: 12px;">480阅</span>
</div>
</div>
</div>
</div>
<!-- 中间偏下位置5 -->
<div class="center-bottom-lite-5" style="width: 824px;height: 307px;display: flex;justify-content:center;
flex-wrap: wrap;
flex-direction: row;margin-top: 10px;margin-top: 20px;">
<div class="center-bottom-lite-5-left" style="width: 400px;height: 307px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;">
<div style="width: 400px;height: 22px;">
<span style="width: 286;height: 22px;color: #111111;font-size: 16px;">推荐机构号</span>
<span style="width: 114px;height: 22px;color: #346fb6;font-size: 14px;text-align: right;margin-left: 215px;">申请成为机构号</span>
</div>
<hr style="width: 400px;">
<div style="width: 400px;height: 264px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;">
<div style="width: 400px;height: 40px;display: flex;align-items: center;">
<div class="1" style="width: 40px;height: 40px;">
<img src="https://oscimg.oschina.net/oscnet/up-e5758c3f5a388b5403e69cb28207e83d.jpg!/both/50x50" style="width: 40px;height: 40px;">
</div>
<div class="2" style="width: 138px;height: 40px;margin-left: 8px;">
<div style="width: 138px;height: 20px;color: #111111;font-size: 14px;">
<b>字节跳动终端技术</b>
</div>
<div style="width: 138px;height: 20px; color: #999999;font-size: 13px;">
文章 56
</div>
</div>
<div class="3" style="width: 172px;height: 40px;color: #999999;font-size: 13px;text-align: right;">
深入解析Flutter下一代渲染引擎Impeller
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 15px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 400px;height: 40px;display: flex;align-items: center;">
<div class="1" style="width: 40px;height: 40px;">
<img src="https://oscimg.oschina.net/oscnet/up-eaa7305f132796c25dc0e6d94b5b7011.jpg!/both/50x50?t=1590998925000" style="width: 40px;height: 40px;">
</div>
<div class="2" style="width: 138px;height: 40px;margin-left: 8px;">
<div style="width: 138px;height: 20px;color: #111111;font-size: 14px;">
<b>dubbo-go开源... <i class="oicon oicon-org" style="color: #0c8df9;"></i></b>
</div>
<div style="width: 138px;height: 20px; color: #999999;font-size: 13px;">
文章 45
</div>
</div>
<div class="3" style="width: 172px;height: 40px;color: #999999;font-size: 13px;text-align: right;">
Seata-php 入门与下半年展望
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 15px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 400px;height: 40px;display: flex;align-items: center;">
<div class="1" style="width: 40px;height: 40px;">
<img src="https://oscimg.oschina.net/oscnet/up-b7ca8a39a731fdf9fcdda97d140f0f5b.jpg!/both/50x50" style="width: 40px;height: 40px;">
</div>
<div class="2" style="width: 138px;height: 40px;margin-left: 8px;">
<div style="width: 138px;height: 20px;color: #111111;font-size: 14px;">
<b>openEuler <i class="oicon oicon-org" style="color: #0c8df9;"></i></b>
</div>
<div style="width: 138px;height: 20px; color: #999999;font-size: 13px;">
文章 584
</div>
</div>
<div class="3" style="width: 172px;height: 40px;color: #999999;font-size: 13px;text-align: right;">
超聚变 FusionOS 成为首个通过欧拉技术评测的操作系统
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 15px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 400px;height: 40px;display: flex;align-items: center;">
<div class="1" style="width: 40px;height: 40px;">
<img src="https://oscimg.oschina.net/oscnet/up-53d78760a03e5601452c48cf24ad6200.jpg!/both/50x50?t=1471417438000" style="width: 40px;height: 40px;">
</div>
<div class="2" style="width: 138px;height: 40px;margin-left: 8px;">
<div style="width: 138px;height: 20px;color: #111111;font-size: 14px;">
<b>FydeOS <i class="oicon oicon-org" style="color: #0c8df9;"></i></b>
</div>
<div style="width: 138px;height: 20px; color: #999999;font-size: 13px;">
文章 0
</div>
</div>
<div class="3" style="width: 172px;height: 40px;color: #999999;font-size: 13px;text-align: right;">
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 15px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 400px;height: 40px;display: flex;align-items: center;">
<div class="1" style="width: 40px;height: 40px;">
<img src="https://oscimg.oschina.net/oscnet/up-17af2a5738376555190b60aa91e847a6.jpg!/both/50x50" style="width: 40px;height: 40px;">
</div>
<div class="2" style="width: 138px;height: 40px;margin-left: 8px;">
<div style="width: 138px;height: 20px;color: #111111;font-size: 14px;">
<b>PostgreSQLChina<i class="oicon oicon-org" style="color: #0c8df9;"></i></b>
</div>
<div style="width: 138px;height: 20px; color: #999999;font-size: 13px;">
文章 1.4K
</div>
</div>
<div class="3" style="width: 172px;height: 40px;color: #999999;font-size: 13px;text-align: right;align-items: center;">
PostgreSQL 15：一些新特性
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 15px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
</div>
</div>
<div class="center-bottom-lite-5-right" style="width: 400px;height: 307px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row; margin-left: 23px;">
<div style="width: 400px;height: 22px;">
<span style="width: 286;height: 22px;color: #111111;font-size: 16px;">热推博主</span>
<span style="width: 114px;height: 22px;color: #346fb6;font-size: 14px;text-align: right;margin-left: 275px;">马上入驻</span>
</div>
<hr style="width: 400px;">
<div style="width: 400px;height: 264px;display: flex;justify-content:flex-start;flex-wrap: wrap;flex-direction: row;">
<div style="width: 200px;height: 40px;display: flex;align-items: center;">
<img src="https://oscimg.oschina.net/oscnet/up-2a1bf38754555dffcbcd520e8999788f.jpg!/both/50x50" style="width: 40px;height: 40px; border-radius: 100%;">
<div style="width: 110px;height: 40px;margin-left: 8px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
<span style="color: #111111;font-size: 14px;"><b>志成就<br></b></span>
<span style="color: #999999;font-size: 13px;">gitee.com/AICloudOpser</span>
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 5px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 200px;height: 40px;display: flex;align-items: center;">
<img src="https://static.oschina.net/uploads/user/280/560547_50.jpg?t=1396246027000" style="width: 40px;height: 40px; border-radius: 100%;">
<div style="width: 110px;height: 40px;margin-left: 8px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
<span style="color: #111111;font-size: 14px;"><b>lipengxs<br></b></span>
<span style="color: #999999;font-size: 13px;">文章 137</span>
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 5px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 200px;height: 40px;display: flex;align-items: center;">
<img src="https://oscimg.oschina.net/oscnet/up-b9acec9f5db1c48c69eb552d5bc0dd5f.jpg!/both/50x50?t=1498357319000" style="width: 40px;height: 40px; border-radius: 100%;">
<div style="width: 110px;height: 40px;margin-left: 8px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
<span style="color: #111111;font-size: 14px;"><b>_陈哈哈<br></b></span>
<span style="color: #999999;font-size: 13px;">北漂5年的程序员，多个国家互联网安全项目核心开发人员。一个纯粹的MySQL爱好者，维护着公众号“MySQL江湖路”。曾任央视知名栏目《百家讲坛》热心观众。</span>
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 5px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 200px;height: 40px;display: flex;align-items: center;">
<img src="https://static.oschina.net/uploads/user/1802/3605686_50.jpeg?t=1499738889000" style="width: 40px;height: 40px; border-radius: 100%;">
<div style="width: 110px;height: 40px;margin-left: 8px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
<span style="color: #111111;font-size: 14px;"><b>incess<br></b></span>
<span style="color: #999999;font-size: 13px;">一入前端深似海，从此时间是路人。</span>
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 5px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 200px;height: 40px;display: flex;align-items: center;">
<img src="https://oscimg.oschina.net/oscnet/up-3dd821123405b139f4ae1630834586c1.jpg!/both/50x50?t=1492667571000" style="width: 40px;height: 40px; border-radius: 100%;">
<div style="width: 110px;height: 40px;margin-left: 8px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
<span style="color: #111111;font-size: 14px;"><b>编程三昧<br></b></span>
<span style="color: #999999;font-size: 13px;">路漫漫其修远兮，吾将上下而求索！ 愿与志同道合的你携手在前端的道路上前行.....</span>
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 5px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 200px;height: 40px;display: flex;align-items: center;">
<img src="https://oscimg.oschina.net/oscnet/up-b9bf02f0f553caa18059e15d06dc8427.jpg!/both/50x50?t=1594634018000" style="width: 40px;height: 40px; border-radius: 100%;">
<div style="width: 110px;height: 40px;margin-left: 8px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
<span style="color: #111111;font-size: 14px;"><b>首席测试<br></b></span>
<span style="color: #999999;font-size: 13px;">test</span>
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 5px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 200px;height: 40px;display: flex;align-items: center;">
<div style="width: 40px;height: 40px;border-radius: 100%;text-align: center;background-color: #9b59b6;display: flex;justify-content: center;align-items: center;">
<span class="text-portrait" style="font-size: 18px;color: white;"><b>小</b></span>
</div>
<div style="width: 110px;height: 40px;margin-left: 8px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
<span style="color: #111111;font-size: 14px;"><b>小白学视觉<br></b></span>
<span style="color: #999999;font-size: 13px;">文章 1.7K</span>
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 5px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 200px;height: 40px;display: flex;align-items: center;">
<img src="https://static.oschina.net/uploads/user/50/101347_50.jpg" style="width: 40px;height: 40px; border-radius: 100%;">
<div style="width: 110px;height: 40px;margin-left: 8px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
<span style="color: #111111;font-size: 14px;"><b>恋恋美食<br></b></span>
<span style="color: #999999;font-size: 13px;">文章 193</span>
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 5px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
<div style="width: 200px;height: 40px;display: flex;align-items: center;">
<img src="https://oscimg.oschina.net/oscnet/up-a4aaf47cf50ed7a4bd323b8588f1449e.jpeg!/both/50x50?t=1478760282000" style="width: 40px;height: 40px; border-radius: 100%;">
<div style="width: 110px;height: 40px;margin-left: 8px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
<span style="color: #111111;font-size: 14px;"><b>朝如青丝暮成雪<br></b></span>
<span style="color: #999999;font-size: 13px;">我本微若凡尘，可也心向天空</span>
</div>
<div class="4" style="width: 26px;height: 24px; border-radius: 3px;border: 1px solid #ded8d8;margin-left: 5px;align-items: center;display: flex;justify-content: center;">
<div>
<i class="oicon oicon-heart-light" style="color: #22b250;width: 12px;height: 12px;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 中间下方位置 -->
<div class="center-bottom-lite-6" style="width: 824px;height: 379px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;margin-top: 15px;">
<div class="center-bottom-lite-6-left" style="width: 400px;height: 379px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;">
<div style="width: 400px;height: 22px;">
<span style="width: 286;height: 22px;color: #111111;font-size: 16px;">技术问答</span>
<span style="width: 114px;height: 22px;color: #346fb6;font-size: 14px;text-align: right;margin-left: 275px;">我要提问</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-6-left-2" style="width: 400px;height: 336px;margin-top: 10px;justify-content: space-between;display: flex;flex-direction: column;">
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #346fb6;font-size: 14px;margin-left: 5px;">
[顶] 如何在 OSC 社区运营你的开源项目？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
71回/61789阅
</div>
</div>
</div>
</div>
<div class="center-bottom-lite-6-right" style="width: 400px;height: 379px;display: flex;justify-content:center;flex-wrap: wrap;flex-direction: row;margin-left: 23px;">
<div style="width: 400px;height: 22px;">
<span style="width: 286;height: 22px;color: #111111;font-size: 16px;">摸鱼生涯</span>
<span style="width: 114px;height: 22px;color: #346fb6;font-size: 14px;text-align: right;margin-left: 275px;">查看更多</span>
</div>
<hr style="width: 400px;">
<div class="center-bottom-lite-6-left-2" style="width: 400px;height: 336px;margin-top: 10px;justify-content: space-between;display: flex;flex-direction: column;">
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
<div style="width: 400px;height: 24px;display: flex;justify-content: flex-start;align-items: center;">
<div style="border-radius: 100%;width: 5px;height: 5px; background-color: #CFCFCF;"></div>
<div style="width: 300px;height: 24px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #111111;font-size: 14px;margin-left: 5px;">
如何评价给代码“下毒”的 Evil.js？
</div>
<div style="width: 80px;height: 24px; color: #AAAAAA;font-size: 12px;margin-left: 10px;">
46评/28488阅
</div>
</div>
</div>
</div>
</div>
<!-- 中间底部部分 -->
<div class="center-bottom" style="width: 824px;height: 323px;display: flex;justify-content: center;align-items: center;margin-top: 30px;flex-wrap: wrap;">
<div class="center-bottom-top" style="width: 824px;height: 22px;display: flex;justify-content: center;align-items: center;">
<div style="width: 780px;height: 22px;text-align: left;font-size: 16px;color: #111111;">在线工具</div>
<div style="width: 44px;height: 22px;text-align: right;font-size: 14px;color: #999999;">
更多
</div>
</div>
<hr style="width: 824px;">
<div class="center-bottom-bottom" style="width: 824px;height: 288px;display: flex;justify-content: flex-start;flex-wrap: wrap;">
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-binary.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
进制转换器
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-regex.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
正则表达式
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-encrypt.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
加密/解密
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-format.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
代码格式化
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-ascii.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
ASCII对照表
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-rgb.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
RGB颜色对照表
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-char.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
HTML转义字符
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-http.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
HTTP状态码
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-compress.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
JS/CSS 压缩
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-transfer.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
乱码转换器
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-qrcode.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
二维码生成器
</div>
</div>
<div style="width: 408px;height: 40px;display: flex;">
<div style="width: 38px;height: 38px;border: 1px solid #e8e8e8;border-radius: 6px;">
<img src="https://static.oschina.net/new-osc/img/page/index-new/tool/tool-icon-diff.svg" style="width: 38px;height: 38px;">
</div>
<div style="width: 370px;height: 40px;font-size: 14px;color: #111111; display: flex;align-items: center;text-align: left;margin-left: 8px">
代码对比/归并
</div>
</div>
</div>
</div>
</div>
<!-- -------------------右边侧边栏部分 ---------------------->
<div class="right" style="width: 288px;height: 2267px; margin-top: 95px;margin-left: 25px;display: flex;justify-content: top;flex-wrap: wrap;flex-direction: column;">
<div class="right-1" style="width: 288px;height: 515px; background-color:white;border-radius: 5px;box-shadow: 0px 0px 3px rgb(228, 227, 227);display: flex;justify-content: center;display: flex;align-items: center;flex-direction: column;">
<div class="right-top" style="width: 240px;height: 31px;display: flex;">
<div style="width: 136px;height: 22px;color: #111111;font-size: 16px;">
精彩评论
</div>
<div style="width: 83px;height: 22px;color: #999999;font-size: 12px;">
1s 后自动更新
</div>
<div style="width: 15px;height: 15px;">
<i class="oicon oicon-refresh" style="color: #7ED321;"></i>
</div>
</div>
<hr style="width: 240px;">
<div class="right-bottom" style="width: 240px;height: 420px;display: flex;flex-direction: column;overflow-y: auto;overflow-x: hidden;">
<div style="width: 240px;height: 500px;display: flex;flex-direction: column;">
<!-- 评论内容 -->
<div class="1" style="width: 240px;height: 54px;display: flex;align-items: center;justify-content: center; margin-top: 10px;">
<div style="width: 25px;height: 54px; border-radius: 100%; ">
<img src="https://oscimg.oschina.net/oscnet/up-b79a24e05cb1c25d9d617d149953ccc3.jpeg!/both/50x50?t=1487167235000" alt="Coding小先" title="Coding小先" style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 54px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
个人用没问题，公司用，主要公司体量大，会盯着你们的
</div>
</div>
</div>
<div class="2" style="width: 240px;height: 54px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 54px; border-radius: 100%;">
<img src="https://oscimg.oschina.net/oscnet/up-f0173e5d2be3d159a143a7581a23ed30.jpg!/both/50x50"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 54px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
哈哈哈，太过分了，原作者反而无法修改自己的软件
</div>
</div>
</div>
<div class="3" style="width: 240px;height: 34px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 34px; border-radius: 100%;">
<img src="https://oscimg.oschina.net/oscnet/up-a1cb34a3dc13b62df9472991df999ec4.jpg!/both/50x50?t=1454462064000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 34px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
从未安全过？
</div>
</div>
</div>
<div class="4" style="width: 240px;height: 112px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 112px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/2544/5089288_50.jpg?t=1618996610000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 112px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
很有意思，只是改文件名就能提升性能，说明这种优化本来就是泛用的。那硬件厂商非要搞成白名单的意图就很值得商榷了。说白了，是Yandex没交保护费?
</div>
</div>
</div>
<div class="5" style="width: 240px;height: 54px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 54px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/408/816010_50.jpg?t=1421116398000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 54px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
天下乌鸦一般黑，大哥别说二哥烂。
</div>
</div>
</div>
<div class="6" style="width: 240px;height: 73px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 73px; border-radius: 100%;">
<span class="text-portrait" style="background: #27ae60 ;color: #fff;display: flex;text-align: center;align-items: center;width: 25px;height: 25px;border-radius: 100%;font-size: 12px;justify-content: center;"><b>F</b></span>
</div>
<div style="width: 211px;height: 73px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
rust 不叫秀语言，请注意，就像java没人说爪哇一样，不要乱起名，这样显得你很不专业
</div>
</div>
</div>
<div class="7" style="width: 240px;height: 73px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 73px; border-radius: 100%;">
<span class="text-portrait" style="background: #27ae60 ;color: #fff;display: flex;text-align: center;align-items: center;width: 25px;height: 25px;border-radius: 100%;font-size: 12px;justify-content: center;"><b>F</b></span>
</div>
<div style="width: 211px;height: 73px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
rust 不叫秀语言，请注意，就像java没人说爪哇一样，不要乱起名，这样显得你很不专业
</div>
</div>
</div>
<div class="8" style="width: 240px;height: 112px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 112px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/2544/5089288_50.jpg?t=1618996610000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 112px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
很有意思，只是改文件名就能提升性能，说明这种优化本来就是泛用的。那硬件厂商非要搞成白名单的意图就很值得商榷了。说白了，是Yandex没交保护费?
</div>
</div>
</div>
<div class="9" style="width: 240px;height: 112px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 112px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/2544/5089288_50.jpg?t=1618996610000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 112px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
很有意思，只是改文件名就能提升性能，说明这种优化本来就是泛用的。那硬件厂商非要搞成白名单的意图就很值得商榷了。说白了，是Yandex没交保护费?
</div>
</div>
</div>
<div class="1" style="width: 240px;height: 54px;display: flex;align-items: center;justify-content: center; margin-top: 10px;">
<div style="width: 25px;height: 54px; border-radius: 100%; ">
<img src="https://oscimg.oschina.net/oscnet/up-b79a24e05cb1c25d9d617d149953ccc3.jpeg!/both/50x50?t=1487167235000" alt="Coding小先" title="Coding小先" style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 54px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
个人用没问题，公司用，主要公司体量大，会盯着你们的
</div>
</div>
</div>
<div class="2" style="width: 240px;height: 54px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 54px; border-radius: 100%;">
<img src="https://oscimg.oschina.net/oscnet/up-f0173e5d2be3d159a143a7581a23ed30.jpg!/both/50x50"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 54px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
哈哈哈，太过分了，原作者反而无法修改自己的软件
</div>
</div>
</div>
<div class="3" style="width: 240px;height: 34px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 34px; border-radius: 100%;">
<img src="https://oscimg.oschina.net/oscnet/up-a1cb34a3dc13b62df9472991df999ec4.jpg!/both/50x50?t=1454462064000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 34px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
从未安全过？
</div>
</div>
</div>
<div class="4" style="width: 240px;height: 112px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 112px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/2544/5089288_50.jpg?t=1618996610000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 112px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
很有意思，只是改文件名就能提升性能，说明这种优化本来就是泛用的。那硬件厂商非要搞成白名单的意图就很值得商榷了。说白了，是Yandex没交保护费?
</div>
</div>
</div>
<div class="5" style="width: 240px;height: 54px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 54px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/408/816010_50.jpg?t=1421116398000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 54px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
天下乌鸦一般黑，大哥别说二哥烂。
</div>
</div>
</div>
<div class="6" style="width: 240px;height: 73px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 73px; border-radius: 100%;">
<span class="text-portrait" style="background: #27ae60 ;color: #fff;display: flex;text-align: center;align-items: center;width: 25px;height: 25px;border-radius: 100%;font-size: 12px;justify-content: center;"><b>F</b></span>
</div>
<div style="width: 211px;height: 73px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
rust 不叫秀语言，请注意，就像java没人说爪哇一样，不要乱起名，这样显得你很不专业
</div>
</div>
</div>
<div class="7" style="width: 240px;height: 73px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 73px; border-radius: 100%;">
<span class="text-portrait" style="background: #27ae60 ;color: #fff;display: flex;text-align: center;align-items: center;width: 25px;height: 25px;border-radius: 100%;font-size: 12px;justify-content: center;"><b>F</b></span>
</div>
<div style="width: 211px;height: 73px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
rust 不叫秀语言，请注意，就像java没人说爪哇一样，不要乱起名，这样显得你很不专业
</div>
</div>
</div>
<div class="8" style="width: 240px;height: 112px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 112px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/2544/5089288_50.jpg?t=1618996610000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 112px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
很有意思，只是改文件名就能提升性能，说明这种优化本来就是泛用的。那硬件厂商非要搞成白名单的意图就很值得商榷了。说白了，是Yandex没交保护费?
</div>
</div>
</div>
<div class="9" style="width: 240px;height: 112px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 112px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/2544/5089288_50.jpg?t=1618996610000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 112px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
很有意思，只是改文件名就能提升性能，说明这种优化本来就是泛用的。那硬件厂商非要搞成白名单的意图就很值得商榷了。说白了，是Yandex没交保护费?
</div>
</div>
</div>
<div class="1" style="width: 240px;height: 54px;display: flex;align-items: center;justify-content: center; margin-top: 10px;">
<div style="width: 25px;height: 54px; border-radius: 100%; ">
<img src="https://oscimg.oschina.net/oscnet/up-b79a24e05cb1c25d9d617d149953ccc3.jpeg!/both/50x50?t=1487167235000" alt="Coding小先" title="Coding小先" style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 54px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
个人用没问题，公司用，主要公司体量大，会盯着你们的
</div>
</div>
</div>
<div class="2" style="width: 240px;height: 54px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 54px; border-radius: 100%;">
<img src="https://oscimg.oschina.net/oscnet/up-f0173e5d2be3d159a143a7581a23ed30.jpg!/both/50x50"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 54px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
哈哈哈，太过分了，原作者反而无法修改自己的软件
</div>
</div>
</div>
<div class="3" style="width: 240px;height: 34px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 34px; border-radius: 100%;">
<img src="https://oscimg.oschina.net/oscnet/up-a1cb34a3dc13b62df9472991df999ec4.jpg!/both/50x50?t=1454462064000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 34px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
从未安全过？
</div>
</div>
</div>
<div class="4" style="width: 240px;height: 112px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 112px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/2544/5089288_50.jpg?t=1618996610000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 112px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
很有意思，只是改文件名就能提升性能，说明这种优化本来就是泛用的。那硬件厂商非要搞成白名单的意图就很值得商榷了。说白了，是Yandex没交保护费?
</div>
</div>
</div>
<div class="5" style="width: 240px;height: 54px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 54px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/408/816010_50.jpg?t=1421116398000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 54px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
天下乌鸦一般黑，大哥别说二哥烂。
</div>
</div>
</div>
<div class="6" style="width: 240px;height: 73px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 73px; border-radius: 100%;">
<span class="text-portrait" style="background: #27ae60 ;color: #fff;display: flex;text-align: center;align-items: center;width: 25px;height: 25px;border-radius: 100%;font-size: 12px;justify-content: center;"><b>F</b></span>
</div>
<div style="width: 211px;height: 73px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
rust 不叫秀语言，请注意，就像java没人说爪哇一样，不要乱起名，这样显得你很不专业
</div>
</div>
</div>
<div class="7" style="width: 240px;height: 73px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 73px; border-radius: 100%;">
<span class="text-portrait" style="background: #27ae60 ;color: #fff;display: flex;text-align: center;align-items: center;width: 25px;height: 25px;border-radius: 100%;font-size: 12px;justify-content: center;"><b>F</b></span>
</div>
<div style="width: 211px;height: 73px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;align-items: center;justify-content: center;">
rust 不叫秀语言，请注意，就像java没人说爪哇一样，不要乱起名，这样显得你很不专业
</div>
</div>
</div>
<div class="8" style="width: 240px;height: 112px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 112px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/2544/5089288_50.jpg?t=1618996610000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 112px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
很有意思，只是改文件名就能提升性能，说明这种优化本来就是泛用的。那硬件厂商非要搞成白名单的意图就很值得商榷了。说白了，是Yandex没交保护费?
</div>
</div>
</div>
<div class="9" style="width: 240px;height: 112px;display: flex;align-items: center;justify-content: center;margin-top: 5px;">
<div style="width: 25px;height: 112px; border-radius: 100%;">
<img src="https://static.oschina.net/uploads/user/2544/5089288_50.jpg?t=1618996610000"style="width: 25px;height: 25px;border-radius: 100%;">
</div>
<div style="width: 211px;height: 112px;font-size: 13px;color: #111111;background-color: #F7F8F9;border-radius: 10px;margin-left: 5px;display: flex;align-items: center;justify-content: center;">
<div style="width: 182px;height: 36px;display: flex;text-align: left;align-items: center;">
很有意思，只是改文件名就能提升性能，说明这种优化本来就是泛用的。那硬件厂商非要搞成白名单的意图就很值得商榷了。说白了，是Yandex没交保护费?
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 侧边栏第二个 -->
<div class="right-2" style="width: 288px;height: 225px; margin-top: 30px;">
<img src="https://static.oschina.net/uploads/cooperation/index_channel_list_ad_between_gitee_UYiaW.png" style="width: 288px;height: 225px;">
</div>
<!-- 侧边栏第三个 -->
<div class="right-3" style="width: 288px;height: 445px; background-color: white;margin-top: 30px;border-radius: 5px;box-shadow: 0px 0px 3px rgb(228, 227, 227);display: flex;justify-content: center;display: flex;align-items: center;flex-direction: column;">
<div class="1" style="width: 240px;height: 396px;">
<div class="top" style="width: 240px;height: 31px;display: flex;align-items: center;">
<!-- <div style="width: 31px;height: 31px;"> -->
<i class="oicon oicon-gitee-circle-solid" style="color: #c71d23;font-size: 20px;" ></i>
<!-- </div> -->
<div style="width: 188px;height: 22px;font-size: 16px;color: #111111;margin-left: 10px;">
Gitee 最新推荐
</div>
<div style="width: 24px;height: 20px;">
<i class="oicon oicon-arrow-right" style="color: #999;font-size: 16px;"></i>
</div>
</div>
<hr style="width: 240px;">
<div class="bottom" style="width: 240px;height: 350px;display: flex;flex-direction: column;justify-content: space-between;">
<div style="width: 240px;height: 64px;display: flex;flex-direction: column;">
<div style="width: 240px;height: 20px;display: flex;">
<div style="width: 172px;height: 20px;color: #111111;font-size: 14px;">
antv/AVA
</div>
<div style="width: 68px;height: 20px;color: #9f9f9f;font-size: 12px;">
TypeScript
</div>
</div>
<div style="width: 240px;height: 40px;color: #888888;font-size: 13px;">
A framework for automated visual analytics.
</div>
</div>
<div style="width: 240px;height: 64px;display: flex;flex-direction: column;">
<div style="width: 240px;height: 20px;display: flex;">
<div style="width: 172px;height: 20px;color: #111111;font-size: 14px;">
blueantst/DuiVision
</div>
<div style="width: 68px;height: 20px;color: #9f9f9f;font-size: 12px;">
C++
</div>
</div>
<div style="width: 240px;height: 40px;color: #888888;font-size: 13px;">
A DirectUI library
</div>
</div>
<div style="width: 240px;height: 64px;display: flex;flex-direction: column;">
<div style="width: 240px;height: 20px;display: flex;">
<div style="width: 172px;height: 20px;color: #111111;font-size: 14px;">
百度开源/lac
</div>
<div style="width: 68px;height: 20px;color: #9f9f9f;font-size: 12px;">
Python
</div>
</div>
<div style="width: 240px;height: 40px;color: #888888;font-size: 13px;">
LAC全称Lexical Analysis of Chinese，是百度自然语言处理部研发的一款联合...
</div>
</div>
<div style="width: 240px;height: 64px;display: flex;flex-direction: column;">
<div style="width: 240px;height: 20px;display: flex;">
<div style="width: 172px;height: 20px;color: #111111;font-size: 14px;">
openEuler/rubik
</div>
<div style="width: 68px;height: 20px;color: #9f9f9f;font-size: 12px;">
</div>
</div>
<div style="width: 240px;height: 40px;color: #888888;font-size: 13px;">
rubik is a QoS manager agent for online/offline workload colocation...
</div>
</div>
<div style="width: 240px;height: 64px;display: flex;flex-direction: column;">
<div style="width: 240px;height: 20px;display: flex;">
<div style="width: 172px;height: 20px;color: #111111;font-size: 14px;">
WeBank/fes-design
</div>
<div style="width: 68px;height: 20px;color: #9f9f9f;font-size: 12px;">
JavaScript
</div>
</div>
<div style="width: 240px;height: 40px;color: #888888;font-size: 13px;">
微众银行中后台设计组件库，使用 Vue3 基于 Typescirpt 编写，高性能，支持按...
</div>
</div>
</div>
</div>
</div>
<!-- 侧边栏第四个 -->
<div class="right-4" style="width: 288px;height: 420px; margin-top: 30px;background-color: white;margin-top: 30px;border-radius: 5px;box-shadow: 0px 0px 3px rgb(228, 227, 227);display: flex;justify-content: center;display: flex;align-items: center;flex-direction: column;">
<div class="1" style="width: 240px;height: 371px;">
<div class="top" style="width: 240px;height: 31px;display: flex;align-items: center;">
<div style="width: 216px;height: 22px;font-size: 16px;color: #111111;margin-left: 10px;">
接活赚钱，技术变现
</div>
<div style="width: 24px;height: 20px;">
<i class="oicon oicon-arrow-right" style="color: #999;font-size: 16px;"></i>
</div>
</div>
<hr style="width: 240px;">
<div class="bottom" style="width: 240px;height: 324px;display: flex;flex-direction: column;justify-content: space-between;">
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
<div style="width: 240px;height: 21.6px; display: flex;">
<div style="width: 159px;height: 21px;">
多媒体信息发布系统源...
</div>
<div style="width: 73px;height: 16px;color: #ba6721;font-size: 14px;">
￥100,000
</div>
</div>
</div>
</div>
</div>
<!-- 侧边栏最后一个 -->
<div class="right-5" style="width: 288px;height: 468px; background-color: white;margin-top: 30px;border-radius: 5px;box-shadow: 0px 0px 3px rgb(228, 227, 227);display: flex;justify-content: center;display: flex;align-items: center;flex-direction: column;">
<div style="width: 240px;height: 420px;">
<div class="top" style="width: 240px;height: 31px;display: flex;align-items: center;">
<div style="width: 216px;height: 22px;font-size: 16px;color: #111111;margin-left: 10px;">
每周软件推荐
</div>
<div style="width: 24px;height: 20px;">
<i class="oicon oicon-arrow-right" style="color: #999;font-size: 16px;"></i>
</div>
</div>
<hr style="width: 240px;">
<div class="bottom" style="width: 240px;height: 373px;display: flex;flex-direction: column;justify-content: space-between;">
<div style="width: 240px;height: 65px;">
<div style="width: 240px;height: 21px;font-size: 14px;color: #111111;">
<b style="font-weight: 600;">MindsDB</b> 数据库开源预测 AI 层
</div>
<div style="width: 240px;height: 40px;font-size: 13px;color: #888888;">
MindsDB 是一个帮助开发人员构建 AI 解决方案的新兴平台，MindsDB 通过 AI...
</div>
</div>
<div style="width: 240px;height: 65px;">
<div style="width: 240px;height: 21px;font-size: 14px;color: #111111;">
<b style="font-weight: 600;">Hermes Document</b> 文档管理系统
</div>
<div style="width: 240px;height: 40px;font-size: 13px;color: #888888;">
Hermes 是一个由 HashiCorp 创建的开源文档管理系统，用于帮助简化写作和...
</div>
</div>
<div style="width: 240px;height: 65px;">
<div style="width: 240px;height: 21px;font-size: 14px;color: #111111;">
<b style="font-weight: 600;">Nostr</b> 去中心化社交协议
</div>
<div style="width: 240px;height: 40px;font-size: 13px;color: #888888;">
Nostr 是基于加密密钥对 (Cryptographic Keypairs) 的去中心化网络，没有采用...
</div>
</div>
<div style="width: 240px;height: 65px;">
<div style="width: 240px;height: 21px;font-size: 14px;color: #111111;">
<b style="font-weight: 600;">Carbonyl</b> 在你的终端内运行Chromi...
</div>
<div style="width: 240px;height: 40px;font-size: 13px;color: #888888;">
Carbonyl 是一种基于 Chromium 的浏览器，可以在终端中运行。它支持几乎所...
</div>
</div>
<div style="width: 240px;height: 65px;">
<div style="width: 240px;height: 21px;font-size: 14px;color: #111111;">
<b style="font-weight: 600;">PITable</b> A低代码多维表格工具
</div>
<div style="width: 240px;height: 40px;font-size: 13px;color: #888888;">
APITable 是一个面向 API 的低代码平台，用于构建协作应用程序，Airtable...
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------右侧小二维码 -------------------------->
<div style="width: 42px;height: 550px; margin-left: 1450px; display: flex;margin-top: 95px;flex-direction: column-reverse; position: fixed;">
<div style="width: 42px;height: 38px;display: flex;align-items: center;justify-content: center;background-color: #f5f5f5;border: 1px solid #ddd;">
<img class="codeIcon" src="https://oscimg.oschina.net/oscnet/up-02f2706a81344119fb5cdcdda304068f2e0.png" alt="" style="width: 18px;height: 18px;">
</div>
</div>
<!---------------------- 底部信息 --------------------------->
<div class="bottom" style="width: 100%;height: 192px; margin-top: 30px;background-color: white;border-radius: 5px;box-shadow: 0px 0px 3px rgb(228, 227, 227);display: flex;justify-content: center;display: flex;align-items: center;flex-direction: column;">
<div class="bottom-inner" style="width: 1450px;height: 160px;display: flex;justify-content: center;">
<div class="1" style="width: 156px;height: 160px; display: flex;flex-direction: column;">
<div style="width: 128px;height: 20px;font-size: 15px;color: #000000DE;">
<b>OSCHINA 社区</b>
</div>
<div style="width: 128px;height: 20px; font-size: 14px;color: #00000066;margin-top: 15px;">
关于我们
</div>
<div style="width: 128px;height: 20px; font-size: 14px;color: #00000066;">
联系我们
</div>
<div style="width: 128px;height: 20px; font-size: 14px;color: #00000066;">
加入我们
</div>
<div style="width: 128px;height: 20px; font-size: 14px;color: #00000066;">
合作伙伴
</div>
<div style="width: 128px;height: 20px; font-size: 14px;color: #00000066;">
Open API
</div>
</div>
<div class="2" style="width: 234px;height: 160px; display: flex;flex-direction: column;">
<div style="width: 206px;height: 20px;font-size: 15px;color: #000000DE;">
<b>在线工具</b>
</div>
<div style="width: 206px;height: 20px; font-size: 14px;color: #00000066;margin-top: 15px;">
Gitee.com
</div>
<div style="width: 206px;height: 20px; font-size: 14px;color: #00000066;">
企业研发管理
</div>
<div style="width: 206px;height: 20px; font-size: 14px;color: #00000066;">
CopyCat-代码克隆检测
</div>
<div style="width: 206px;height: 20px; font-size: 14px;color: #00000066;">
实用在线工具
</div>
<div style="width: 206px;height: 20px; font-size: 14px;color: #CC0000;">
国家反诈中心APP下载
</div>
</div>
<div class="3" style="width: 156px;height: 160px; display: flex;flex-direction: column;">
<div style="width: 128px;height: 20px;font-size: 15px;color: #000000DE;">
<b>攻略</b>
</div>
<div style="width: 128px;height: 20px; font-size: 14px;color: #00000066;margin-top: 15px;">
项目运营
</div>
<div style="width: 128px;height: 20px; font-size: 14px;color: #00000066;">
Awesome 软件（持续更新中）
</div>
</div>
<div class="4" style="width: 156px;height: 163px; display: flex;flex-direction: column;">
<div style="width: 128px;height: 20px;font-size: 15px;color: #000000DE;margin-left: 7px;">
<b>QQ群</b>
</div>
<div style="width: 60px;height: 60px; font-size: 14px;color: #00000066;margin-top: 15px;">
<img class="qrcode" src="https://static.oschina.net/new-osc/img/qq_qrcode_2_new.png" alt="QQ交流群" style="width: 60px;height: 60px;">
</div>
<div style="width: 128px;height: 20px; font-size: 12px;color: #cccccc;margin-top: 15px;">
530688128
</div>
</div>
<div class="5" style="width: 156px;height: 160px; display: flex;flex-direction: column;">
<div style="width: 128px;height: 20px;font-size: 15px;color: #000000DE;margin-left: 7px;">
<b>公众号</b>
</div>
<div style="width: 60px;height: 60px; font-size: 14px;color: #00000066;margin-top: 15px;">
<img class="qrcode" src="https://static.oschina.net/new-osc/img/wechat_qrcode.jpg?t=1484694603000" style="width: 60px;height: 60px;">
</div>
</div>
<div class="6" style="width: 156px;height: 160px; display: flex;flex-direction: column;">
<div style="width: 128px;height: 20px;font-size: 15px;color: #000000DE;margin-left: 7px;">
<b>视频号</b>
</div>
<div style="width: 60px;height: 60px; font-size: 14px;color: #00000066;margin-top: 15px;">
<img class="qrcode" src="https://oscimg.oschina.net/oscnet/up-7f546da372c31b5421fedc29f7c202ab2c4.JPEG" style="width: 60px;height: 60px;">
</div>
</div>
<div class="7" style="width: 234px;height: 160px; display: flex;flex-direction: column;text-align: center;align-items: center;">
<div style="width: 234px;height: 20px;font-size: 18px;color: #000000DE;">
<b>OSCHINA 小程序</b>
</div>
<div style="width: 206px;height: 40px; font-size: 14px;color: #00000066;margin-top: 15px; text-align: center;">
聚合全网技术文章，根据你的阅读喜好进行个性推荐
</div>
<div style="width: 112px;height: 36px; font-size: 14px;color: #00000066;margin-top: 15px; text-align: center;">
<button style="width: 112px;height: 36px;background: #21b351;color: #ffffff;font-size: 14px;border-color: transparent;border-radius: 1px;">OSC小程序</button>
</div>
</div>
</div>
</div>
<!-- -----------------底部备案相关信息--------------------- -->
<div class="bottom-bottom" style="width: 100%;height: 40px;display: flex;justify-content: center;align-items: center;">
<div style="width: 1250px;height: 38px;display: flex;justify-content: center;align-items: center;">
<div style="width: 176px;height: 22px;font-size: 14px;color: #00000066;">
©OSCHINA(OSChina.NET)
</div>
<div style="width: 42px;height: 22px;font-size: 14px;color: #00000066;margin-left: 10px;">
工信部
</div>
<div style="width:112px;height: 22px;font-size: 14px;color: #00000066;margin-left: 10px;">
开源软件推进联盟
</div>
<div style="width:84px;height: 22px;font-size: 14px;color: #00000066;margin-left: 10px;">
指定官方社区
</div>
<div style="width:56px;height: 22px;font-size: 14px;color: #00000066;margin-left: 10px;">
社区规范
</div>
<div style="width:238px;height: 22px;font-size: 14px;color: #00000066;margin-left: 360px;">
深圳市奥思网络科技有限公司版权所有
</div>
<div style="width:130px;height: 22px;font-size: 14px;color: #00000066;margin-left: 10px;">
粤ICP备12009483号
</div>
</div>
</div>
</div>
</body>
</html>下载
[erphpdown]
来源：默认下载
[/erphpdown]
阅读剩余
THE END
