CSS网站页面布局与美化实例教程（div+css） _前端开发

网站可以分为多个部分, 包括标题, 菜单, 内容和页脚, 基于这些部分, 开发人员可以使用许多不同的布局设计。可以使用div标签创建不同的布局, 并使用CSS属性对其进行样式设置。
网站布局的最常见结构如下：

文章图片
注意：标头部分包含网站徽标, 搜索栏和用户个人资料。导航菜单包含指向各种可用文章类别的链接, 内容部分分为3个部分(列), 左右侧边栏包含与其他文章和广告的链接, 而主要内容部分是包含该文章的部分, 然后在底部页脚部分包含地址, 链接, 联系人等。
【CSS网站页面布局与美化实例教程（div+css）】标头部分：标头部分通常位于网站顶部或顶部导航菜单下方。它通常包含网站名称或网站徽标。
例子：

< !-- This code describes the header section of website layout --> < !DOCTYPE html> < html > < head > < title > Website Layouts < / title > < style > .header { background-color: green; padding: 15px; text-align: center; } < / style > < / head > < body > < div class = "header" > < h2 style = "color:white; " > lsbin < / h2 > < / div > < br > < center style = "font-size:200%; " > Remaining Section < / center > < / body > < / html >

输出如下：

文章图片
导航菜单：导航栏/菜单基本上是链接列表, 它使访问者可以轻松访问并轻松浏览网站。
例子：

< !DOCTYPE html> < html > < head > < title > Website Layout < / title > < style > /* CSS property for header section */ .header { background-color: green; padding: 15px; text-align: center; }/* CSS property for nevigation menu */ .nav_menu { overflow: hidden; background-color: #333; } .nav_menu a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .nav_menu a:hover { background-color: white; color: green; } < / style > < / head > < body > < !-- header of website layout --> < div class = "header" > < h2 style = "color:white; font-size:200%; " > lsbin < / h2 > < / div > < !-- nevigation menu for website layout --> < div class = "nav_menu" > < a href = "https://www.lsbin.com/#" > Algo< / a > < a href = "https://www.lsbin.com/#" > DS< / a > < a href = "https://www.lsbin.com/#" > Language< / a > < / div > < br > < center style = "font-size:200%; " > Remaining Section < / center > < / body > < / html >

输出如下：

文章图片
内容部分：
内容部分是网站的主体。用户可以按n列布局划分内容部分。
最常见的布局是：
一栏布局：
它主要用于移动布局。

文章图片
2列布局：
该网站布局主要用于平板电脑或笔记本电脑。

文章图片
3列布局：
该网站布局主要用于台式机。

文章图片
用户还可以创建一个响应式布局, 该布局将根据屏幕大小进行更改。考虑下面的示例, 如果屏幕的宽度大于600px, 则将有3列布局；如果屏幕的宽度在400px至600px之间, 则将有2列布局；如果屏幕尺寸小于400px, 则有1列将显示布局。
例子：

< !DOCTYPE html> < html > < head > < title > Website Layout < / title > < style > * { box-sizing: border-box; }/* CSS property for header section */ .header { background-color: green; padding: 15px; text-align: center; }/* CSS property for nevigation menu */ .nav_menu { overflow: hidden; background-color: #333; } .nav_menu a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .nav_menu a:hover { background-color: white; color: green; }/* CSS property for content section */ .columnA, .columnB, .columnC { float: left; width: 31%; padding: 15px; text-align:justify; } h2 { color:green; text-align:center; }/* Media query to set website layout according to screen size */ @media screen and (max-width:600px) { .columnA, .columnB, .columnC { width: 50%; } } @media screen and (max-width:400px) { .columnA, .columnB, .columnC { width: 100%; } } < / style > < / head > < body > < !-- header of website layout --> < div class = "header" > < h2 style = "color:white; font-size:200%" > lsbin < / h2 > < / div > < !-- nevigation menu of website layout --> < div class = "nav_menu" > < a href = "https://www.lsbin.com/#" > Algo< / a > < a href = "https://www.lsbin.com/#" > DS< / a > < a href = "https://www.lsbin.com/#" > Language< / a > < / div > < !-- Content section of website layout --> < div class = "row" > < div class = "columnA" > < h2 > Column A< / h2 > < p > Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful.< / p > < / div > < div class = "columnB" > < h2 > Column B< / h2 > < p > Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful.< / p > < / div > < div class = "columnC" > < h2 > Column C< / h2 > < p > Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful.< / p > < / div > < / div > < / body > < / html >

输出如下：
屏幕尺寸的宽度大于700像素：

文章图片
屏幕尺寸的宽度大于400像素, 小于600像素：

文章图片
屏幕尺寸的宽度小于400px：

文章图片
页脚部分：页脚部分位于网页的底部, 通常由联系信息, 版权, 关于我们等信息组成。
例子：

< !DOCTYPE html> < html > < head > < title > CSS Website Layout < / title > < style > /* Style for footer section */ .footer { background-color: green; padding: 15px; text-align: center; } < / style > < / head > < body > < center style = "font-size:200%; " > Upper section < / center > < !-- footer Section --> < div class = "footer" > < a href = "https://www.lsbin.com/#" > About< / a > < br > < a href = "https://www.lsbin.com/#" > Career< / a > < br > < a href = "https://www.lsbin.com/#" > Contact Us< / a > < / div > < / body > < / html >

输出如下：