随便给你一个页面 你该如何去给他布局呢 各位思考一下 ？
我给出的答案:
化繁为简 ，化简为繁 在学习任何知识体系中都是如此 先学习这类知识的知识点 然后用一个案例或者是多个案例实操起来
在写页面时大多数人是一个模块一个模块的去写 这样也可以 但是 今天的案例又是反其道而行之 弹性布局 来完成整个页面的大纲布置 在写项目中 都有项目的说明书
在写页面上也必定有自己的草稿 如果连项目的大致都没有布局都完成不了 只能说明你对HTML 这个内容不是很精通 对页面的布局还没有去了解他的核心内容 div思想
如何养成这种思想 我给出的答案 是 练 不放过一个细节:
今天的页面是一个个人私用的次品 里面加上了 CSS3的属性 后期有待完善
弹性布局案例实操(京东网页对草稿页面进行改进)_星辰镜的博客-CSDN博客
在上面两课的基础下完成的页面效果
弹性布局案例实操(京东网页对草稿页面进行改进)_星辰镜的博客-CSDN博客
代码在上面的的博客中自己可以去找 这里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>导行栏的案例
</title>
-
<!-- https://www.freesion.com/article/5352147817/ -->
-
<style>
-
-
.one {
-
float: left;
-
background-color:
rgb(
10,
10,
10);
-
color: red;
-
height:
100px;
-
width:
200px;
-
font-size:
8px;
-
text-align: center;
-
line-height:
100px;
-
position: absolute;
-
-
}
-
-
.two {
-
background-color:
rgb(
255,
255,
255);
-
height:
657px;
-
width:
90%;
-
opacity:
0;
-
/* border: 1px solid red; */
-
}
-
-
.one+
.two
:hover {
-
opacity:
1;
-
}
-
-
.three_two {
-
height:
657px;
-
width:
100%;
-
margin-left:
150px;
-
display: block;
-
/* border: 2px solid lightseagreen; */
-
}
-
-
span {
-
display: inline-block;
-
-
}
-
-
.father {
-
float: left;
-
margin-left: -
1px;
-
width:
78%;
-
height:
606px;
-
/* border: 1px solid #05690a; */
-
background:
linear-gradient(to right,
#a1c4fd
0%,
#c2e9fb
100%);
-
}
-
.father
:hover{
-
background-image:
linear-gradient(to right,
#00c9ff
0%,
#92fe9d
100%);
-
}
-
-
p {
-
width:
100%;
-
height:
46px;
-
/* border: 1px solid rgb(255, 0, 85); */
-
/* background-color: #84d088; */
-
-
font-size:
12px;
-
opacity:
0.7;
-
}
-
-
.span_tex_span {
-
font-size:
16px;
-
font-weight:
900;
-
background-color:
rgb(
255,
0,
0);
-
color:
rgb(
255,
255,
255);
-
}
-
-
.pos_div {
-
float: left;
-
width:
18%;
-
height:
92%;
-
/* background-color: #22a2c3; */
-
background-image:
linear-gradient(to right,
#a8edea
0%,
#fed6e3
100%);
-
}
-
-
.mode2_text3 {
-
-
background-image:
linear-gradient(to right,
#b7ebe8
0%,
#f7b0c6
100%);
-
/* 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; */
-
height:
20%;
-
}
-
.one
span
:hover{
-
background-image:
linear-gradient(-
60deg,
#abe9dd
0%,
#f4d03f
100%);
-
}
-
td
:hover{
-
background-image:
linear-gradient(to right,
#e4afcb
0%,
#b8cbb8
0%,
#b8cbb8
0%,
#e2c58b
30%,
#c2ce9c
64%,
#7edbdc
100%);
-
}
-
</style>
-
</head>
-
<!-- https://uigradients.com/#Lithium -->
-
<body>
-
<div class="one">
-
显示元素信息
-
</div>
-
<div class="two">
-
<span class="three_two">
-
<div style="width:100% ;margin-left: 20px;height: 40px;line-height: 40px;">
-
<span
-
style=
"height: 40px; white;font-weight: 900;width: 200px;text-align: center;border-radius: 12px; background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);">家电馆
>
</span>
-
<span
-
style=
"height: 40px;background-image: linear-gradient(to right, #ebc0fd 0%, #d9ded8 100%);color: white;font-weight: 900;width: 200px;text-align: center;border-radius: 12px;">开店设备一站购物
>
</span>
-
</div>
-
<div class="father">
-
<p>
<span
-
class=
"span_tex_span">电视
>
</span>
全面屏电视
教育电视
OLED电视
-
智慧屏4K超清电视
55英寸
65英寸
电视配件
</p>
-
<p>
<span
-
class=
"span_tex_span">空调
>
</span>
新风空调
以旧换新空调
挂机空调
柜机空调
套装新-级能效挂机1.5匹
-
柜机3匹 变频空调 中央空调 移动空调
</p>
-
<p>
<span
-
class=
"span_tex_span">洗衣机
>
</span>
业滚筒洗衣机
洗烘一体
机波轮洗衣机
洗烘套装
迷你洗衣机
-
洗衣机配件
烘干机
</p>
-
<p>
<span
-
class=
"span_tex_span">冰箱
>
</span>
多门对开门
三门双门
冰洗套装
冷柜/冰吧酒柜冰
箱配件
-
</p>
-
<p>
<span
-
class=
"span_tex_span">厨卫大电
>
</span>
厨卫大电
油烟机
-
灶具烟灶套装集
成灶集成水槽消毒柜
洗碗机电热水器燃气
热水器壁挂
炉空
-
气能热水器
</p>
-
<p>
<span
-
class=
"span_tex_span">厨卫小店
>
</span>
破壁机 咖啡机榨汁机电炖锅果蔬净化清洗机 三
-
明治机/早餐机电烤箱厨师机/和面机 料理机电饼铛
</p>
-
<p>
<span
-
class=
"span_tex_span">环境用电
>
</span>
热水瓶面包机电火锅空气炸锅养生壶电磁炉 电饭煲电压力锅
-
微波炉面条机电陶炉电烧烤炉煮蛋器电热饭盒豆浆机
-
</p>
-
<p>
<span
-
class=
"span_tex_span">个人健康
>
</span>
取暖器
空气净化器加湿器
-
净水器饮水机
茶吧机除湿机
电话机电风扇生
活电器配件 冷风扇
</p>
-
<p>
<span
-
class=
"span_tex_span">清洁能源
>
</span>
剃须刀 电动牙刷 冲牙器 电吹风卷/直发器
-
理发路美容仪剃/脱毛器洁面仪按摩器按摩椅足浴盆
</p>
-
<p>
<span
-
class=
"span_tex_span">视频影视
>
</span>
吸尘器
-
扫地机器人
擦窗机器人
蒸汽/电动拖把
除螨仪 洗地机视听影育>
家庭影院 KTV音响
-
迷你音响 DVD功放回音壁麦克风
</p>
-
-
</div>
-
-
<div class="pos_div">
-
<div class="mode2_text3">
-
<table>
-
<tr>
-
<td>
-
<img src="../image/table/2.png" alt="">
-
<p>礼品卡
</p>
-
</td>
-
<td>
-
<img src="../image/table/3.png" alt="">
-
<p>企业购
</p>
-
</td>
-
<td>
-
<img src="../image/table/4.png" alt="">
-
<p>话费
</p>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
<img src="../image/table/4.png" alt="">
-
<p>礼品卡
</p>
-
</td>
-
<td>
-
<img src="../image/table/5.png" alt="">
-
<p>企业购
</p>
-
</td>
-
<td>
-
<img src="../image/table/10.png" alt="">
-
<p>话费
</p>
-
</td>
-
</tr>
-
-
<tr>
-
<td>
-
<img src="../image/table/2.png" alt="">
-
<p>礼品卡
</p>
-
</td>
-
<td>
-
<img src="../image/table/3.png" alt="">
-
<p>企业购
</p>
-
</td>
-
<td>
-
<img src="../image/table/4.png" alt="">
-
<p>话费
</p>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
<img src="../image/table/4.png" alt="">
-
<p>礼品卡
</p>
-
</td>
-
<td>
-
<img src="../image/table/5.png" alt="">
-
<p>企业购
</p>
-
</td>
-
<td>
-
<img src="../image/table/10.png" alt="">
-
<p>话费
</p>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
<img src="../image/table/4.png" alt="">
-
<p>礼品卡
</p>
-
</td>
-
<td>
-
<img src="../image/table/5.png" alt="">
-
<p>企业购
</p>
-
</td>
-
<td>
-
<img src="../image/table/10.png" alt="">
-
<p>话费
</p>
-
</td>
-
</tr>
-
-
-
</table>
-
</div>
-
</div>
-
-
-
</span>
-
</div>
-
-
-
-
-
-
-
-
</body>
-
-
</html>
转载：https://blog.csdn.net/qq_56248592/article/details/127595644
查看评论