做导购网站赚钱吗,WordPress相册插件pro,互助金融网站制作,长沙有哪些做网站的项目展示 三栏布局是一种常用的网页布局结构。 除了头部区域、底部区域外#xff0c;中间的区域#xff08;主体区域#xff09;划分成了三个栏目#xff0c;分别是左侧边栏、内容区域和右侧边栏#xff0c;这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时#x…项目展示 三栏布局是一种常用的网页布局结构。 除了头部区域、底部区域外中间的区域主体区域划分成了三个栏目分别是左侧边栏、内容区域和右侧边栏这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时页面中左侧边栏和右侧边栏的宽度固定不变而内容区域的宽度会随着浏览器窗口宽度大小的变化而变化。 项目目录结构 在进行项目开发之前首先需要完成项目目录结构的搭建。 index.html文件用于实现项目的页面结构CSS目录下的style.css文件用来实现项目的页面结构。 index.html具体代码 !DOCTYPE html html head meta charsetutf-8 / title三栏布局页面/title link relstylesheet hrefcss/style.css /headbody !--头部区域-- headerh4头部区域/h4 /header !-- 主体区域-- div classmain !--左侧边栏--aside classleftp左侧边栏/p/aside!--右侧边栏--aside classrightp右侧边栏/p/aside!--中间内容--section classmiddlep内容区域/p/section /div !--底部区域-- footerp底部区域/p /footer /body /htmlstyle.css具体代码 charset utf-8; /* CSS Document */ /*初始化默认样式*/ html,body,h4,p{padding:0;margin:0;text-align:center;font-size:16px;} /*设置头部和底部区域的高度*/ header,footer{height:25px;} /*设置主体区域的样式*/ .main{boder-top:1px solid #ccc;border-bottom:1px solid #ccc;/*内边距上下边距为0左右边距为100px*/padding:0 100px;} .left{background:#eee;width:100px;/*定位方式:绝对定位*/position:absolute;/*左侧边距为0*/left:0;} .middle{background:#ddd;} .right{background:#eee;width:100px;/*定位方式:绝对定位*/position:absolute;/*右侧边距为0*/right:0;} /*设置左侧边栏、右侧边栏和内容区域高度为199px*/ .left, .right, .middle{height:199px;}建议 在编码时按照项目分析中的需求先编写HTML5文件中的整体结构主要包括 header 、 footer 、 div 、 aside 和 section 标签然后使用CSS定位实现三栏布局结构。编写完成后保存文件用浏览器打开index.html页面即可出现三栏布局页面效果。