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

news2024/11/25 19:33:00

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

 灵感来源:

小米官网

布局图;

实例效果图:

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

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

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

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

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

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

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

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

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

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

相关文章

TCP与UDP案例

udp不会做拆分整合什么的 多大就是多大

基数和基数转换

目录 一、定义: 二、各个进制: 1、二进制: 2、八进制: 3、十进制: 4、十六进制: 三、基数转换: 1、各类基数转十进制: 二转十: 八转十: 十六转八&a…

搭建自己的AI模型应用网站:JavaScript + Flask-Python + ONNX

1. 前言 本文作者以一个前端新手视角,部署自己的神经网络模型作为后端,搭建自己的网站实现应用的实战经历。目前实现的网页应用有: AI 语音服务主页AI 语音识别AI 语音合成AI CP号码生成器 欢迎大家试用感受,本文将以博客基于G…

【数学竞赛】阿里巴巴全球数学竞赛(附2019-2024年试题+答案)

阿里巴巴全球数学竞赛对所有年龄、背景和职业的个人开放。迄今为止,最年长的参赛者超过80岁,最年轻的仅8岁。 2024年共计801名选手参加比赛,涟水这中专的姜萍获得了全球12名的出众成绩,港中大也抛出了橄榄枝。 初赛注重享受数学之…

深入理解 Java 中的 synchronized 代码块

目录 前言 一、synchronized的工作原理 二、使用synchronized代码块的场景 三、编写synchronized代码块的最佳实践 四、何时使用 synchronized 代码块? 同步: 不同步: 五、Demo讲解 1.使用synchronized代码块减小锁的粒度&#xff0c…

大众点评js逆向过程(未完)

1、这里mtgsig已经被拼到url中 2、进入后mtgsig已经计算完, ir he(this[b(4326)], !1), 就是加密函数 32 次 796 1143 ->508 -> 754 -> 1151 160 注意IC这个数组 控制流平坦化进行AST 解析 AST网址

【背包题】oj题库

目录 1282 - 简单背包问题 1780 - 采灵芝 1888 - 多重背包&#xff08;1&#xff09;​编辑 1891 - 开心的金明 2073 - 码头的集装箱 1905 - 混合背包 1282 - 简单背包问题 #include <bits/stdc.h> using namespace std; //二维数组:dp[i][j]max(dp[i-1][j],v[i]dp[…

利用485缓存器实现两主一丛RS485串行通信

作者:艺捷自动化&#xff0c;其旗下产品有艺捷自动化网站和易为二维码小程序&#xff08;微信&#xff09; 对于工控自动化领域的电气工程师来说&#xff0c;基于RS485的串行通讯是最常见的。绝大部分仪表都能支持这种通讯方式。RS485通讯&#xff0c;是一种异步半双工模式&…

民生银行信用卡中心金融科技24届春招面经

本文介绍2024届春招中&#xff0c;中国民生银行下属信用卡中心的金融科技&#xff08;系统研发方向&#xff09; 岗位2场面试的基本情况、提问问题等。 2024年04月投递了中国民生银行下属信用卡中心的金融科技&#xff08;系统研发方向&#xff09; 岗位&#xff0c;暂时不清楚…

【Linux内核】伙伴系统算法和slab分配器(1)

【Linux内核】伙伴系统算法和slab分配器&#xff08;1&#xff09; 目录 【Linux内核】伙伴系统算法和slab分配器&#xff08;1&#xff09;伙伴系统&#xff08;buddy&#xff09;算法伙伴系统算法基本原理内存申请内存回收 接口函数源码分析内存分配接口物理内存释放接口规范…

spring boot配置ssl证书,支持https访问

1. 阿里云官网下载证书,云控制台搜索ssl&#xff0c;点击进入。 2.点击免费证书&#xff0c;立即购买。 3. 点击创建证书&#xff0c;填写完证书申请后&#xff0c;等待证书签发。 4. 证书签发以后&#xff0c;点击下载证书&#xff0c;spring boot选tomcat服务器类型的。 5. …

FineReport简单介绍

一、介绍 官网 &#xff1a;FineReport产品简介- FineReport帮助文档 - 全面的报表使用教程和学习资料 报表是以表格、图表的形式来动态展示数据&#xff0c;企业通过报表进行数据分析&#xff0c;进而用于辅助经营管理决策。 FineReport 是一款用于报表制作&#xff0c;分析和…

Mybatis-Plus多种批量插入方案对比

背景 六月某日上线了一个日报表任务&#xff0c;因是第一次上线&#xff0c;故需要为历史所有日期都初始化一次报表数据 在执行过程中发现新增特别的慢&#xff1a;插入十万条左右的数据&#xff0c;SQL执行耗费高达三分多钟 因很早就听闻过mybatis-plus的[伪]批量新增的问题&…

C++语法05 浮点型/实数类型

什么是实数类型 实数类型是一种数据类型&#xff0c;实数类型变量里能存放小数和整数。 定义格式&#xff1a;double a; 赋值&#xff1a;a0.4; 输入&#xff1a;cin>>a; 输出&#xff1a;cout<<a; 训练&#xff1a;尺子的价格 小知在文具店买铅笔&#xff…

亲测几十款随身wifi,全网最全随身WiFi避坑指南!最值得买的随随身wifi品牌推荐!

关于随身wifi我认为我是比较有发言权的&#xff0c;历经三年测评了几十种随身wifi&#xff0c;便宜的贵的&#xff0c;大牌的小厂的&#xff0c;电池款USB款等各种随身wifi。根据测试结果以及通过电商平台搜索、粉丝反馈、社交平台评价等综合测评结果。今天就跟大家分享一下&am…

Orange_Pi_AIpro运行蜂鸟RISC-V仿真

Orange_Pi_AIpro运行蜂鸟RISC-V仿真 突发奇想&#xff0c;试一试Orange Pi AIpro上运行蜂鸟RISC-V的仿真。 准备 默认已经有一个Orange Pi AIpro&#xff0c;并且对设备进行一定的初始化配置&#xff0c;可以参考上一篇博文开源硬件初识——Orange Pi AIpro&#xff08;8T&a…

《C++ Primer》导学系列:第 2 章 - 变量和基本类型

2.1 基本内置类型 概述 本小节介绍C中的基本内置类型。基本内置类型是构成C程序的基础&#xff0c;它们用于表示数据的不同形式&#xff0c;如整数、浮点数、字符等。理解和使用这些基本类型是编写C程序的起点。 2.1.1 算术类型 C的算术类型分为整型和浮点型。整型用于表示…

LVS三种负载均衡模式:NAT、Tunneling和DR的技术对比

1. LVS-NAT 模式的特性 IP使用&#xff1a;RS&#xff08;Real Server&#xff09;应使用私有地址&#xff0c;RS的网关必须指向DIP&#xff08;Director IP&#xff09;。网络范围&#xff1a;DIP和RIP必须在同一个网段内。数据包处理&#xff1a;请求和响应报文都需要经过Di…

【YashanDB知识库】PHP使用OCI接口使用数据库绑定参数功能异常

【问题分类】驱动使用 【关键字】OCI、驱动使用、PHP 【问题描述】 PHP使用OCI8连接yashan数据库&#xff0c;使用绑定参数获取数据时&#xff0c;出现报错 如果使用PDO_OCI接口连接数据库&#xff0c;未弹出异常&#xff0c;但是无法正确获取数据 【问题原因分析】 开启O…

远程桌面失败:你的凭据不工作

远程桌面失败&#xff1a;你的凭据不工作 远程桌面失败&#xff1a;你的凭据不工作_您的凭据不工作-CSDN博客https://blog.csdn.net/weixin_38004638/article/details/82290796