高端网站制作哪家好,网站开发公司人员配备,做民宿需要和多家网站合作吗,富阳网站建设价格网页布局有很多种方式#xff0c;一般分为以下几个部分#xff1a;头部区域、菜单导航区域、内容区域、底部区域#xff1a; 1#xff09;、头部区域位于整个网页的顶部#xff0c;一般用于设置网页的标题或者网页的logo。
style
body { margin: 0;
} /* 头部样… 网页布局有很多种方式一般分为以下几个部分头部区域、菜单导航区域、内容区域、底部区域 1、头部区域位于整个网页的顶部一般用于设置网页的标题或者网页的logo。
style
body { margin: 0;
} /* 头部样式 */
.header { background-color: #f1f1f1; padding: 20px; text-align: center;
}
/style
/head
body div classheader h1头部区域/h1
/div /body
2、菜单导航栏包含一些链接可以引导用户浏览其他网页
style
* { box-sizing: border-box;
} body { margin: 0;
} /* 头部样式 */
.header { background-color: #f1f1f1; padding: 20px; text-align: center;
} /* 导航条 */
.topnav { overflow: hidden; background-color: #333;
} /* 导航链接 */
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;
} /* 链接 - 修改颜色 */
.topnav a:hover { background-color: #ddd; color: black;
}
/style
/head
body div classheader h1头部区域/h1
/div div classtopnav a href#主页/a a href#产品/a a href#关于/a
/div
3、内容区域一般有2种形式1列一般用于移动端2列一般用于平板设备3列一般用于PC设备。
style
* { box-sizing: border-box;
} body { margin: 0;
} /* 头部样式 */
.header { background-color: #f1f1f1; padding: 20px; text-align: center;
} /* 导航条 */
.topnav { overflow: hidden; background-color: #333;
} /* 导航链接 */
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none;
} /* 链接 - 修改颜色 */
.topnav a:hover { background-color: #ddd; color: black;
} /* 创建三个相等的列 */
.column { float: left; width: 33.33%;
} /* 列后清除浮动 */
.row:after { content: ; display: table; clear: both;
} /* 响应式布局 - 小于 600 px 时改为上下布局 */
media screen and (max-width: 600px) { .column { width: 100%; }
}
/style
4、底部区域在网页的最下方一般包含版权信息和联系方式等
/* 底部样式 */
.footer { background-color: #f1f1f1; padding: 10px; text-align: center;
}
