当前位置： 首页 > news >正文

CSS布局基础（CSS书写顺序 导航栏写法 常见问题）

news 2026/2/9 21:29:20

CSS布局基础（CSS书写顺序 & 导航栏写法）

    • CSS布局基础（CSS书写顺序）
    • 导航栏写法
    • PC端网页开发一般步骤
    • 容易出问题的点

CSS布局基础（CSS书写顺序）

  1. 布局定位属性
  2. 自身属性（宽高，边框，内外边距）
  3. 内部文本属性
  4. C3等其他属性

导航栏写法

使用 li + a 的方式实现，而不是直接写多个 a 标签

PC端网页开发一般步骤

布局的一般原则是，从大到小，也就是先确认整体布局，再对局部布局进行调整。
清除默认间距

* {margin: 0;padding: 0;
}
  1. 确定主显示区
    PC端网页一般会有个中心区域展示内容，有的地方也叫版心。
.main {width: 960px;margin: 0 auto;
}
button{border: 0;
}

行内（块）元素，之间默认有空隙
解决方案：

  • 浮动
  • 源代码级别，将两个标签连接的字符(><SPAN＞)放在同一行
  • 源代码级别，用注释连接两行，在注释中换行
  1. 划分大致的区域
    一般来讲，大致分为 头部，内容区，尾部
  2. 在每个大区内部再进行划分
    一般来讲，相同或相似样式的内容划分到一个盒子

容易出问题的点

  • 上下外边距相遇时，会忽略较小值，直接取较大值，而不是二者之和
  • 嵌套父子盒子同时设置margin-top时，子元素无效，会计算到父元素上
  • 盒子浮动后，变成行内块的特性
  • UI上没有明显界限的多个盒子，可酌情划分
  • 盒子内图片大小，只设置一边，若同时设置宽高，可能导致图片扭曲变形
  • 不定长的导航栏或者 列表，在不确定的方向上不要设置固定的宽高，由实际内容撑开

相关文章：

CSS布局基础（CSS书写顺序 导航栏写法 常见问题）

CSS布局基础&#xff08;CSS书写顺序 & 导航栏写法&#xff09; CSS布局基础&#xff08;CSS书写顺序&#xff09;导航栏写法PC端网页开发一般步骤容易出问题的点 CSS布局基础&#xff08;CSS书写顺序&#xff09; 布局定位属性自身属性&#xff08;宽高&#xff0c;边框&…...

编程日记 2023/5/6 6:40:42

打造卓越 QML 层级设计：从入门到精通

目录标题 引言&#xff1a;QML 层级设计的重要性1.1 什么是 QML1.2 层级设计的核心理念1.3 实际应用案例 QML 基础知识2.1 语言概述2.2 基本元素2.3 属性和信号 设计原则与规范3.1 命名规范3.1.1 标识符命名3.1.2 文件命名3.1.3 文件夹命名 3.2 代码风格3.2.1 缩进与空格3.2.2 …...

编程日记 2023/5/6 6:35:40

shell流程控制之条件判断练习

1、判断当前磁盘剩余空间是否有20G&#xff0c;如果小于20G&#xff0c;则将报警邮件发送给管理员&#xff0c;每天检查一次磁盘剩余空间。​ 因为如果磁盘剩余空间小于20G需要报警发送邮件给管理员&#xff0c;所以需要对管理员的邮箱进行设置 &#xff08;1&#xff09;首先…...

编程日记 2023/5/30 17:30:20

linux中TF启动卡制作：磁盘分区文件同步

文章目录 前言&#xff1a;1. 连接TF卡2. 磁盘卸载载与分区2.1 磁盘卸载2.2 创建第一个分区2.3 创建第二个分区 3. 磁盘格式化4. 文件同步5. 检查与BOOT分区启动文件拷贝总结&#xff1a; 前言&#xff1a; TF卡在linux环境下配置好相关软件后&#xff0c;把配置好的系统以及软…...

编程日记 2023/5/6 6:25:34

【操作系统OS】学习笔记:第一章 操作系统基础【哈工大李治军老师】

基于本人观看学习 哈工大李治军老师主讲的操作系统课程 所做的笔记&#xff0c;仅进行交流分享。 特此鸣谢李治军老师&#xff0c;操作系统的神作&#xff01; 如果本篇笔记帮助到了你&#xff0c;还请点赞 关注 支持一下 ♡>&#x16966;<)!! 主页专栏有更多&#xff0…...

编程日记 2023/5/6 6:20:33

Linux C/C++ 网络编程中地址格式转换（inet_pton和inet_ntop函数）

网络编程中地址格式转换&#xff08;inet_pton和inet_ntop函数&#xff09; 地址格式转换 #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h>int inet_pton(int af , const char * src ,void * dst);&#xff08;1&#xf…...

编程日记 2023/5/6 6:15:32

庖丁解牛函数知识---C语言《2》

目录 前言&#xff1a; 1.嵌套调用函数 2.链式访问 3.函数的声明与定义 4.*递归 5.递归与非递归 ❤博主CSDN:啊苏要学习 ▶专栏分类&#xff1a;C语言◀ C语言的学习&#xff0c;是为我们今后学习其它语言打好基础&#xff0c;C生万物&#xff01; 开始我们的C语言之旅吧…...

编程日记 2023/5/6 6:10:31

Git 使用教程：最详细、最正宗手把手教学（万字长文）

目录 一&#xff1a;Git二&#xff1a;SVN与Git的的区别三、安装Git四&#xff1a;常规操作五&#xff1a;远程仓库六&#xff1a;创建与合并分支七&#xff1a;bug分支八&#xff1a;多人协作九&#xff1a;git可视化工具 Git Git 是一种分布式版本控制系统&#xff0c;用于…...

编程日记 2023/5/6 6:05:29

【华为OD机试 2023最新 】最优资源分配/芯片资源占用（C语言题解 100%）

文章目录 题目描述输入描述输出描述备注用例题目解析代码思路C语言题目描述 某块业务芯片最小容量单位为1.25G，总容量为M*1.25G，对该芯片资源编号为1，2，…，M。该芯片支持3种不同的配置，分别为A、B、C。 配置A：占用容量为 1.25 * 1 = 1.25G配置B：占用容量为 1.25 * 2 =…...

编程日记 2023/5/6 6:00:27

markdown二元运算符

符号markdown名称 \pm \pm正负/加减 ∓ \mp ∓\mp负正/减加 \times \times乘号 ⋅ \cdot ⋅\cdot点乘号 \div \div除号 ∣ \mid ∣\mid整除 ∤ \nmid ∤\nmid不整除 ⊕ \oplus ⊕\oplus异或...

编程日记 2023/5/30 17:32:43

【华为/华三】PPP

NCP network阶段 用于协商网络层参数&#xff0c;IPCP静态协商IP地址&#xff08;即互推地址&#xff09;动态协商叫做获得地址 Q&#xff1a;为什么PPP两端&#xff0c;可以不在一个网段内&#xff0c;也能够通信&#xff1f; A&#xff1a;因为PPP中的NCP会通过IPCP协商IP…...

编程日记 2023/6/1 2:19:31

【Java笔试强训 9】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、选择题 二、编程题 &#x1f525;另类加法…...

编程日记 2023/5/6 5:45:25

【C++】STL标准库之list

STL标准库之list list类的简介常用的list类的接口构造迭代器容量访问修改 list和vector的区别 list类的简介 list是一种序列式容器&#xff0c;可以在任意位置插入和删除元素&#xff0c;并且其时间复杂度为O(1)&#xff0c;在底层&#xff0c;list是双向链表结构&#xff0c;…...

编程日记 2023/5/6 5:40:24

Nomogram | 盘点一下绘制列线图的几个R包！~（二）

1写在前面 不知道各位小伙伴的五一假期过的在怎么样&#xff0c;可怜的我感冒了。&#x1f637; 今天继续之前没有写完的列线图教程吧&#xff0c;再介绍几个制作列线图的R包。&#x1f920; 2用到的包 rm(list ls())library(tidyverse)library(survival)library(rms)library(…...

编程日记 2023/5/6 5:35:23

Django之定时任务django-crontab

Django之定时任务django-crontab crontab安装django-crontab注册应用定时时间格式定时时间示例设置定时任务符号方法解决crontab中文问题管理定时任务注意 crontab Django可以使用第三方库如django-crontab来实现定时任务的调度。该库允许使用类似于crontab文件格式的语法指定任…...

编程日记 2023/5/6 5:30:18

linux常见命令

ls&#xff1a;列出当前目录下的所有文件和子目录 cd&#xff1a;切换当前工作目录&#xff0c;例如 cd /home/user 进入 /home/user 目录 pwd&#xff1a;显示当前工作目录的路径 mkdir&#xff1a;创建一个新目录&#xff0c;例如 mkdir newdir 创建一个名为 newdir 的目录…...

编程日记 2023/5/6 5:25:17

【14.HTML-移动端适配】

移动端适配 1 布局视口和视觉视口1.1 设置移动端布局视口宽度 2 移动端适配方案2.1 rem单位动态html的font-size&#xff1b;2.2 vw单位2.3 rem和vw对比2.4 flex的弹性布局 1 布局视口和视觉视口 1.1 设置移动端布局视口宽度 避免布局视口宽度默认980px带了的缩放问题,并且禁止…...

编程日记 2023/5/6 5:20:16

平衡二叉树旋转机制

概念 平衡二叉树的旋转机制是一种通过对树进行旋转操作来保持其平衡的方法。 分类 平衡二叉树的旋转机制包括两种基本类型的旋转&#xff1a;左旋和右旋&#xff0c;以及它们的组合。 左旋 左旋是将一个节点的右子节点旋转到它的位置上&#xff0c;同时将该节点移到其左侧&…...

编程日记 2023/5/6 5:15:14

深入浅出C++ ——C++11

文章目录 一、C11简介二、列表初始化二、声明四、范围for循环五、STL中的变化六、右值引用和移动语义1. 什么是左值&#xff1f;什么是左值引用&#xff1f;2. 左值引用与右值引用比较3. 右值引用使用场景和意义4. 完美转发 新的类功能默认成员函数类成员变量初始化defaultdele…...

编程日记 2023/5/6 5:10:13

智能座舱3.0阶段，看全球巨头如何打造更具“价值”的第三空间

面向中国这一全球最大的汽车电动化与智能化单一市场&#xff0c;作为全球第七大汽车技术供应商的FORVIA佛瑞亚集团开始全面发力。 在2023年上海国际车展上&#xff0c;FORVIA佛瑞亚携旗下佛吉亚与海拉一系列突破性技术和互动体验亮相&#xff0c;展示了对电气化与能源管理、安…...

编程日记 2023/6/1 2:20:43

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/2/8 8:16:14

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/9 6:43:47

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/2/8 9:34:11

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2026/1/25 14:31:47