DIV+CSS网站实例这篇文章主要讲了什么？

admin
行业动态
2025-01-22
4860

当然，以下是一个简单的CSS实例，用于创建一个带有样式的div元素：，，“ html，，，，，，Div CSS Example，， .styled-div {， width: 200px;， height: 100px;， background-color: lightblue;， border: 2px solid blue;， display: flex;， justify-content: center;， align-items: center;， font-size: 16px;， color: darkblue;， }，，，，Hello, World!，，，“

在当今的网页设计领域，DIV 和 CSS 是构建现代网站的关键工具，通过 DIV 元素来划分页面的不同区域，再利用 CSS 进行样式设置，可以创建出结构清晰、美观大方且具有良好用户体验的网站，下面将介绍一些常见的 DIV 和 CSS 网站布局实例：

DIV+CSS网站实例这篇文章主要讲了什么？第1张

1、两栏布局

HTML 结构

     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <title>两栏布局示例</title>
       <link rel="stylesheet" href="styles.css">
     </head>
     <body>
       <div >
         <div >侧边栏内容</div>
         <div >主要内容区域</div>
       </div>
     </body>
     </html>

CSS 样式

     body, html {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     .container {
       display: flex;
     }
     .sidebar {
       width: 200px;
       background-color: #f4f4f4;
       padding: 20px;
     }
     .main-content {
       flex: 1;
       padding: 20px;
       background-color: #fff;
     }

说明：此布局中，.container 作为父容器，使用display: flex; 让子元素.sidebar 和.main-content 横向排列。.sidebar 宽度固定为 200px，而.main-content 则占据剩余空间，通过flex: 1; 实现，这种布局适用于博客、新闻类网站，方便将导航或分类放在侧边栏，主体内容放在主区域。

2、三栏布局

HTML 结构

     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <title>三栏布局示例</title>
       <link rel="stylesheet" href="styles.css">
     </head>
     <body>
       <div >
         <div >左侧边栏内容</div>
         <div >主要内容区域</div>
         <div >右侧边栏内容</div>
       </div>
     </body>
     </html>

CSS 样式

     body, html {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     .container {
       display: flex;
     }
     .left-sidebar, .right-sidebar {
       width: 200px;
       background-color: #f4f4f4;
       padding: 20px;
     }
     .main-content {
       flex: 1;
       padding: 20px;
       background-color: #fff;
     }

说明：与两栏布局类似，只是增加了一个右侧边栏.right-sidebar，同样使用display: flex; 让三个子元素横向排列，左右边栏宽度固定，中间内容区域自适应，常用于电商平台、企业展示等网站，可放置热门推荐、产品分类等信息在边栏。

3、圣杯布局

HTML 结构

     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <title>圣杯布局示例</title>
       <link rel="stylesheet" href="styles.css">
     </head>
     <body>
       <div >
         <div >头部</div>
         <div >主要内容区域</div>
         <div >侧边栏内容</div>
         <div >页脚信息</div>
       </div>
     </body>
     </html>

CSS 样式

     body, html {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     .container {
       display: flex;
       flex-direction: column;
       min-height: 100vh;
     }
     .header, .footer {
       background-color: #333;
       color: #fff;
       text-align: center;
       padding: 10px 0;
     }
     .main {
       flex: 1;
       display: flex;
     }
     .aside {
       width: 200px;
       background-color: #f4f4f4;
       padding: 20px;
     }
     .content {
       flex: 1;
       padding: 20px;
       background-color: #fff;
     }

说明：圣杯布局是一种经典的三栏布局变形，中间内容区域优先排列，两侧边栏通过order 属性调整顺序，使其在内容区域两侧显示，适用于需要突出主体内容，同时在两侧放置相关辅助信息的网站，如论坛、资讯平台等。

4、水平导航菜单

HTML 结构

     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <title>水平导航菜单示例</title>
       <link rel="stylesheet" href="styles.css">
     </head>
     <body>
       <nav >
         <ul>
           <li><a href="#">首页</a></li>
           <li><a href="#">关于我们</a></li>
           <li><a href="#">服务</a></li>
           <li><a href="#">案例</a></li>
           <li><a href="#">联系我们</a></li>
         </ul>
       </nav>
     </body>
     </html>

CSS 样式

     body {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     .navbar {
       background-color: #333;
       padding: 10px 0;
     }
     .navbar ul {
       list-style-type: none;
       margin: 0;
       padding: 0;
       display: flex;
       justify-content: center;
     }
     .navbar li {
       margin: 0 15px;
     }
     .navbar a {
       color: #fff;
       text-decoration: none;
       font-size: 16px;
     }
     .navbar a:hover {
       text-decoration: underline;
     }

说明：通过将导航菜单的列表项display: flex; 并设置justify-content: center;，实现了水平居中的导航菜单，每个菜单项有一定的间距，鼠标悬停时链接会有下划线效果，增强了用户交互体验，适用于各类网站的顶部导航区域。

5、响应式布局

HTML 结构

     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>响应式布局示例</title>
       <link rel="stylesheet" href="styles.css">
     </head>
     <body>
       <div >
         <div >头部</div>
         <div >主要内容区域</div>
         <div >页脚信息</div>
       </div>
     </body>
     </html>

CSS 样式

     body, html {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     .container {
       display: flex;
       flex-direction: column;
       min-height: 100vh;
     }
     .header, .footer {
       background-color: #333;
       color: #fff;
       text-align: center;
       padding: 10px 0;
     }
     .content {
       flex: 1;
       padding: 20px;
       background-color: #fff;
     }
     @media (max-width: 768px) {
       .header, .footer {
         padding: 5px 0;
       }
       .content {
         padding: 10px;
       }
     }

说明：该布局使用了媒体查询，当屏幕宽度小于 768px 时，头部和页脚的内边距减小，内容区域的内边距也相应调整，以适应小屏幕设备，提供更好的移动端浏览体验，适用于需要在多种设备上都能良好显示的网站，如移动应用官网、在线商店等。