弹性布局案例实操(京东网页制作的草稿)
2024-05-29 05:04:45
CSS3的弹性布局_星辰镜的博客-CSDN博客
上面的文章弹性布局的详细介绍:
Css3的页面布局之定位_星辰镜的博客-CSDN博客
上面的文章是定位的介绍
Day02 了解Html+CSS的学习内容Css属性 内边距 外边距呀 边框 选择器 实操_星辰镜的博客-CSDN博客
上面文章是Html CSS的基础内容
Html CSS 实操一_星辰镜的博客-CSDN博客
上面是对简单的页面实操对html css的回顾
今天的主角是弹性布局:如何利用号弹性布局快速形成一个网页的静态页面呢?z
我的答案是可以只要你想去做又一定可以:这篇文章没有新的内容只有对于京东网页页面布局的实操
在上面的基础上理解弹性布局:思考下面的页面改如何去做呢?
代码模块本案例分为了二是五个模块 下面对各个模块进行弹性布局
<!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.<title>Document</title><!--! D:\com.web\京东网页\image 图片文件路径--><!--!D:\com.web\京东网页\css css文件路径 --><!--! D:\com.web\京东网页\js js文件路径-->
</head>
<!-- * 导入ccc文件 导入js文件 -->
<!-- 图片样式 -->
<link rel="stylesheet" href="../css/one.css">
<script src="./js/index.js"></script><body>第一模块:
<!-- 第一部分图片导行栏 --><div class="head_div"><div class="head_div_img"></div></div>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;background-color: #fff;border: 2px solid lightpink;
}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%;}第二模块:
<!-- 第二部分导行栏 --><div id="shortcut"><!-- 在这个div上写导行信息内容 --><div class="w"><span class="f1">定位锁定在江西省</span><span class="f1"></span><span class="fr"><span class="father_fr"><span class="father_fr_text">你好,请登录</span><span class="father_fr_text color" id="father_fr_text_one">免费注册 </span><span class="father_fr_text">我的订单 |</span><span class="father_fr_text">我的京东 |</span><span class="father_fr_text">京东会员 |</span><span class="father_fr_text" id="#father_fr_text_two">企业采购 |</span><span class="father_fr_text">商家服务 |</span><span class="father_fr_text">网站导行 |</span><span class="father_fr_text">手机京东 |</span><span class="father_fr_text">网站无障碍 </span></span></span></div></div>#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;
}
第三模快
<!-- 第三部分头部导行栏 --><div id="header"><div class="w"><!--导行栏第一步分搜索框 --><!-- 京东图标 --><div id="logo" class="logo"></div><div class="seacher"><input type="text" placeholder="地球仪"><div class="seacher_img_text">我是购物车</div><div class="seacher_img"><img src="../image/search.jpg" alt="" id="seacher_img1"></div><!-- 弹性布局的方式 --><div class="seacher_bottom_father"><span class="sercher_bottom_text">抢iPhone14 </span><span class="sercher_bottom_text"> 三星手机 </span><span class="sercher_bottom_text">京东京造 </span><span class="sercher_bottom_text">小米新品 </span><span class="sercher_bottom_text">腕表焕新 </span><span class="sercher_bottom_text"> 智能数码 </span><span class="sercher_bottom_text">茅台特惠 </span></div><!-- 底部 --><div class="header_boottomes_father"><a class="header_boottomes_father_a" href="京东超市">京东超市</a><a class="header_boottomes_father_a" href="京东生鲜">京东生鲜</a><a class="header_boottomes_father_a" href="秒杀">秒杀</a><a class="header_boottomes_father_a" href="优惠券">优惠券</a><a class="header_boottomes_father_a" href="京东家电">京东家电</a><a class="header_boottomes_father_a" href="PLUS会员">PLUS会员</a><a class="header_boottomes_father_a" href="品牌闪购">品牌闪购</a><a class="header_boottomes_father_a" href="进口好物">进口好物</a><a class="header_boottomes_father_a" href="拍卖">拍卖</a><a class="header_boottomes_father_a" href="京东五金城">京东五金城</a></div></div><!-- 最右部分 --><div class="header_right"><img src="../image/logo_1726.png" alt=""></div></div></div>/* 头部导行栏 */
#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(30, 120, 181);
}.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;
}/* 底部内容 */
.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;font-size: 14px;font-weight: 900;color: black;
}.header_boottomes_father_a:hover {color: rgb(59, 100, 5);
}第四模快
<!-- 第三部分的内容 --><div class="three_div1"><div class="three_div1_mode1"><!-- 模块化思想本模块分为四部分利用百分比去布局 定义id选择器 --><div class="three_div1">第一部分</div><div class="three_div2">第二部分</div><div class="three_divmode">第三部分<!-- 在这个部分中要定义弹性布局 --><div class="threediv1_divmode_w">第三部分中的模块1</div><div class="threediv1_divmode_w">第三部分中的模块2</div><div class="threediv1_divmode_w">第三部分中的模块3</div></div><div class="three_div1mode2"><!-- 在这个部分中要定义弹性布局 --><div class="mode2_text1">第四部分的内容第1</div><div class="mode2_text2">第四部分的内容第2</div><div class="mode2_text3">第四部分的内容第3</div></div></div></div>/* 第三模块 */
/* 先用一个大的div */
.three_div1 {width: 100%;height: 500px;border: 1px solid rebeccapurple;
}/* 在盒子居中后进行页面的布局 弹性布局 */
.three_div1_mode1 {width: 80%;/* 让盒子居中起来 */margin: auto;height: 500px;border-collapse: ;border: 1px solid rgb(18, 181, 46);/* 在父类的元素中定义弹性布局页面的信息 *//* 在父类的元素盒子中将他改为弹性的盒子开始去布局display: flex;
}.three_div1_mode1 .three_div1 {flex: 2;margin: 2px;background-color: rgb(170, 221, 204);
}第五模快
<!-- !第四部分的内容 -->
<div class="four_div2"><div class="four_div2_mode1"><div class="four_div2mode1_div">我是第几个盒子呀1</div><div class="four_div2mode1_div">我是第几个盒子呀12</div><div class="four_div2mode1_div">我是第几个盒子呀13</div><div class="four_div2mode1_div">我是第几个盒子呀14</div><div class="four_div2mode1_div">我是第几个盒子呀15</div><div class="four_div2mode1_div">我是第几个盒子呀16</div><div class="four_div2_right">右边</div></div>/* 第四部分将他转为弹性的盒子 */
.three_div1mode2 {flex: 2;margin: 2px;/* 这是父元素 */display: flex;flex-direction: column;}.mode2_text1 {flex: 1;background-color: rgb(90, 228, 232);margin: 2px;
}.mode2_text2 {flex: 1;background-color: rgb(139, 200, 25);margin: 2px;
}.mode2_text3 {flex: 2;background-color: rgba(35, 197, 119, 0.466);margin: 2px;
}.three_div1_mode1 .three_div2 {flex: 5;/* 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_div2mode1_div {flex: 1;margin: 2px;background-color: rgb(199, 243, 199);
}/* 子绝对定位父相对定位 */
.four_div2_right {float: right;display: block;width: 5%;height: 260px;position: absolute;right: 96px;/* border: 2px solid powderblue; */background-color: aquamarine;
}
第五，六,七模快
<!-- !第五模块的内容 --><div class="five_div3"><div class="five_div3_mode"><div class="five_div3_mode2">1</div><div class="five_div3_mode2">2</div></div></div><!-- !第六模块的内容 --><div class="five_div4"><div class="five_div4_mode"><div class="five_div4_mode0">1</div><div class="five_div4_mode1">8</div></div></div><!-- !第七模块 --><div class="six_div5"><div class="six_div5_mode"><h1>频道广播</h1></div></div>/* <!-- !第五模块的内容 --> */
.five_div3 {height: 260px;width: 100%;border: 2px solid lightskyblue;
}.five_div3_mode {height: 260px;width: 80%;margin: auto;border: 2px solid plum;/* 定义弹性布局 */display: flex;}.five_div3_mode2 {margin: 2px;flex: 1;background-color: rgb(24, 185, 254);
}/* <!-- !第六模块的内容 --> */
.five_div4 {height: 250px;width: 100%;border: 2px solid lightskyblue;
}.five_div4_mode {height: 250px;width: 80%;margin: auto;border: 2px solid plum;/* 定义弹性布局 */display: flex;}.five_div4_mode0 {margin: 2px;flex: 1;background-color: rgb(155, 248, 175);
}.five_div4_mode1 {margin: 2px;flex: 8;background-color: rgb(6, 206, 213);
}/* 第七模块 */
.six_div5 {width: 100%;height: 100px;background-color: #ddd;
}.six_div5_mode {text-align: center;line-height: 100px;margin: auto;width: 80%;height: 100px;background-color: rgb(54, 157, 205);
}第八模块到十三模快
<!-- 第八模块 --><div class="eight_div"><div class="eight_div_mode"><div class="eight_a">我是第八部分的内容</div><div class="eight_a">我是第八部分的内容</div><div class="eight_a">我是第八部分的内容</div><div class="eight_a">我是第八部分的内容</div></div></div><!-- 第九模块整体布局 --><div class="nine_div"><div class="nine_divmode"><div class="nine_w">11</div><div class="nine_w">11</div><div class="nine_w">11</div><div class="nine_w">11</div></div></div><!-- 第10模块整体布局 --><div class="nine_div1"><div class="nine_divmode1"><div class="nine_w1">11</div><div class="nine_w1">11</div><div class="nine_w1">11</div><div class="nine_w1">11</div></div></div><!-- 第11模块整体布局 --><div class="nine_div2"><div class="nine_divmode2"><div class="nine_w2">11</div><div class="nine_w2">11</div><div class="nine_w2">11</div><div class="nine_w2">11</div></div></div><!-- !第十二模块 --><div class="six_div12"><div class="six_div12_mode"><h1>为你推荐</h1></div></div><!-- !第十三模块 --><div class="aone_div"><div class="aone_div_mode"><span class="apn">123</span><span class="apn">123</span><span class="apn">123</span><span class="apn">123</span><span class="apn">123</span></div></div>/* 第八模块 */
.eight_div {height: 260px;width: 100%;border: 1px solid red;
}.eight_div_mode {width: 80%;height: 260px;border: 1px solid lightseagreen;margin: auto;display: flex;/* background-color: antiquewhite; *//* justify-content: space-around; */}.eight_a {margin: 2px;flex: 1;background-color: rgb(124, 221, 221);
}/* 第九模块整体布局 */
.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;background-color: rgb(37, 204, 22);
}/* 第十模块 */
.nine_div1 {height: 200px;width: 100%;border: 2px dotted orange;
}.nine_divmode1 {margin: auto;height: 200px;width: 80%;border: 2px solid orange;display: flex;flex-wrap: wrap;}.nine_w1 {flex: 1;flex-wrap: wrap;width: 24%;margin: 2px;background-color: rgb(92, 195, 82)
}/* 第十一模块*/.nine_div2 {height: 200px;width: 100%;border: 2px dotted orange;
}.nine_divmode2 {margin: auto;height: 200px;width: 80%;border: 2px solid orange;display: flex;flex-wrap: wrap;}.nine_w2 {flex: 1;flex-wrap: wrap;width: 24%;margin: 2px;background-color: rgb(77, 86, 177)
}/* 第十二模块 */
.six_div12 {width: 100%;height: 100px;background-color: #ddd;
}.six_div12_mode {text-align: center;line-height: 100px;margin: auto;width: 80%;height: 100px;background-color: rgb(54, 157, 205);
}/* 第十三模块 */
.aone_div {width: 100%;height: 80px;background-color: rgb(189, 224, 236);
}
第15到20模快
<!-- !第十四模块 copy0个 --><div class="bone_div"><!-- 弹性布局定义父类元素 --><div class="bone_div_one"><span class="bone_dive_one_b">234</span><span class="bone_dive_one_b">234</span><span class="bone_dive_one_b">234</span><span class="bone_dive_one_b">234</span><span class="bone_dive_one_b">234</span></div></div><!-- !第十五模块 copy1个 --><!-- copy --><div class="bone_div1"><!-- 弹性布局定义父类元素 --><div class="bone_div_one1"><span class="bone_dive_one_b1">234</span><span class="bone_dive_one_b1">234</span><span class="bone_dive_one_b1">234</span><span class="bone_dive_one_b1">234</span><span class="bone_dive_one_b1">234</span></div></div><!-- !第十六模块 copy1个 --><div class="bone_div12"><!-- 弹性布局定义父类元素 --><div class="bone_div_one12"><span class="bone_dive_one_b12">234</span><span class="bone_dive_one_b12">234</span><span class="bone_dive_one_b12">234</span><span class="bone_dive_one_b12">234</span><span class="bone_dive_one_b12">234</span></div></div><!-- !第十七模块 copy1个 --><div class="bone_div123"><!-- 弹性布局定义父类元素 --><div class="bone_div_one123"><span class="bone_dive_one_b123">234</span><span class="bone_dive_one_b123">234</span><span class="bone_dive_one_b123">234</span><span class="bone_dive_one_b123">234</span><span class="bone_dive_one_b123">234</span></div><!-- !第十八模块 copy1个 --><div class="opl"><!-- 弹性布局定义父类元素 --><div class="bone_adiv_one1"><span class="bone_adive_one_b1">234</span><span class="bone_adive_one_b1">234</span><span class="bone_adive_one_b1">234</span><span class="bone_adive_one_b1">234</span><span class="bone_adive_one_b1">234</span></div></div><!-- !第十九模块 copy1个 --><div class="opla"><!-- 弹性布局定义父类元素 --><div class="bone_adiv_one1a"><span class="bone_adive_one_b1a">234</span><span class="bone_adive_one_b1a">234</span><span class="bone_adive_one_b1a">234</span><span class="bone_adive_one_b1a">234</span><span class="bone_adive_one_b1a">234</span></div></div><!-- 二十 --><div class="oplab"><!-- 弹性布局定义父类元素 --><div class="bone_adiv_one1ab"><span class="bone_adive_one_b1ab">234</span><span class="bone_adive_one_b1ab">234</span><span class="bone_adive_one_b1ab">234</span><span class="bone_adive_one_b1ab">234</span><span class="bone_adive_one_b1ab">234</span></div></div>/* copy第十五到十七 */
/* ! 第十五模块 */.bone_div1 {width: 100%;background-color: rgb(209, 216, 243);height: 280px;
}.bone_div_one1 {margin: auto;width: 80%;height: 280px;border: 2px solid lightgoldenrodyellow;display: flex;
}.bone_dive_one_b1 {margin: 2px;background-color: rgba(132, 226, 113, 0.404);flex: 1;
}/* ! 第十六模块 */.bone_div12 {width: 100%;background-color: rgb(209, 216, 243);height: 280px;
}.bone_div_one12 {margin: auto;width: 80%;height: 280px;border: 2px solid lightgoldenrodyellow;display: flex;
}.bone_dive_one_b12 {margin: 2px;background-color: rgba(171, 249, 156, 0.404);flex: 1;
}/* ! 第十七模块 */.bone_div123 {width: 100%;background-color: rgb(93, 116, 212);height: 280px;
}.bone_div_one123 {margin: auto;width: 80%;height: 280px;border: 2px solid rgb(238, 238, 180);display: flex;
}.bone_dive_one_b123 {margin: 2px;background-color: rgba(176, 218, 50, 0.404);flex: 1;
}/* ! 第十八模块 */.opl {width: 100%;/* background-color: rgb(13, 59, 245); */border: 1px solid lightblue;height: 280px;
}.bone_adiv_one1 {margin: auto;width: 80%;height: 280px;border: 2px solid rgb(244, 244, 4);display: flex;
}.bone_adive_one_b1 {margin: 2px;background-color: rgba(67, 249, 27, 0.404);flex: 1;
}/* ! 第十九模块 */.opla {width: 100%;/* background-color: rgb(13, 59, 245); */border: 1px solid lightblue;height: 280px;
}.bone_adiv_one1a {margin: auto;width: 80%;height: 280px;border: 2px solid rgb(244, 244, 4);display: flex;
}.bone_adive_one_b1a {margin: 2px;background-color: lightcoral;flex: 1;
}/* 二十 */.oplab {width: 100%;/* background-color: rgb(13, 59, 245); */border: 1px solid lightblue;height: 280px;
}.bone_adiv_one1ab {margin: auto;width: 80%;height: 280px;border: 2px solid rgb(244, 244, 4);display: flex;
}.bone_adive_one_b1ab {margin: 2px;background-color: rgb(52, 141, 8);flex: 1;
}
Footer模块:
<!-- footer -->
<div class="footer_div"><div class="footer_div_mode"><div class="footer_img">footer</div><div class="footer_img">footer</div><div class="footer_img">footer</div><div class="footer_img">footer</div></div>
</div><!-- footer2 -->
<div class="footer_divb"><div class="footer_div_modeb"><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div></div>
</div><!-- footer3 --><div class="footer_divbc"><div class="footer_div_modebc"><span class="ss_footer">1</span><span class="ss_footer">2</span><span class="ss_footer">3</span><span class="ss_footer">4</span><span class="ss_footer">5</span><span class="ss_footer">6</span><span class="ss_footer">7</span><span class="ss_footer">8</span><span class="ss_footer">9</span><span class="ss_footer">10</span><span class="ss_footer">11</span><span class="ss_footer">12</span><span class="ss_footer">13</span><span class="ss_footer">14</span><span class="ss_footer">15</span></div>
</div><!-- footer4 -->
<div class="footer_opi"><div class="footer_opimode"></div>
</div><!-- last页面布局 -->
<div class="last_opu"><div class="last-mode"><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span></div>
</div>/* footer */.footer_div {height: 120px;width: 100%;border: 1px solid lightgreen;
}.footer_div_mode {height: 120px;width: 80%;margin: auto;display: flex;justify-content: space-around;
}.footer_img {width: 19%;height: 120px;background-color: rgb(214, 156, 168);
}/* footer2 */.footer_divb {height: 270px;width: 100%;border: 1px solid lightgreen;
}.footer_div_modeb {height: 270px;width: 80%;margin: auto;display: flex;justify-content: space-around;
}.footer_imgb {width: 19%;height: 270px;background-color: rgb(151, 219, 50);
}.footer_divbc {height: 80px;width: 100%;border: 1px solid rgb(188, 231, 188);
}.footer_div_modebc {height: 80px;width: 80%;border: 3px solid red;margin: auto;text-align: center;line-height: 80px;display: flex;}.ss_footer {flex: 1;background-color: rgb(218, 228, 237);
}.footer_opi{height: 300px;width: 100%;border: 1px solid plum;
}.footer_opimode{border: 2px solid lightseagreen;width: 80%;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;
}完毕:这只是草稿下面是Html代码内容只是简单的布局还没有内容哦!
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--! D:\com.web\京东网页\image 图片文件路径--><!--!D:\com.web\京东网页\css css文件路径 --><!--! D:\com.web\京东网页\js js文件路径-->
</head>
<!-- * 导入ccc文件 导入js文件 -->
<!-- 图片样式 -->
<link rel="stylesheet" href="../css/one.css">
<script src="./js/index.js"></script><body><!-- 第一部分图片导行栏 --><div class="head_div"><div class="head_div_img"></div></div><!-- 第二部分导行栏 --><div id="shortcut"><!-- 在这个div上写导行信息内容 --><div class="w"><span class="f1">定位锁定在江西省</span><span class="f1"></span><span class="fr"><span class="father_fr"><span class="father_fr_text">你好,请登录</span><span class="father_fr_text color" id="father_fr_text_one">免费注册 </span><span class="father_fr_text">我的订单 |</span><span class="father_fr_text">我的京东 |</span><span class="father_fr_text">京东会员 |</span><span class="father_fr_text" id="#father_fr_text_two">企业采购 |</span><span class="father_fr_text">商家服务 |</span><span class="father_fr_text">网站导行 |</span><span class="father_fr_text">手机京东 |</span><span class="father_fr_text">网站无障碍 </span></span></span></div></div><!-- 第三部分头部导行栏 --><div id="header"><div class="w"><!--导行栏第一步分搜索框 --><!-- 京东图标 --><div id="logo" class="logo"></div><div class="seacher"><input type="text" placeholder="地球仪"><div class="seacher_img_text">我是购物车</div><div class="seacher_img"><img src="../image/search.jpg" alt="" id="seacher_img1"></div><!-- 弹性布局的方式 --><div class="seacher_bottom_father"><span class="sercher_bottom_text">抢iPhone14 </span><span class="sercher_bottom_text"> 三星手机 </span><span class="sercher_bottom_text">京东京造 </span><span class="sercher_bottom_text">小米新品 </span><span class="sercher_bottom_text">腕表焕新 </span><span class="sercher_bottom_text"> 智能数码 </span><span class="sercher_bottom_text">茅台特惠 </span></div><!-- 底部 --><div class="header_boottomes_father"><a class="header_boottomes_father_a" href="京东超市">京东超市</a><a class="header_boottomes_father_a" href="京东生鲜">京东生鲜</a><a class="header_boottomes_father_a" href="秒杀">秒杀</a><a class="header_boottomes_father_a" href="优惠券">优惠券</a><a class="header_boottomes_father_a" href="京东家电">京东家电</a><a class="header_boottomes_father_a" href="PLUS会员">PLUS会员</a><a class="header_boottomes_father_a" href="品牌闪购">品牌闪购</a><a class="header_boottomes_father_a" href="进口好物">进口好物</a><a class="header_boottomes_father_a" href="拍卖">拍卖</a><a class="header_boottomes_father_a" href="京东五金城">京东五金城</a></div></div><!-- 最右部分 --><div class="header_right"><img src="../image/logo_1726.png" alt=""></div></div></div><!-- 第三部分的内容 --><div class="three_div1"><div class="three_div1_mode1"><!-- 模块化思想本模块分为四部分利用百分比去布局 定义id选择器 --><div class="three_div1">第一部分</div><div class="three_div2">第二部分</div><div class="three_divmode">第三部分<!-- 在这个部分中要定义弹性布局 --><div class="threediv1_divmode_w">第三部分中的模块1</div><div class="threediv1_divmode_w">第三部分中的模块2</div><div class="threediv1_divmode_w">第三部分中的模块3</div></div><div class="three_div1mode2"><!-- 在这个部分中要定义弹性布局 --><div class="mode2_text1">第四部分的内容第1</div><div class="mode2_text2">第四部分的内容第2</div><div class="mode2_text3">第四部分的内容第3</div></div></div></div><!-- !第四部分的内容 --><div class="four_div2"><div class="four_div2_mode1"><div class="four_div2mode1_div">我是第几个盒子呀1</div><div class="four_div2mode1_div">我是第几个盒子呀12</div><div class="four_div2mode1_div">我是第几个盒子呀13</div><div class="four_div2mode1_div">我是第几个盒子呀14</div><div class="four_div2mode1_div">我是第几个盒子呀15</div><div class="four_div2mode1_div">我是第几个盒子呀16</div><div class="four_div2_right">右边</div></div></div><!-- !第五模块的内容 --><div class="five_div3"><div class="five_div3_mode"><div class="five_div3_mode2">1</div><div class="five_div3_mode2">2</div></div></div><!-- !第六模块的内容 --><div class="five_div4"><div class="five_div4_mode"><div class="five_div4_mode0">1</div><div class="five_div4_mode1">8</div></div></div><!-- !第七模块 --><div class="six_div5"><div class="six_div5_mode"><h1>频道广播</h1></div></div><!-- 第八模块 --><div class="eight_div"><div class="eight_div_mode"><div class="eight_a">我是第八部分的内容</div><div class="eight_a">我是第八部分的内容</div><div class="eight_a">我是第八部分的内容</div><div class="eight_a">我是第八部分的内容</div></div></div><!-- 第九模块整体布局 --><div class="nine_div"><div class="nine_divmode"><div class="nine_w">11</div><div class="nine_w">11</div><div class="nine_w">11</div><div class="nine_w">11</div></div></div><!-- 第10模块整体布局 --><div class="nine_div1"><div class="nine_divmode1"><div class="nine_w1">11</div><div class="nine_w1">11</div><div class="nine_w1">11</div><div class="nine_w1">11</div></div></div><!-- 第11模块整体布局 --><div class="nine_div2"><div class="nine_divmode2"><div class="nine_w2">11</div><div class="nine_w2">11</div><div class="nine_w2">11</div><div class="nine_w2">11</div></div></div><!-- !第十二模块 --><div class="six_div12"><div class="six_div12_mode"><h1>为你推荐</h1></div></div><!-- !第十三模块 --><div class="aone_div"><div class="aone_div_mode"><span class="apn">123</span><span class="apn">123</span><span class="apn">123</span><span class="apn">123</span><span class="apn">123</span></div></div><!-- !第十四模块 copy0个 --><div class="bone_div"><!-- 弹性布局定义父类元素 --><div class="bone_div_one"><span class="bone_dive_one_b">234</span><span class="bone_dive_one_b">234</span><span class="bone_dive_one_b">234</span><span class="bone_dive_one_b">234</span><span class="bone_dive_one_b">234</span></div></div><!-- !第十五模块 copy1个 --><!-- copy --><div class="bone_div1"><!-- 弹性布局定义父类元素 --><div class="bone_div_one1"><span class="bone_dive_one_b1">234</span><span class="bone_dive_one_b1">234</span><span class="bone_dive_one_b1">234</span><span class="bone_dive_one_b1">234</span><span class="bone_dive_one_b1">234</span></div></div><!-- !第十六模块 copy1个 --><div class="bone_div12"><!-- 弹性布局定义父类元素 --><div class="bone_div_one12"><span class="bone_dive_one_b12">234</span><span class="bone_dive_one_b12">234</span><span class="bone_dive_one_b12">234</span><span class="bone_dive_one_b12">234</span><span class="bone_dive_one_b12">234</span></div></div><!-- !第十七模块 copy1个 --><div class="bone_div123"><!-- 弹性布局定义父类元素 --><div class="bone_div_one123"><span class="bone_dive_one_b123">234</span><span class="bone_dive_one_b123">234</span><span class="bone_dive_one_b123">234</span><span class="bone_dive_one_b123">234</span><span class="bone_dive_one_b123">234</span></div><!-- !第十八模块 copy1个 --><div class="opl"><!-- 弹性布局定义父类元素 --><div class="bone_adiv_one1"><span class="bone_adive_one_b1">234</span><span class="bone_adive_one_b1">234</span><span class="bone_adive_one_b1">234</span><span class="bone_adive_one_b1">234</span><span class="bone_adive_one_b1">234</span></div></div><!-- !第十九模块 copy1个 --><div class="opla"><!-- 弹性布局定义父类元素 --><div class="bone_adiv_one1a"><span class="bone_adive_one_b1a">234</span><span class="bone_adive_one_b1a">234</span><span class="bone_adive_one_b1a">234</span><span class="bone_adive_one_b1a">234</span><span class="bone_adive_one_b1a">234</span></div></div><!-- 二十 --><div class="oplab"><!-- 弹性布局定义父类元素 --><div class="bone_adiv_one1ab"><span class="bone_adive_one_b1ab">234</span><span class="bone_adive_one_b1ab">234</span><span class="bone_adive_one_b1ab">234</span><span class="bone_adive_one_b1ab">234</span><span class="bone_adive_one_b1ab">234</span></div></div><!-- footer -->
<div class="footer_div"><div class="footer_div_mode"><div class="footer_img">footer</div><div class="footer_img">footer</div><div class="footer_img">footer</div><div class="footer_img">footer</div></div>
</div><!-- footer2 -->
<div class="footer_divb"><div class="footer_div_modeb"><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div><div class="footer_imgb">footer</div></div>
</div><!-- footer3 --><div class="footer_divbc"><div class="footer_div_modebc"><span class="ss_footer">1</span><span class="ss_footer">2</span><span class="ss_footer">3</span><span class="ss_footer">4</span><span class="ss_footer">5</span><span class="ss_footer">6</span><span class="ss_footer">7</span><span class="ss_footer">8</span><span class="ss_footer">9</span><span class="ss_footer">10</span><span class="ss_footer">11</span><span class="ss_footer">12</span><span class="ss_footer">13</span><span class="ss_footer">14</span><span class="ss_footer">15</span></div>
</div><!-- footer4 -->
<div class="footer_opi"><div class="footer_opimode"></div>
</div><!-- last页面布局 -->
<div class="last_opu"><div class="last-mode"><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span><span class="last_span">1234</span></div>
</div></body></html>弹性布局案例实操(京东网页制作的草稿)相关推荐
- 航空专场 | 无人机设计仿真流程讲解与案例实操
一.CFD在无人机上的应用 1.静.动气动系数计算以上介绍的无人机的流动状态一般为中低雷诺数,不可压缩流动.这些计算一般用S-A模型或者KW-SST模型进行计算,能够获得不错的工程精度.静.动气动力系 ...
- 大数据之Spark案例实操完整使用(第六章)
大数据之Spark案例实操完整使用 一.案例一 1.准备数据 2.需求 1:Top10 热门品类 3.需求说明 方案一. 实现方案二 实现方案三 二 .需求实现 1.需求 2:Top10 热门品类中每 ...
- 新硬盘挂载-fdisk+mount案例实操
新硬盘挂载-fdisk+mount案例实操 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 现在很多服务器都支持热插拔了,当有新的硬盘插入到服务器上我们需要将其分区,格式化,然后挂载 ...
- 数据模型同学看过来|代码案例实操来袭
去年年底,央行开出反洗钱罚单,多家银行合计被罚1040万元. 当时,中国人民银行石家庄中心支行披露的反洗钱行政处罚信息公示表显示,因涉及未按照规定履行客户身份识别义务等,中行.邮储.浦发三家银行以及阳 ...
- 【报告分享】见实私域流量白皮书：私域流量案例实操手册.pdf
大家好,我是文文(微信:sscbg2020),今天给大家分享见实科技于2020年10月份发布的报告<见实私域流量白皮书:私域流量案例实操手册.pdf>. 本报告共73页,包含如下鞋服.餐饮 ...
- 自定义OutputFormat案例实操
自定义OutputFormat案例实操 文章目录 1)需求 2)需求分析 3)编程实现 1.创建Mapper类 2.创建Reducer类 3.创建OutputFormat类 4.创建RecordWri ...
- MapReduce入门（一）—— MapReduce概述 + WordCount案例实操
MapReduce入门(一)-- MapReduce概述 文章目录 MapReduce入门(一)-- MapReduce概述 1.1 MapReduce 定义 1.2 MapReduce 优缺点 1. ...
- Azkaban配置Work Flow案例实操
Work Flow案例实操 目录 Work Flow案例实操 1. Yarm语法简介 2. HelloWorld案例 3. JavaProcess案例 4. 作业依赖案例 5. 自动失败重试案例 6. ...
- 大数据培训课程数据清洗案例实操-简单解析版
数据清洗(ETL) 在运行核心业务MapReduce程序之前,往往要先对数据进行清洗,清理掉不符合用户要求的数据.清理的过程往往只需要运行Mapper程序,不需要运行Reduce程序.大数据培训 数据 ...
最新文章
- datax 模板_dataX3.0安装使用手册.docx
- 安卓实现序列化之Parcelable接口
- django界面上弹出bootstrap modal对话框，对话框中包含iframe并请求一个新的页面
- python怎么导出程序_[272]如何把Python脚本导出为exe程序
- 首发！来自你的Java同行的调查报告
- ExcelToHtmlTable转换算法:将Excel转换成Html表格并展示(项目源码+详细注释+项目截图)...
- Win10设置WSL大小写敏感
- ref: 九大数据仓库方案特点比较
- paip.提升安全性----.net C#源码防止反编译以及源码加密
- 电子基础知识：常用电子元器件和基本工具
- 人工智能杂记 人工智能简史
- react routers路由地址 F5刷新白屏
- 【Javascript】length属性
- 图像形态学处理（击中击不中变换 ） 终于搞懂了
- 两台计算机互联方案,如何让两台电脑直接用网线互联.docx
- python写爬虫要记的单词_Python爬虫入门案例：获取百词斩已学单词列表
- 基于web的教务管理系统-课程设计
- 抓rtmp推流地址_如何获取第三方推流地址？
- python 编程该看那些书籍_python编程入门书籍-零基础学习Python编程，这8本书必看！...
- 微信体现计算机网络功能,教你微信提现如何免手续费
热门文章
- Excel快速填充空白单元格内容为上一行的内容
- 四年级计算机下册word教学设计,小学教学四年级教案下册计算机教案-20210723143637.docx-原创力文档...
- 用python预测小孩的身高_Python+sklearn使用线性回归算法预测儿童身高
- Visio中输入特殊符号和带下标的符号
- java窗口如何定时关闭_[Java教程]【温故而知新】Javascript窗口效果 （全屏显示窗口、定时关闭窗口）_星空网...
- springboot上传文件临时文件夹找不到不能成功上传问题
- 百度地图(HTML5新特性)-全面详解（学习总结---从入门到深化）
- MySQL教程——4 高级篇(性能调优、锁)
- 新书推荐：iOS Swift 游戏开发指南
- 【原创】从BZOJ2683 简单题中 整 CDQ分治解决三维偏序