还原此页面布局:
如下:
此图代码:
<!--
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved.
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com
-->
<!DOCTYPE html>
<html>
<base class="_dcdev_preset_" href="https://res.dcdev.net/" />
<head>
<!------ 以下内容不要动 --------------------------------------------------------->
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 开发基础样式库(已作一定的自适应,button/label/input/textarea等设置了默认样式) -->
<link class="_dcdev_preset_" type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.3/assets/css/dcdevui.css">
<!-- 页面标题 -->
<title>开发 · 预览代码片段</title>
<!-- 桌面端浏览器及收藏夹图标 -->
<link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
<link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
<!------ 以上内容不要动 --------------------------------------------------------->
<style>
* {
padding: 0;
margin: 0
}
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
li {
list-style: none;
}
/* 身体盒子 */
.body_box {
overflow: hidden;
width: 100%;
height: 100%;
background-color: #fff;
}
.content_box {
width: 94%;
margin: 10px auto 0;
}
/* 焦点图 */
.focus {
width: 100%;
height: 180px;
background-color: pink;
border-radius: 3px;
}
.focus_text {
position: relative;
}
/* 焦点图文字 */
.focus_text p {
position: absolute;
top: 115px;
left: 10px;
font-size: 18px;
color: #fff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
/* 菱形模块 */
.point {
width: 100%;
height: 30px;
}
.point ul {
width: 116px;
height: 30px;
margin: 0 auto;
}
/* 每一个菱形 */
.point_one {
float: left;
width: 9px;
height: 9px;
margin: 10px;
background-color: #ededed;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* Internet Explorer */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
/* Opera */
}
/* 这里为每个新闻盒子的大小 */
.news_box {
/* 采用flex布局 */
display: flex;
width: 100%;
height: 120px;
margin: 10px 0;
}
.img_box {
width: 110px;
height: 110px;
margin-top: 5px;
background-color: pink;
}
.img_box img {
width: 100%;
height: 100%;
background-color: pink;
}
.text_box {
flex: 1;
padding-left: 10px;
}
.text p {
font-weight: 700;
font-size: 16px;
color: #292929;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.time {
position: relative;
}
.time p {
position: absolute;
top: 0;
left: 0;
margin-top: 35px;
font-size: 12px;
color: #bcbcbc;
}
</style>
</head>
<body>
<!------ dcdev_body_container不要删除,内容在 body start 及 body end 中间书写 ------>
<div class="dcdev-body-container" id="dcdev_body_container" style="display: none;">
<!-- body start -->
<div class="body_box">
<div class="content_box">
<div class="fouse_box">
<div class="focus">
<img src="../img/user.jpg" alt="">
<div class="focus_text">
<p>36氪专访 | 淘宝特价版负责人汪海: C...</p>
</div>
</div>
<div class="point">
<ul>
<li class="point_one"></li>
<li class="point_one" style="background-color: #4085fe;"></li>
<li class="point_one"></li>
<li class="point_one"></li>
</ul>
</div>
</div>
<div class="news_box">
<div class="text_box">
<div class="text">
<p>最前线 | 有赞股价创两年来新高后回落,折让36.84%发行1000万股</p>
</div>
<div class="time">
<p>李欣 ·59分钟前</p>
</div>
</div>
<div class="img_box">
<img src="../img/user.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- body end -->
</div>
</body>
<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 不授权模式, 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/init.js" id="initClass" authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/ui.js" id="ui_class" xhr_show_loading=1></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/import_dev_kit.js"></script>
<script class="_dcdev_preset_">
// 代码片段描述
code_part_desc = "文章列表";
code_part_id = "bd1efab94b8ae88b";
</script>
<!------ 以上内容不要变动 --------------------------------------------------------->
</html>
效果图二:
代码:
<!--
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved.
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com
-->
<!DOCTYPE html>
<html>
<base class="_dcdev_preset_" href="https://res.dcdev.net/" />
<head>
<!------ 以下内容不要动 --------------------------------------------------------->
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 开发基础样式库(已作一定的自适应,button/label/input/textarea等设置了默认样式) -->
<link class="_dcdev_preset_" type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.3/assets/css/dcdevui.css">
<!-- 页面标题 -->
<title>开发 · 预览代码片段</title>
<!-- 桌面端浏览器及收藏夹图标 -->
<link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
<link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
<!------ 以上内容不要动 --------------------------------------------------------->
<style>
* {
padding: 0;
margin: 0
}
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
li {
list-style: none;
}
.body_box {
width: 100%;
background-color: #fff;
}
.content.box {
width: 94%;
margin: 0 auto;
}
/* 热搜文字 */
.header {
width: 100%;
height: 50px;
border-bottom: 1px solid #ccc;
}
.hot_seach,
.recommend {
position: relative;
float: left;
width: 50%;
height: 100%;
}
.hot_seach .border,
.recommend .border {
position: absolute;
right: 25%;
float: right;
width: 44px;
height: 61%;
line-height: 50px;
/* border-bottom: 3px solid #2e93f4; */
border-radius: 2px;
}
.recommend .border {
position: absolute;
left: 25%;
float: left;
}
.hot_seach p,
.recommend p {
box-sizing: border-box;
font-weight: 700;
font-size: 17px;
padding: 0 4px;
}
.recommend p {
font-weight: 400;
color: #6b6b6b;
}
.xian {
width: 100%;
height: 6%;
background-color: #2e93f4;
border-radius: 2px;
}
/* 导航栏模块 */
.nav_box {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
width: 100%;
height: 100%;
border-top: 1px solid #ccc;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
}
.nav_box::-webkit-scrollbar-thumb {
/*滚动条滑块样式*/
width: 0px;
height: 0px;
}
.nav_box::-webkit-scrollbar-track {
/*滚动条轨道样式*/
width: 0px;
height: 0px;
}
.nav_box::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.nav {
float: left;
height: 52px;
flex: 0 0 92px;
text-align: center;
}
.box {
width: 70%;
height: 32px;
line-height: 32px;
margin: 10px auto;
text-align: center;
color: #9f9f9f;
}
/* 被选中后就增加这个类 */
.box_choose {
background-color: #f6f6f6;
border-radius: 32px;
font-weight: 700;
color: #4b4b4b;
}
/* 新闻热点模块 */
.new_outbox {
clear: both;
border-top: 4px solid #fafafa;
}
.news_box {
/* 采用flex布局 */
display: flex;
width: 100%;
/* height: 120px; */
margin: 10px 0;
}
.img_box {
width: 140px;
height: 90px;
margin: 10px;
background-color: pink;
border-radius: 10px;
}
.img_box img {
width: 100%;
height: 100%;
background-color: pink;
}
.time p {
/* margin: 10px 0; */
margin-top: 10px;
margin-bottom: 4px;
font-size: 12px;
color: #bcbcbc;
}
/* 热搜排名方框 */
.rank {
position: relative;
float: left;
width: 25px;
height: 17px;
margin-right: 10px;
border-radius: 4px;
/* background-color: orange; */
background-image: linear-gradient(to right, #fcad28, #fdca21);
}
.rank p {
position: absolute;
top: -10px;
left: 6px;
color: #fff;
}
.text_box {
flex: 1;
padding-left: 10px;
}
.text p {
font-weight: 700;
font-size: 16px;
color: #292929;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* 固定盒子模块 */
.fixed_box {
position: sticky;
overflow: hidden;
bottom: 0;
left: 50%;
width: 100%;
height: 58px;
background-color: #fff;
}
.fixed_content {
position: relative;
float: left;
width: 50%;
height: 100%;
}
.fixed {
position: absolute;
top: 0;
left: 40%;
width: 28px;
height: 100%;
margin-top: 5px;
}
.img {
width: 100%;
height: 26px;
background-color: pink;
}
.fixed p {
margin-top: 5px;
font-size: 13px;
font-weight: 700;
}
.img img {
width: 100%;
height: 100%;
}
.mine {
position: absolute;
top: 0;
right: 20px;
}
.fixed_r {
/* right: 88px; */
right: 50%;
}
</style>
</head>
<body>
<!------ dcdev_body_container不要删除,内容在 body start 及 body end 中间书写 ------>
<div class="dcdev-body-container" id="dcdev_body_container" style="display: none;">
<!-- body start -->
<div class="body_box">
<div class="content_box">
<div class="header">
<div class="hot_seach">
<div class="border">
<p>热搜</p>
<div class="xian"></div>
</div>
</div>
<div class="recommend">
<div class="border">
<p>推荐</p>
<div class="xian" style="display: none;"></div>
</div>
</div>
</div>
<div class="nav_box">
<div class="nav">
<div class="box box_choose">
<p>全部</p>
</div>
</div>
<div class="nav">
<div class="box">
<p>科学</p>
</div>
</div>
<div class="nav">
<div class="box">
<p>数码</p>
</div>
</div>
<div class="nav">
<div class="box">
<p>体育</p>
</div>
</div>
<div class="nav">
<div class="box">
<p>时尚</p>
</div>
</div>
<div class="nav">
<div class="box">
<p>影视</p>
</div>
</div>
</div>
<div class="new_outbox">
<div class="news_box">
<div class="text_box">
<div class="time">
<div class="rank">
<p>01</p>
</div>
<p>2816 万热度</p>
</div>
<div class="text">
<p>如何看待西南交大陈玉玉同学,修改成绩保研中科大,东窗事发后被取消保研资格?</p>
</div>
</div>
<div class="img_box">
<img src="../img/user.jpg" alt="">
</div>
</div>
</div>
<div class="new_outbox">
<div class="news_box">
<div class="text_box">
<div class="time">
<div class="rank">
<p>01</p>
</div>
<p>2816 万热度</p>
</div>
<div class="text">
<p>如何看待西南交大陈玉玉同学,修改成绩保研中科大,东窗事发后被取消保研资格?</p>
</div>
</div>
<div class="img_box">
<img src="../img/user.jpg" alt="">
</div>
</div>
</div>
<div class="new_outbox">
<div class="news_box">
<div class="text_box">
<div class="time">
<div class="rank">
<p>01</p>
</div>
<p>2816 万热度</p>
</div>
<div class="text">
<p>如何看待西南交大陈玉玉同学,修改成绩保研中科大,东窗事发后被取消保研资格?</p>
</div>
</div>
<div class="img_box">
<img src="../img/user.jpg" alt="">
</div>
</div>
</div>
<div class="new_outbox">
<div class="news_box">
<div class="text_box">
<div class="time">
<div class="rank">
<p>01</p>
</div>
<p>2816 万热度</p>
</div>
<div class="text">
<p>如何看待西南交大陈玉玉同学,修改成绩保研中科大,东窗事发后被取消保研资格?</p>
</div>
</div>
<div class="img_box">
<img src="../img/user.jpg" alt="">
</div>
</div>
</div>
<div class="new_outbox">
<div class="news_box">
<div class="text_box">
<div class="time">
<div class="rank">
<p>01</p>
</div>
<p>2816 万热度</p>
</div>
<div class="text">
<p>如何看待西南交大陈玉玉同学,修改成绩保研中科大,东窗事发后被取消保研资格?</p>
</div>
</div>
<div class="img_box">
<img src="../img/user.jpg" alt="">
</div>
</div>
</div>
<!-- 固定模块 -->
<div class="fixed_box">
<div class="fixed_content">
<div class="fixed">
<div class="img"> <img src="" alt=""></div>
<p>首页</p>
</div>
</div>
<div class="fixed_content">
<div class="fixed fixed_r">
<div class="img"> <img src="" alt=""></div>
<p>我的</p>
</div>
</div>
</div>
</div>
</div>
<!-- body end -->
</div>
</body>
<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 不授权模式, 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/init.js" id="initClass" authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/ui.js" id="ui_class" xhr_show_loading=1></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.5/assets/js/import_dev_kit.js"></script>
<script class="_dcdev_preset_">
// 代码片段描述
code_part_desc = "文章列表2";
code_part_id = "1220007455daedf4";
</script>
<!------ 以上内容不要变动 --------------------------------------------------------->
</html>
整理下