HTMLCSS小案例之HTML结构布局
大有学问
今天实际操作上手有一点小变更,就是将top中的navbottom模块重划分到main部分中。
这样刚好是一个完整的main,不用重新切割测量大小。
今天写一个大概的行模块布局,详细部分下次再写。CSS公共属性清除浏览器默认设置{margin:0;padding:0;}背景颜色body{backgroundcolor:f3f6f6;}。bGW{backgroundcolor:white;}添加浮动。fL{float:left;}。fR{float:right;}清除浮动。clearF{overflow:hidden;}版心宽度1200px,水平居中。bX{width:1200px;margin:auto;}top部分
。top{height:101px;!临时背景颜色,方便看清楚盒子位置,填充实际内容时会删除掉该属性backgroundcolor:antiquewhite;}
top部分nav部分。nav{height:420px;!这是吸取的真实背景颜色backgroundcolor:1c056c;}
navmain部分。mB42{marginbottom:42px;}。menu{height:60px;盒子阴影boxshadow:1px2pxrgba(118,118,118,0。2);margintop:8px;marginbottom:37px;}初阶段用于显示模块位置,实际布局需删除该选择器。maintop,。maincenterp,。mainbottomp{backgroundcolor:white;}。maintop{height:603px;}。maincenter{height:923px;}。maincentertop,。maincenterbottom{height:440px;}。mainbottomtop,。mainbottombottom{height:318px;}!main可划分为四个大的行模块!menu行模块mainmenu!maintop行模块精品推荐!maincenter行模块编程入门数据分析师!mainbottom行模块机器学习工程师前端开发工程师
menu行模块和maintop行模块
maincenter行模块
mainbottom行模块footer部分。footer{height:417px;}footer
footer部分
下次更新完整代码。拜拜