【html】学会这一套布局,让你的网页更加

        很多小伙伴们在刚刚开始学习网页设计的时候不知道怎么布局今天给大家介绍一种非常实用且更加专业的一种布局。

 灵感来源:

小米官网

布局图;

实例效果图:

这是一个简单的HTML模板,包括头部、内容区域和底部。

头部部分包括一个分为左右两部分的导航栏。左侧导航栏包含了5个链接,右侧导航栏也包含了5个链接。

内容区域部分包含一个用于展示内容的<p>标签。

底部部分包含一个版权信息。

整个页面使用了CSS样式来定义各个区域的样式,如背景色、字体、内边距等。

整体布局使用了一个wrap类限定内容宽度,并使用了浮动和清除浮动来实现导航栏的布局。

我们再回过头来看一下小米的官网,是不是就是利用了这种布局

小米官网布局
​​​​​​

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【记录】ChatGLM3-6B大模型部署、微调(二):微调

前言 上文记录了ChatGLM3-6B大模型本地化部署过程,本次对模型进行微调,目的是修改模型自我认知。采用官方推荐微调框架:LLaMA-Factory 安装LLaMA-Factory # 克隆项目 git clone https://github.com/hiyouga/LLaMA-Factory.git 安装依赖 # 安装…

Linux---系统的初步学习【项目一:Linux操作系统的安装与配置】

项目一 Linux操作系统的安装与配置 1.1 项目知识准备 1.1.1 操作系统是什么? ​ 操作系统(Operating System,OS)是管理计算机硬件与软件资源的计算机程序。操作系统需要处理如管理硬件、决定程序运行的优先次序、管理文件系统等…

逻辑斯蒂回归与最大熵

知识树 感知机的缺陷 修补感知机缺陷-逻辑斯蒂回归 下面这两个值是强制给的,不是推导的 最大熵 最大熵的一个小故事 最大熵模型 我们最终目标是要求P(Y|X) 书上写的是H,但是2我们认为H(Y|X)更合适 咱们最终的目的是要用拉格朗日乘数法,所以需要约束 总结 感觉深度之眼比较模…

汽车级TPSI2140QDWQRQ1隔离式固态继电器,TMUX6136PWR、TMUX1109PWR、TMUX1133PWR模拟开关与多路复用器(参数)

1、TPSI2140-Q1 是一款隔离式固态继电器,专为高电压汽车和工业应用而设计。 TPSI2140-Q1 与 TI 具有高可靠性的电容隔离技术和内部背对背 MOSFET 整合在一起,形成了一款完全集成式解决方案,无需次级侧电源。 该器件的初级侧仅由 9mA 的输入电…

Studio One 6.6.2 for Mac怎么激活,有Studio One 6激活码吗?

如果您是一名音乐制作人,您是否曾经为了寻找一个合适的音频工作站而苦恼过?Studio One 6 for Mac是一款非常适合您的MacBook的音频工作站。它可以帮助您轻松地录制、编辑、混音和发布您的音乐作品。 Studio One 6.6.2 for Mac具有直观的界面和强大的功能…

Zookeeper: 配置参数解读

Zookeeper中的配置文件zoo.cfg中参数含义解读如下: tickTime:通信心跳时间,Zookeeper服务器与客户端心跳时间,单位毫秒。 initLimit: LF初始通信时限 Leader和Follower初始连接时能容忍的最多心跳数。 syncLimit: LF同步通信时…

算法01 递推算法及相关问题详解【C++实现】

目录 递推的概念 训练:斐波那契数列 解析 参考代码 训练:上台阶 参考代码 训练:信封 解析 参考代码 递推的概念 递推是一种处理问题的重要方法。 递推通过对问题的分析,找到问题相邻项之间的关系(递推式&a…

mongodb 集群安装

1. 配置域名 Server1: OS version: CentOS Linux release 8.5.2111 hostnamectl --static set-hostname mongo01 vi /etc/sysconfig/network # Created by anaconda hostnamemong01 echo "192.168.88.20 mong1 mongo01.com mongo02.com" >> /…

用GAN网络生成彩票号码

1. 前言 生成对抗网络(GAN,Generative Adversarial Network)是由Ian Goodfellow等人在2014年提出的一种深度学习模型,用于学习和生成与真实数据分布相似的数据。GAN由生成器(Generator)和判别器&#xff08…

Python编程环境搭建

简介: Python环境安装比较简单,无需安装其它依赖环境,主要步骤为: 1. 下载并安装Python对应版本解释器 2. 下载并安装一个ide编码工具 一、下载并安装Python解释器 1.1 下载 官网地址:Welcome to Python.org 选择…

STM32-CAN

一、CAN总线简介 1.1 CAN简介 CAN 是 Controller Area Network 的缩写(以下称为 CAN),是 ISO 国际标准化的串行通信 协议。异步半双工。 ISO11898:123kbps~1Mbps。 ISO11519:125kbps 特点: 多主控制没…

Dify源码本地部署启动

背景 Dify是一个开源LLM应用程序开发平台。Dify的直观界面结合了人工智能工作流、RAG管道、代理功能、模型管理、可观察性功能等,让您快速从原型到生产。 Dify提供在线试用功能,可以直接在线体验其功能。同时也支持docker部署,源码部署等方…

【Vue】Pinia管理用户数据

Pinia管理用户数据 基本思想:Pinia负责用户数据相关的state和action,组件中只负责触发action函数并传递参数 步骤1:创建userStore 1-创建store/userStore.js import { loginAPI } from /apis/user export const useUserStore defineStore(…

ARP协议相关

把ip地址解析成mac地址这里的mac地址就是路由器的mac地址 免费ARP 源ip和目的ip都是一样的,那怎么让其他人更新arp表呢?? 是因为目标mac是全f,是一个广播报文 如果冲突就是ip一样但是mac又不一样 代理ARP pc1和pc4是在同一个子网…

算法训练营第六十天(延长12天添加图论) | LeetCode 647 回文子串、LeetCode 516 最长回文子序列

LeetCode 67 回文子串 思路很简单&#xff0c;每一个dp[i]等于dp[i-1]加上当前字符向前直到0各个长度字符串回文串个数即可 代码如下&#xff1a; class Solution {public boolean isValid(String s) {int l 0, r s.length() - 1;while (l < r) {if (s.charAt(l) ! s.ch…

谷歌企业开发者账号注册的常见问题及解决方法

今天跟大家分享一下注册谷歌开发者企业号的一些注意事项和干货&#xff0c;少走一些弯路。 首先&#xff0c;各位开发者朋友应该都知道&#xff0c;谷歌平台上有两种类型开发者账号&#xff1a;个人开发者账号和企业开发者账号。个人账号上架周期长&#xff0c;需要14天的封测&…

C#传值参数 -1值类型 -2引用类型

传值参数 -1值类型 -2引用类型 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; //传值参数-1、值类型 2、引用类型 namespace PamatetersExample {class Program{static void Main(string[] args){St…

2 选频网络

目录 选频网络 什么是选频网络 选频网络的分类 串联谐振回路 等效电路 阻抗特性 品质因素 电压谐振 广义失谐系数 谐振曲线&#xff08;幅频曲线&#xff09; 通频带 相频曲线 考虑信号源内阻与负载电阻 并联谐振回路 等效电路 导纳特性 品质因素 电流谐振…

C++11 move左值转化为右值

单纯的左值只能用左值引用和右值只能用右值引用有些局限&#xff0c;在一些情况下&#xff0c;我们也需要对左值去调用右值引用&#xff0c;从而实现将左值里的内容转移到右值中 标准定义&#xff1a; 功能就是将一个左值强制转化为右值&#xff0c;然后实现移动语义 注意&…

2024年7款硬盘恢复软件:即刻恢复硬盘删除的文件!

当文件被删除后&#xff0c;它并不是立即从硬盘中消失&#xff0c;而是被标记为“已删除”&#xff0c;等待垃圾回收处理。因此&#xff0c;在文件被删除后&#xff0c;有几种方法可以尝试恢复删除的数据。 以下是7款常用的数据恢复软件&#xff0c;以及它们的详细介绍&#xf…