响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面

项目展示在这里插入图片描述

三栏布局是一种常用的网页布局结构。
除了头部区域、底部区域外,中间的区域(主体区域)划分成了三个栏目,分别是左侧边栏、内容区域和右侧边栏,这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时,页面中左侧边栏和右侧边栏的宽度固定不变,而内容区域的宽度会随着浏览器窗口宽度大小的变化而变化。

项目目录结构

在进行项目开发之前,首先需要完成项目目录结构的搭建。
在这里插入图片描述在这里插入图片描述
index.html文件用于实现项目的页面结构,CSS目录下的style.css文件用来实现项目的页面结构。

index.html具体代码

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>三栏布局页面</title>
<link rel="stylesheet" href="css/style.css">
</head><body>
<!--头部区域-->
<header><h4>头部区域</h4>
</header>
<!-- 主体区域-->
<div class="main"> <!--左侧边栏--><aside class="left"><p>左侧边栏</p></aside><!--右侧边栏--><aside class="right"><p>右侧边栏</p></aside><!--中间内容--><section class="middle"><p>内容区域</p></section>
</div>
<!--底部区域-->
<footer><p>底部区域</p>
</footer>
</body>
</html>

style.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页面,即可出现三栏布局页面效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/628332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【java八股文】之JVM基础篇

【java八股文】之JVM基础篇-CSDN博客 【java八股文】之MYSQL基础篇-CSDN博客 【java八股文】之Redis基础篇-CSDN博客 【java八股文】之Spring系列篇-CSDN博客 【java八股文】之分布式系列篇-CSDN博客 【java八股文】之多线程篇-CSDN博客 【java八股文】之JVM基础篇-CSDN博…

设计模式-委托模式

设计模式专栏 模式介绍模式特点应用场景委托模式在GUI编程场景的应用代码示例Java实现委托模式Python实现委托模式 委托模式在spring中的应用 模式介绍 委托模式是一种软件设计模式&#xff0c;其中一个对象&#xff08;委托对象&#xff09;将某些操作委托给另一个对象&#…

css深度选择器 /deep/

一、/deep/的含义和使用 /deep/ 是一种 CSS 深度选择器&#xff0c;也被称为深度组合器或者阴影穿透组合器&#xff0c;主要用在 Web 组件样式封装中。 在 Vue.js 或者 Angular 中&#xff0c;使用了样式封装技术使得组件的样式不会影响到全局&#xff0c;也就是说组件内部的…

C++函数(4)

短信计费 题目描述&#xff1a;用手机发短信&#xff0c;一条短信资费为0.1元&#xff0c;但限定一条短信的内容在70个字以内&#xff08;包括70个字&#xff09;。如果你一次所发送的短信超过了70个字&#xff0c;则会按照每70个字一条短信的限制把它分割成多条短信发送。假设…

《Python 3 基础》- numpy的array,python的list、tuple的区别与联系再辨析

这里写自定义目录标题 一、基本认识二、list与传统数组&#xff08;以C为例&#xff09;的联系与区别三、1维list切片规则四、2维list类似于2维数组&#xff0c;但表达方式需适应五、list与元组的联系与区别1. tuple的创建方法类似于list&#xff0c;tuple用&#xff08;&#…

白码CRM快速实现报价转订单功能

某crm项目已经做到销售模块了&#xff0c;销售模块实现了从报价到销售单&#xff0c;再到财务模块的应收流程。但使用过程中发现不好用的地方&#xff1a;报价通过后客户下单&#xff0c;销售相关人员又要重新录入数据一样的销售单&#xff0c;觉得这样的操作比较繁琐&#xff…

【STM32】HAL库的STOP低功耗模式UART串口唤醒,第一个接收字节出错的问题(已解决)

【STM32】HAL库的STOP低功耗模式UART串口唤醒&#xff0c;第一个接收字节出错的问题&#xff08;已解决&#xff09; 文章目录 BUG复现调试代码推测原因及改进方案尝试中断时钟供电外设唤醒方式校验码硬件问题 切换到STOP0模式尝试结论和猜想解决方案附录&#xff1a;Cortex-M…

【leetcode100-035】【链表/哈希链表】LRU缓存

【题干】 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;…

说清楚Kubernetes、Docker、Dockershim、Containerd、runC、CRI、OCI的关系

Kubernetes v1.20版本 的 release note 里说 deprecated docker。并且在后续版本 v1.24 正式删除了 dockershim 组件&#xff0c;这对我们有什么影响呢&#xff1f;Kubernetes 1.20: The Raddest Release | Kubernetes 为了搞明白这件事情&#xff0c;以及理解一系列容器名词 …

仿真机器人-深度学习CV和激光雷达感知(项目2)day01【项目介绍与环境搭建】

文章目录 前言项目介绍功能与技术简介硬件要求环境配置虚拟机运行项目demo 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;本文内容是我为复试准备的第二个项目 &#x1f4ab;欢迎大家的关注&#xff0c;我的博客主要关注…

03.neuvector之组的划分逻辑

neuvector之组的划分逻辑 原文链接,欢迎大家关注我的github账号 一、组的定义 NeuVector 会自动从正在运行的应用程序中创建组。这些组以前缀‘nv‘开头。您也可以使用 CRD 或 REST API 手动添加它们&#xff0c;并且可以在任何模式下创建、发现、监视或保护。网络和响应规则需…

Java language programming:List的使用

&#xff08;源于PTA&#xff09; 题目&#xff1a; <1>.定义Person类。 <2>.定义私有属性String name,int age,使用Eclipse生成每个属性setter 、getter&#xff0c;有参Person(String name,int age) 、无参构造方法&#xff0c;toString方法。 <3>.定义Mai…

现阶段Python和Java哪个更吃香?

现阶段Python和Java哪个更吃香&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&…

论文阅读 Vision Transformer - VIT

文章目录 1 摘要1.1 核心 2 模型架构2.1 概览2.2 对应CV的特定修改和相关理解 3 代码4 总结 1 摘要 1.1 核心 通过将图像切成patch线形层编码成token特征编码的方法&#xff0c;用transformer的encoder来做图像分类 2 模型架构 2.1 概览 2.2 对应CV的特定修改和相关理解 解…

一个小程序跳转到另一个小程序中如何实现

小程序 保证两个小程序是一样的主体才可以跳转。怎么知道是不是同样的主体呢&#xff1f; 小程序的后台管理-设置-基本设置-基本信息。查看主体信息。 跳转 <button clicktoOtherMini()>跳转到另一个小程序</button> function toOtherMini(){wx.navigateToMini…

GPT实战系列-简单聊聊LangChain搭建本地知识库准备

GPT实战系列-简单聊聊LangChain搭建本地知识库准备 LangChain 是一个开发由语言模型驱动的应用程序的框架&#xff0c;除了和应用程序通过 API 调用&#xff0c; 还会&#xff1a; 数据感知 : 将语言模型连接到其他数据源 具有代理性质 : 允许语言模型与其环境交互 LLM大模型…

python中的overload

Python中的overload 类似函数重载方法第一种第二种 类似函数重载方法 参考链接&#xff1a;Python中重写&#xff08;override&#xff09; 第一种 结起来&#xff0c;在Python中可以使用重写&#xff08;override&#xff09;来重新定义父类中的方法&#xff0c;但并不存在…

smartgit选择30天试用后需要输入可执行文件

突然有一天smartgit提示到期了&#xff0c;我按照以往那样删除license和preferences文件后&#xff0c;选择30天试用&#xff0c;弹出了需要选择git可执行文件。 我尝试选择了我的git.exe&#xff0c;发现根本不行&#xff0c;提示让我执行下git --version 执行过后提示我的.gi…

数据结构及其简单实现

栈 先进后出栈顶操作&#xff08;栈顶进&#xff0c;栈顶出&#xff09; class Strock {constructor() {this.data [] // 可以是对象this.count 0}push(item) {// 实现有三种// 1. this.data.push(item); // 2. this.data[this.data.length] item; this.count// 3this.dat…

CentOS 7 权限管理实战指南:用户组管理相关命令详解

前言 深入了解 CentOS 7 用户组管理的命令&#xff0c;掌握关键的用户组操作技巧。从创建和删除用户组、修改组属性&#xff0c;到设置组密码和管理组成员&#xff0c;这篇文章详细介绍了 CentOS 7 系统下常用的用户组管理命令&#xff0c;为读者小伙伴提供了实用而全面的指南…