CSS网站页面布局与美化实例教程(div+css)

2021年3月24日14:05:57 发表评论 1,394 次浏览

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

网站布局的最常见结构如下:

CSS |网站布局1

注意:标头部分包含网站徽标, 搜索栏和用户个人资料。导航菜单包含指向各种可用文章类别的链接, 内容部分分为3个部分(列), 左右侧边栏包含与其他文章和广告的链接, 而主要内容部分是包含该文章的部分, 然后在底部页脚部分包含地址, 链接, 联系人等。

标头部分:标头部分通常位于网站顶部或顶部导航菜单下方。它通常包含网站名称或网站徽标。

例子:

<!-- 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 >

输出如下:

CSS |网站布局2

导航菜单:导航栏/菜单基本上是链接列表, 它使访问者可以轻松访问并轻松浏览网站。

例子:

<!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 = "#" >Algo</ a >
             < a href = "#" >DS</ a >
             < a href = "#" >Language</ a >
         </ div >< br >
          
         < center style = "font-size:200%;" >
             Remaining Section
         </ center >
     </ body >
</ html >

输出如下:

CSS |网站布局3

内容部分:

内容部分是网站的主体。用户可以按n列布局划分内容部分。

最常见的布局是:

一栏布局:

它主要用于移动布局。

CSS |网站布局4

2列布局:

网站布局主要用于平板电脑或笔记本电脑。

CSS |网站布局5

3列布局:

该网站布局主要用于台式机。

CSS |网站布局6

用户还可以创建一个响应式布局, 该布局将根据屏幕大小进行更改。考虑下面的示例, 如果屏幕的宽度大于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 = "#" >Algo</ a >
             < a href = "#" >DS</ a >
             < a href = "#" >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像素:

CSS |网站布局7

屏幕尺寸的宽度大于400像素, 小于600像素:

CSS |网站布局8

屏幕尺寸的宽度小于400px:

CSS |网站布局9

页脚部分:页脚部分位于网页的底部, 通常由联系信息, 版权, 关于我们等信息组成。

例子:

<!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 = "#" >About</ a >< br >
             < a href = "#" >Career</ a >< br >
             < a href = "#" >Contact Us</ a >
         </ div >
     </ body >
</ html >

输出如下:

CSS |网站布局10

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: