备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

弹性布局案例实操(京东网页对草稿页面进行改进)（二）

2023-02-19 124
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 弹性布局案例实操(京东网页对草稿页面进行改进)（二）

Css模块的内容

body {
  margin: 0px;
  padding: 0px;
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  color: #666;
}
body:hover {
  cursor: pointer;
}
/* 图片导行栏 */
.head_div {
  background-color: rgb(214, 5, 4);
  height: 66.5px;
}
.head_div_img {
  height: 66.5px;
  width: 80%;
  margin: auto;
  background-image: url(../image/head-1.png);
  background-size: cover;
  box-sizing: 20%;
}
#shortcut {
  height: 31px;
  border-bottom: 1px solid rgb(206, 48, 48);
  background-color: rgb(218, 216, 216);
}
#shortcut .w {
  height: 30px;
  line-height: 30px;
  /* border: 1px solid rgb(255, 166, 196); */
  background-color: rgb(218, 220, 227);
}
.w {
  margin: auto;
  width: 1190px;
}
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
li {
  list-style: none;
}
/* clasa选择器 */
.f1 {
  float: left;
  padding-right: 8%;
}
.fr {
  float: right;
}
.fr .father_fr {
  display: flex;
  justify-content: space-between;
  /* background-color: rgb(167, 171, 160); */
}
.father_fr_text {
  font-size: 12px;
  opacity: 0.7;
  line-height: 30px;
  text-align: center;
}
/* id选择器 */
#father_fr_text_one {
  font-weight: 900;
  color: red;
}
#father_fr_text_two {
  color: red;
}
/* 头部导行栏 */
#header {
  background: #fff;
  border-bottom: 1px solid #ddd;
}
#header .w {
  position: relative;
  z-index: 11;
  height: 140px;
  display: flex;
}
/* 京东图标 */
#logo,
.logo_tit {
  background-image: url("../image/logo.png");
  position: absolute;
}
#logo {
  z-index: 2;
  left: 0;
  top: 10px;
  width: 190px;
  height: 120px;
  background-color: #fff;
}
.seacher {
  padding-top: 20px;
  padding-left: 20%;
  /* margin: auto; */
  z-index: 4;
}
input {
  height: 40px;
  width: 650px;
  border: 2px solid red;
}
.seacher_img {
  height: 46px;
  width: 100px;
  float: right;
  background-color: red;
}
#seacher_img1 {
  margin-left: 23px;
  height: 46px;
  box-sizing: 100%;
}
.seacher_img_text {
  float: right;
  height: 44px;
  line-height: 44px;
  width: 100px;
  border: 1px solid rgb(222, 244, 166);
}
.header_right {
  padding-top: 10px;
  float: right;
  /* position: fixed; */
  right: 16%;
}
.seacher_bottom_father {
  display: flex;
  justify-content: space-around;
}
.sercher_bottom_text {
  padding-top: 3px;
  font-size: 13px;
}
/* 用户经过文字是显示 */
.sercher_bottom_text:hover {
  color: red;
}
.sercher_bottom_text:hover {
  color: red;
}
/* 底部内容 */
.header_boottomes_father {
  height: 30px;
  width: 80%;
  /* border: 1px solid red; */
  position: absolute;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
}
a {
  list-style: none;
  text-decoration: none;
  line-height: 30px;
  color: black;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  color: #666;
}
.header_boottomes_father_a:hover {
  color: rgb(59, 100, 5);
}
/* 第三部分 */
/* 先用一个大的div */
/* 第三模块的内容 */
.three_div1 {
  width: 100%;
  height: 657px;
  /* border: 1px solid rebeccapurple; */
}
/* 定义Ifrane框架技术 */
iframe {
  width: 100%;
  /* 让盒子居中起来 */
  margin: auto;
  height: 657px;
}
/* 在盒子居中后进行页面的布局 弹性布局  */
.three_div1_mode1 {
  width: 80%;
  /* 让盒子居中起来 */
  margin: auto;
  height: 657px;
  /* border: 1px solid rgb(18, 181, 46); */
  /* 在父类的元素中定义弹性布局页面的信息 */
  /* 在父类的元素盒子中将他改为弹性的盒子开始去布局 */
  display: flex;
}
.three_div1_mode1 .three_div1 {
  flex: 1.5;
  margin: 2px;
  background-color: #fefefe;
  border: 1px solid red;
  /* background-color: rgb(170, 221, 204); */
}
/* 第三部分 */
.three_div1_mode1 .three_divmode {
  flex: 2;
  margin: 2px;
  background-color: rgb(243, 243, 137);
  /* 在父类中定义弹性的盒子 主反向为Y */
  display: flex;
  flex-direction: column;
}
.threediv1_divmode_w {
  border: 1px solid greenyellow;
  flex: 1;
  background-color: rgb(255 255 255);
}
.three1 {
  /* padding-top: 1%; */
  padding-left: 5%;
}
/* 第四部分将他转为弹性的盒子 */
.three_div1mode2 {
  flex: 2;
  margin: 2px;
  /* 这是父元素 */
  display: flex;
  flex-direction: column;
}
.mode2_text1 {
  flex: 0.8;
  border: 1px solid red;
  background-color: rgb(255, 255, 255);
  margin: 2px;
}
.mode_text1_one {
  margin-left: 10%;
  padding-left: 10%;
  height: 50%;
  width: 100px;
  /* background-color: antiquewhite; */
  float: left;
  margin: 1px;
}
#p {
  position: relative;
  top: 10px;
  left: -50px;
}
.mode_text1_one img {
  padding-top: 10px;
  background-size: 100%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.aa:hover {
  color: red;
}
.po {
  font-size: 18px;
  font-weight: 900;
  border-radius: 20px;
  margin: 10px;
  height: 40px;
  width: 100px;
  background-color: black;
  color: #fefefe;
}
#ui:hover {
  background-color: red;
  color: #fefefe;
}
#uio:hover {
  background-color: black;
  color: orange;
}
/* 第四模块的第二部分 */
.mode2_text2 {
  flex: 1;
  background-color: rgb(255, 255, 255);
  border: 1px solid lightpink;
  margin: 2px;
}
/* left */
.mode_text3_left {
  float: left;
}
/* right */
.mode_text3_right {
  float: right;
}
#opui:hover {
  color: red;
}
.mode2_text3 {
  flex: 2;
  background-color: rgba(252, 252, 252, 0.466);
  border: 1px solid lightskyblue;
  margin: 2px;
}
table {
  height: 100%;
  width: 100%;
}
table img {
  margin: auto;
  width: 28px;
  height: 28px;
}
td {
  text-align: center;
  border: 1px solid black;
}
.huk_poil {
  background-color: rgba(225, 37, 27, 0.08);
}
.huk_poil:hover {
  color: red;
}
/* 第二模块 */
.three_div1_mode1 .three_div2 {
  flex: 5.4;
  /* padding: 10px; */
  margin: 3px;
  background-color: rgb(226, 173, 109);
}
/* 第四部分的内容 介绍*/
.four_div2 {
  /* padding: 2px; */
  margin: 10px;
  width: 100%;
  height: 260px;
  border: 1px solid rgb(3, 55, 228);
}
/* 定义一个父类盒子居中内容 */
.four_div2_mode1 {
  /* position: relative; */
  margin: auto;
  width: 80%;
  height: 260px;
  border: 1px solid yellowgreen;
  border-radius: 1px;
  display: flex;
}
.four_div2_mode1 iframe {
  flex: 8;
  height: 260px;
}
.four_div2mode1_div {
  flex: 1;
  margin: 2px;
  border: 2px solid red;
  background-color: rgb(255, 255, 255);
}
.oyu {
  border: 2px solid red;
  border: 20px;
  height: 40px;
  width: 100px;
  line-height: 40px;
  text-align: center;
  margin: auto;
  background-color: black;
  color: #fefefe;
}
/* 子绝对定位父相对定位 */
.four_div2_right {
  float: right;
  display: block;
  width: 5%;
  height: 260px;
  position: absolute;
  right: 96px;
  /* border: 2px solid powderblue; */
  background-color: aquamarine;
}
/* <!-- !第五模块的内容--> */
.five_div3 {
  height: 347px;
  width: 100%;
  border: 1px solid red;
  /* border: 2px solid lightskyblue; */
}
.five_div3_mode {
  height: 347px;
  width: 80%;
  margin: auto;
  border: 1px solid rgb(243, 0, 243);
  /* 定义弹性布局 */
  display: flex;
  position: relative;
}
.five_div3_mode2 {
  margin: 1px;
  flex: 1;
  border: 1px solid lightseagreen;
  background-color: rgb(253, 253, 253);
}
.five_div3_mode2 div {
  color: black;
  float: left;
}
.five_div3_test {
  position: relative;
  top: 9px;
  left: 12px;
  text-align: center;
  line-height: 20px;
  height: 20px;
  width: 20px;
  padding: 0px;
  /* border: 2px solid red; */
  border-radius: 50%;
  color: black;
}
.five_div3_test:hover {
  background-color: red;
  color: #fefefe;
  font-weight: 900;
}
.fiver_div3_right {
  display: block;
  position: absolute;
  left: 48%;
  font-weight: 900;
  color: red;
  /* border-bottom: 2px solid red; */
}
.fiver_div3_right:hover {
  color: red;
}
.fiver_div1_p {
  position: absolute;
  text-align: center;
  height: 30px;
  width: 149px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAYBAMAAACIFvdWAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURfa3PfekAPesGfenC/a0MvewJ5uweioAAABjSURBVHjajdAxDYBQAMRQBhBwEggKsECCge9fDEwEaNLcmzt16i1b6nbekrTtSOp67Knr427b+lzzKEa8FCNQy4gPH/FnI8hGkI0gG0E2gmwEYYTCCIURCiMURiiMUBihMEJd/HcrFSr6YboAAAAASUVORK5CYII=);
  background-size: cover;
  top: -15px;
  font-family: MicrosoftYaHei-Bold, Microsoft Yahei, PingFangSC-Medium, sans-serif, serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 40px;
  color: #fff;
  letter-spacing: 0;
  text-align: center;
}
.max_father {
  position: absolute;
  /* border: 1px solid red; */
  height: 279px;
  width: 50%;
  top: 40px;
  display: flex;
}
.max_father_son {
  flex: 1;
  /* background-color: aquamarine; */
}
.max_father_son img {
  position: absolute;
  top: 30px;
}
.special_item_name {
  position: absolute;
  margin-top: 9px;
  margin-bottom: 4px;
  height: 19px;
  line-height: 19px;
  width: 150px;
  font-size: 14px;
  display: inline-block;
  text-align: center;
  top: 183px;
}
.special_item_miaoShaPrice {
  font-size: 18px;
  position: absolute;
  color: red;
  top: 220px;
  left: 12px;
}
.max_father_son1 {
  flex: 4;
  /* background-color: azure; */
  /* border: 1px solid red; */
  display: flex;
  flex-wrap: wrap;
}
article {
  display: block;
  height: 48%;
  width: 48%;
  /* border: 1px solid rgb(2, 177, 236); */
  margin: 4px;
}
.max_father_son1 .max_father_son2 {
  justify-content: space-around;
}
.max_father_son2 {
  display: block;
  display: flex;
  flex-wrap: wrap;
}
.max_father_son3 {
  width: 48%;
  margin: 1px;
  background-color: rgb(255, 255, 255);
  justify-content: space-between;
}
.max_father_son3 img {
  height: 80%;
}
/* 大的div开始弹性布局 */
.big_div {
  border: 1px solid rgb(255, 0, 85);
  height: 85%;
  width: 100%;
  display: block;
  display: flex;
}
.big_div_son1 {
  flex: 1;
  background-color: aliceblue;
}
.big_div_son2 {
  display: block;
  flex: 2;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-wrap: wrap;
}
.big_div_son2div {
  width: 48%;
  margin: 1px;
  height: 32%;
  background-color: rgb(255, 255, 255);
  justify-content: space-around;
}
.big_div_son2div img {
  background-size: 60%;
  width: 70%;
  height: 60%;
}
h6 {
  display: block;
  font-size: 0.67em;
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
.other-item__name {
  color: #666;
  margin-top: 6px;
  font-size: 12px;
  text-align: center;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* <!-- !第六模块的内容 --> */
.five_div4 {
  height: 267px;
  width: 100%;
  border: 2px solid lightskyblue;
}
.five_div4_mode {
  height: 267px;
  width: 80%;
  margin: auto;
  border: 2px solid rgb(240, 0, 240);
  /* 定义弹性布局 */
  display: flex;
}
.five_div4_mode0 {
  margin: 2px;
  flex: 1;
  background-color: rgb(159, 206, 253);
}
.five_div4_mode1 {
  margin: 2px;
  flex: 8;
  border: 2px solid red;
}
/* 第七模块 */
.six_div5 {
  width: 100%;
  height: 65px;
  /* background-color: #ddd; */
}
.six_div5_mode {
  text-align: center;
  line-height: 59px;
  margin: auto;
  width: 80%;
  height: 65px;
  background-color: rgb(255, 255, 255);
}
.six_div5_mode h3 {
  font-size: 21px;
}
/* 第八模块 */
.eight_div {
  height: 370px;
  width: 100%;
  border: 1px solid red;
}
.eight_div_mode {
  width: 80%;
  height: 370px;
  /* border: 1px solid rgb(232, 255, 254); */
  margin: auto;
  display: flex;
  /* background-color: antiquewhite; */
  /* justify-content: space-around; */
}
.eight_a {
  margin: 2px;
  flex: 1;
  border: 1px solid red;
  /* background-color: rgb(124, 221, 221); */
}
#eight_one {
  background: rgba(239, 135, 135, 0.2);
}
#eight_two {
  background: rgba(170, 235, 166, 0.2);
}
.eight_a img {
  height: 200px;
}
.eight_b {
  height: 49%;
  border: 1px solid rgb(159, 206, 253);
}
.eight_c {
  float: left;
  height: 67%;
  border: 1px solid red;
  width: 49%;
}
.eight_c img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}
/* 第九模块整体布局 */
.nine_div {
  height: 200px;
  width: 100%;
  /* border: 2px dotted orange; */
}
.nine_divmode {
  margin: auto;
  height: 200px;
  width: 80%;
  /* border: 2px solid orange; */
  display: flex;
  flex-wrap: wrap;
}
.nine_w {
  flex: 1;
  flex-wrap: wrap;
  width: 24%;
  margin: 2px;
  border: 1px solid red;
  background-color: rgb(255, 255, 255);
}
.nine_w_a {
  float: left;
  height: 70%;
  width: 49%;
  border: 1px solid rgb(238, 0, 79);
}
.nine_w_a img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  margin-left: 15%;
  margin-right: 15%;
}
/* 第十三模块 */
.aone_div {
  width: 100%;
  height: 80px;
  background-color: rgb(255, 255, 255);
}
/* 定义父类的盒子模型 */
.aone_div_mode {
  width: 80%;
  height: 80px;
  border: 1px solid hotpink;
  margin: auto;
  display: flex;
}
.apn {
  text-align: center;
  flex: 1;
  /* background-color: rgb(240, 149, 29); */
  border: 1px solid rgb(7, 116, 116);
  margin: 2px;
  margin-bottom: 2px;
}
span:hover {
  color: red;
}
/* ! 第十四模块 */
.bone_div {
  width: 100%;
  height: 280px;
  border: 1px solid rgb(0, 208, 255);
}
.bone_div_one {
  margin: auto;
  width: 80%;
  height: 280px;
  border: 1px solid rgb(255, 255, 0);
  display: flex;
}
.bone_dive_one_b {
  margin: 2px;
  display: inline-block;
  background-color: rgb(255, 255, 255);
  /* border: 1px solid red; */
  flex: 1;
}
.bone_div_one_baa {
  width: 100%;
  height: 70%;
  border: 1px solid lightsalmon;
}
.bone_div_one_bab {
  width: 100%;
  height: 29%;
  border: 1px dotted rgb(255, 72, 0);
}
.bone_div_one_baa img{
  margin-top: 10px;
  margin-right: 20%;
  margin-left: 20%;
}
/* 尾部 */
.footer_div {
  height: 60px;
  width: 100%;
  /* border: 1px solid lightgreen; */
}
.footer_div_mode {
  height: 60px;
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.footer_img {
  position: relative;
  width: 19%;
  height: 60px;
  /* background-color: rgb(230, 0, 0); */
  border:  1px solid red;
}
.img_jinglingtu{
  border: 1px solid red;
  width: 49px;
  height: 40px;
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 10%;
}
.mod_service_txt {
  position: absolute;
    overflow: hidden;
    width: 100%;
    height: 42px;
    line-height: 42px;
    font-size: 18px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #444;
  top: -9px;
  left: 102px;
}
.img_jinglingtu{
  position: absolute;
  background: url(../image/cc1d8d291ea917c0.png)10px -192px;
}
.img_two{
  border: 1px solid red;
  width: 42px;
  height: 40px;
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 10%;
}
.img_two{
  position: absolute;
  background: url(../image/cc1d8d291ea917c0.png)-37px -192px;
}
.img_two1{
  border: 1px solid red;
  width: 42px;
  height: 40px;
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 10%;
}
.img_two1{
  position: absolute;
  background: url(../image/cc1d8d291ea917c0.png)-80px -192px;
}
.img_two2{
  border: 1px solid red;
  width: 42px;
  height: 40px;
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 10%;
}
.img_two2{
  position: absolute;
  background: url(../image/cc1d8d291ea917c0.png)-122px -192px;
}
/* footer2 */
.footer_divb {
  height: 170px;
  width: 100%;
  border: 1px solid rgb(255, 255, 255);
}
.footer_div_modeb {
  height: 170px;
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.footer_imgb {
  width: 19%;
  height: 170px;
  /* background-color: rgb(151, 219, 50); */
  border:  1px rgb(0, 0, 0) solid;
}
.mod_help_nav_tit {
  margin-left: 16%;
    margin-bottom: 5px;
    font-size: 14px;
}
li{
  text-decoration: none;
  list-style: none;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
/* foot3 */
.footer_divbc {
  height: 80px;
  width: 100%;
  border: 1px solid rgb(0, 255, 0);
}
.footer_div_modebc {
  margin-top: 10px;
  height: 80px;
  width: 80%;
  border: 1px solid rgb(246, 182, 182);
  margin: auto;
  text-align: center;
  line-height: 80px;
  display: flex;
}
a:hover{
  color: red;
}
.ss_footer {
  flex: 1;
  background-color: rgb(218, 228, 237);
}
.footer_opi {
  height: 300px;
  width: 100%;
  border: 1px solid plum;
}
.footer_opimode {
  margin: auto;
}
.last_opu {
  width: 100%;
  background-color: grey;
  height: 160px;
}
.last-mode {
  margin: auto;
  width: 80%;
  background-color: cornflowerblue;
  height: 160px;
  border: 1px solid lightseagreen;
  display: flex;
  /* justify-content: space-around; */
}
.last_span {
  flex: 1;
  background-color: rgb(162, 228, 134);
  margin: 2px;
}


效果图如下所示: 头部图片我隐藏了









文章标签：
前端开发
t75yjb52rsccc
目录
相关文章
联营汇聚
|
9月前
|
搜索推荐 数据挖掘
伙伴云「页面」上线！网站、博客、资源库、文档、周报，拖拽即刻实现
一年来，伙伴云收到了许多用户对于仪表盘升级的期待，以及对新功能规划的询问。经过千百次调研、开发、内测，我们开发了一款页面构建引擎，Ta既提供了灵活的可定制性，也不像网页设计器晦涩难懂，且具有丰富的数据展现能力。
联营汇聚
103 0
蜡笔小心_
|
JavaScript
【Vue3从零开始-实战】S16：详情页样式优化及tab栏内容联动功能实现
【Vue3从零开始-实战】S16：详情页样式优化及tab栏内容联动功能实现
蜡笔小心_
177 0
【Vue3从零开始-实战】S16：详情页样式优化及tab栏内容联动功能实现
技术君
|
2月前
|
缓存 小程序 数据可视化
【社区每周】小程序授权弹层和菜单支持长辈版、无障碍版；AMPE情景智能新增widget卡片能力（2022年6月第一期）
【社区每周】小程序授权弹层和菜单支持长辈版、无障碍版；AMPE情景智能新增widget卡片能力（2022年6月第一期）
技术君
19 0
bug天选之子
|
8月前
【项目经验】：项目中下拉框数据太多造成页面卡顿（二）
项目中下拉框数据太多造成页面卡顿（二）
bug天选之子
54 0
熊泽-学习中的苦与乐
|
9月前
|
数据可视化 开发工具 git
只会Excel想做图表可视化，让数据动起来？可以，快来围观啦（附大量模板下载）
只会Excel想做图表可视化，让数据动起来？可以，快来围观啦（附大量模板下载）
熊泽-学习中的苦与乐
132 0
RedEric
|
10月前
|
小程序
小程序酷炫动态登录页源码（动态水滴）
小程序酷炫动态登录页源码（动态水滴）
RedEric
134 0
t75yjb52rsccc
弹性布局案例实操(京东网页对草稿页面进行改进)（一）
弹性布局案例实操(京东网页对草稿页面进行改进)（一）
t75yjb52rsccc
343 0
优化猩
|
移动开发 HTML5 SEO
着陆页如何设计？详解着陆页设计的5大要点及常见问题
着陆页的设计只有一个重点目标 - 称为行动呼吁（CTA）。这种简单性使着陆页成为提高广告转化率的最佳选择，在设计着陆页时需要传递以下5类信息，也是着陆页设计的5大要点，一起来看看吧。
优化猩
173 0
着陆页如何设计？详解着陆页设计的5大要点及常见问题
Yj家的孺子牛
|
Java
仿写一个登录页(布局篇)|青训营笔记
在使用 APP 派对岛 的时候，发现它的页面很好看，同时其首要的登录方法也是跳转去采用抖音来登录的。符合当前的业务需求，所以决定仿写该页面作为大作业的登录界面。
Yj家的孺子牛
128 0
仿写一个登录页(布局篇)|青训营笔记
前端歌谣
|
前端开发
前端工作总结299-uni-发布详情页样式修改
前端工作总结299-uni-发布详情页样式修改
前端歌谣
92 0
前端工作总结299-uni-发布详情页样式修改

热门文章

最新文章

  • 1
    Linux查看进程的内存占用情况
  • 2
    大咖云集，技术宅开趴倒计时 —— 2017 Kubernetes Meetup | 成都站
  • 3
    ubuntu安装KVM虚拟机管理virt-manager
  • 4
    OpenCV4之C++入门详解 （上）
  • 5
    vue2中computed中无法获取到this
  • 6
    Visual Basic快速入门
  • 7
    HDU 4968 Improving the GPA
  • 8
    这56家公司共同发力智慧城市
  • 9
    书写高质量JavaScript代码的要义（The Essentials of Writing High Quality JavaScript）翻译
  • 10
    linux驱动开发--字符设备：信号量
  • 1
    Serverless 应用引擎产品使用之在函数计算中，数据库访问失败如何解决
    13
  • 2
    Serverless 应用引擎产品使用之在阿里云函数计算中发现没有NAC（Native Application Component）选项，且无法自己上传MOD（模块）如何解决
    16
  • 3
    Serverless 应用引擎操作报错合集之在阿里云函数计算中，调用了FC函数但是没有执行或者报错，并且在FC函数后台也看不到调用记录日志如何解决
    16
  • 4
    揭秘深度学习在图像识别中的奥秘
    12
  • 5
    构建高效的Android应用：从内存优化到电池寿命
    15
  • 6
    深入理解与应用软件自动化测试框架
    12
  • 7
    移动应用开发的未来：跨平台框架与原生系统的挑战
    12
  • 8
    Serverless 应用引擎操作报错合集之在阿里函数计算中，sd部署启动报错CAExited 报错信息“operation not permitted”如何解决
    13
  • 9
    构建高效云原生应用：以Kubernetes为核心
    14
  • 10
    深入理解软件测试中的持续集成与持续部署
    12

    • 相关电子书

    更多
  • QQ移送页面框架优化实践
  • QQ移动页面框架优化实践
  • 优化4K制作流程，创建“4K视觉云”服务

    • 相关实验场景

    更多
  • 配置流程编排实现根据天气情况播放歌曲
  • 基于Kibana Discover筛选数据，自由搜索航班信息
  • 收银台的场景化界面实践
  • 3分钟创建Serverless Job 定时获取新闻热搜
  • 实验手册指导文档
  • 基于Serverless架构的盲盒抽奖系统
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）