用div+css网站布局之实录

发布时间：2024-10-23

用div+css网站布局之实录

用div+css网站布局之七步实录东莞分公司创意设计部div+css培训课程

用div+css网站布局之实录

第一步：规划网站网站顶部-top 网站菜单- menu 动画区-Banner

左侧-left

右侧-right

网站底部-end

用div+css网站布局之实录

第二步：将网站分为六个div,网页基本布局的基础将“第一步”提到的六个部分都放入盒子中，在html文件中写入：<div class=“content”>整个页面

<div class=“header”>网站logo区域</div><div class=“menu”>菜单</div> <div class=“banner”>动画区</div>

<div class=“left”>网站左侧产品分类</div><div class=“right”>产品展示内容区</div> <div class=“end”>尾部</div>

</div>

用div+css网站布局之实录

第三步：网站头部图标与logo部分的设计

<div class="header"> <div class="header_logo"></div> <div class="header_right">首页 | ENGLISH | 电子地图</div>

</div>

.header {height: 107px;width: 100%;background-image: url(../images/about_03.jpg);} .header_logo {background-image: url(../images/about_02.jpg);float: left;height: 107px;width: 440px;} .header_right {height: 41px;width: 310px;background: url(../images/about_05.jpg) norepeat center top;line-height: 41px;text-align: center;float: right;}

用div+css网站布局之实录

第三步：导航条的制作

</div>

用div+css网站布局之实录

第四步：导航条的制作

.menu { background-image: url(../images/about_09.jpg);width: 898px;height: 31px;line-height: 31px;paddingleft: 50px; } .menu ul { LIST-STYLE-TYPE: none;margin:0px; } .menu li { float: left; } .menu a { width: 100px;text-decoration: none;display: block;color: #FFFFFF;border-right: 1px dashed #9DDAEC; } .menu a:hover { background-color: #FF3300; } .menu a.an { color: #FFFFFF;border: none; }

用div+css网站布局之实录

第五步：网站中间内容左侧<div class="left"> <h2></h2> <div class="left_menu"> <ul> <li><a href="#">五金冲压零件</a></li> <li><a href=“#”>CNC车加工零件</a></li> <li><a href="#">CNC铣加工零件</a></li> <li><a href="#">精密夹具&治具</a></li> <li><a href="#">熔模铸造零件</a></li> <li><a href="#">硬质合金模具零</a></li> </ul> </div> </div> .left { float: left; width: 212px; text-align: center; } .left h2 { clear: both; padding: 0px; margin: 0; background-image: url(../images/about_11.jpg); height: 58px; width: 212px; } .left_menu css 样式省略，同导航菜单相似

用div+css网站布局之实录

第六步：网站中间内容右侧

.right { float: right; width: 717px; padding: 5px; background-image: url(../images/bg2.jpg) -215px repeat-y; } .right h3 { clear: both; padding: 5px 0 5px 5px; margin: 12px 0; font-size: 14px; text-indent: 3px; background-image: url(../images/abou

t_14.jpg); }

用div+css网站布局之实录

第七步：网站底部的制作

<div class="end"> <h2>东莞市重友精密机械有限公司页面版权所有粤ICP备案号：05085355</h2> <h3>地址：广东省东莞市企石镇上洞管理区第二工业区 Tel:0769-86781788 </h3> </div> .end { clear: both; line-height: 20px; padding: 8px 0 8px 0px; text-align: center; } .end h2 { clear: both; padding: 5px 0 5px 5px; margin: 5px 0; font-size: 12px; background-color: #006666; font-weight: normal; text-align: center; color: #CCCCCC; }

.end h3 { clear: both; padding: 2px 0 2px 0px; margin: 5px 0; font-size: 12px; font-weight: normal; text-align: center; } .end a { color: #C3593C; }

用div+css网站布局之实录

CSS样式命名规则(仅供参考)

1.样式命名

外套：主导航：子导航：页页页商标脚：眉：脚：标：题：整个页面：

wrapmainnav subnav footer content header footer label title

标语：菜单容量：子菜单：注释：面包屑：容器：内容：

bannermenu container submenu note container content

菜单内容1: menu1 content

边导航图标：sidebarIcon

breadcrumb(即页面所处位置导航提示)

主导航：顶导航：边导航：左导航：