AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

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

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
目录
相关文章
小徐在进步
|
2月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法，包括清除内外边距、列表项目符号等；探讨了外边距的合并与塌陷问题及其解决策略；讲解了行内元素垂直边距的处理技巧；并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例，展示了所学知识的实际应用。
小徐在进步
55 11
朝阳39
|
4月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新，点击图片放大预览，转发给好友/群，分享到朋友圈
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新，点击图片放大预览，转发给好友/群，分享到朋友圈
朝阳39
42 0
AlanHou同学
|
11月前
|
vr&ar
visionOS空间计算实战开发教程Day 6 拖拽和点击
在之前的学习中我们在空间中添加了3D模型，但在初始摆放后就无法再对其进行移动或做出修改。本节我们在Day 5显示和隐藏的基础上让我们模型可以实现拖拽效果，同时对纯色的立方体实现点击随机换色的功能。
AlanHou同学
104 2
bug天选之子
【项目经验】：项目中下拉框数据太多造成页面卡顿（二）
项目中下拉框数据太多造成页面卡顿（二）
bug天选之子
240 0
RedEric
|
小程序
小程序酷炫动态登录页源码（动态水滴）
小程序酷炫动态登录页源码（动态水滴）
RedEric
259 0
优化猩
|
移动开发 HTML5 SEO
着陆页如何设计？详解着陆页设计的5大要点及常见问题
着陆页的设计只有一个重点目标 - 称为行动呼吁（CTA）。这种简单性使着陆页成为提高广告转化率的最佳选择，在设计着陆页时需要传递以下5类信息，也是着陆页设计的5大要点，一起来看看吧。
优化猩
256 0
着陆页如何设计？详解着陆页设计的5大要点及常见问题
软件测评说
|
Web App开发 存储 安全
工具资源合集【置顶】
工具资源合集【置顶】
软件测评说
552 0
前端歌谣
|
前端开发
前端知识学习案例7-开发企业网站7-实现轮播标题依次动画
前端知识学习案例7-开发企业网站7-实现轮播标题依次动画
前端歌谣
69 0
前端知识学习案例7-开发企业网站7-实现轮播标题依次动画
t75yjb52rsccc
弹性布局案例实操(京东网页对草稿页面进行改进)（一）
弹性布局案例实操(京东网页对草稿页面进行改进)（一）
t75yjb52rsccc
380 0
Yj家的孺子牛
|
Java
仿写一个登录页(布局篇)|青训营笔记
在使用 APP 派对岛 的时候，发现它的页面很好看，同时其首要的登录方法也是跳转去采用抖音来登录的。符合当前的业务需求，所以决定仿写该页面作为大作业的登录界面。
Yj家的孺子牛
157 0
仿写一个登录页(布局篇)|青训营笔记

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    《Cadence 16.6电路设计与仿真从入门到精通》——2.4 Design Entry CIS原理图图形界面　
  • 3
    记一次对网络抖动经典案例的分析
  • 4
    国外成人网站xHamster大量用户信息黑市变卖，部分账号涉及英美政府官员
  • 5
    用户密码以BCrypt加密的方式来防范被破解
  • 6
    带你理清CPU，cache和存储器之间的逻辑运作
  • 7
    Git设置代理服务器
  • 8
    【DSW Gallery】PAI-DSW开通及授权
  • 9
    吐血整理：机器学习的30个基本概念，都在这里了（手绘图解）
  • 10
    MOSS站点的迁移(备份还原)
  • 1
    设计模式之 5 大创建型模式，万字长文深剖 ，近 30 张图解！
    49
  • 2
    《C++新特性：为多线程数据竞争检测与预防保驾护航》
    41
  • 3
    Kotlin - 区间与数组
    41
  • 4
    Kotlin - 参数与异常
    39
  • 5
    Kotlin - 运算符与中缀表达式
    34
  • 6
    Kotlin - 函数与Lambda表达式
    23
  • 7
    Kotlin - 分支与循环
    19
  • 8
    天气预报1天-中国气象局-地址查询版免费API接口教程
    20
  • 9
    《C++智能合约与区块链底层交互全解析：构建坚实的去中心化应用桥梁》
    19

    • 相关课程

    更多
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）

    • 相关电子书

    更多
  • QQ移送页面框架优化实践
  • QQ移动页面框架优化实践
  • 动态、高效，蚂蚁动态卡片的内核逻辑

    • 相关实验场景

    更多
  • 配置流程编排实现根据天气情况播放歌曲
  • 图表样式智能美化工具
  • 快速搭建移动端可视化看板
  • DataV模版快速创建可视化看板
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 基于Kibana Discover筛选数据，自由搜索航班信息
    • 下一篇
    阿里云OSS设置跨域访问