第六次记录,利用CSS调整样式位置
liuian 2025-04-26 19:23 39 浏览
本小节基本要求:
- 了解标签的父子关系
要点:
1、如何对父标签下的子标签进行样式修改
2、display-inline-block;
3、绝对定位absolute
4、margin与padding
5、以上是关键,其余的代码都是细节。
目前样式
目标样式
Step1:将竖的文字变为横着的文字
术语就是块级别变为行级别。
可以这么理解,挤在一起的文字就是一小块,就是块级。
将文字变为一个横线的时候,就意味着变成一行了,就是行级。
在header.css文件中写以下代码
nav ul li {
display: inline-block;
}看上篇写过的代码结构可以发现,ul标签是nav标签的子标签,li标签是ul标签的子标签。
所以这里的意思是:
- nav下的ul,ul下的所有li 标签,都加入一个样式-----》就是 display : -inline-block;
- 因为是编程都是英文,可以试着翻译一下这个代码----》 展示:在一行-块级
- 本质就是改变了文字的展示方式
右键run,运行看效果
代码就一行,实用性却很强!
Step2:除了第一个li标签中的文字(得之我幸)外,将其它的文字移到最右边
这又是一个关键点,其实也就一行代码,实用性极强。
在header.css文件中再写如下代码
nav ul li:first-child{
margin-right: 70%;
}这里的意思是:
- nav标签下的ul标签,ul标签下的li标签,选出li标签中的第一个
- 这第一个标签就是 <li><a>得之我幸</a></li>
- 选中它做了一件事情,给它加入一行代码,margin-right:70%;
可以翻译一下意思:边缘-右边:百分之70;
本质上就是,第一个li标签右边需要挪出70%的空间。
整个网站是100%的空间,第一个li与其它li标签之间要空出70%的空间。
右键run,看效果
到了这里除了一些细节之外,其实网站的头部就完成了。
总共算起来就没多少代码;
以下是我的header.css文件
下一篇:完结一个网站的头部编写:
https://www.toutiao.com/i6962665653648065061/
相关推荐
-
- 4000台式电脑最好的组装配置
-
四千元价格组装电脑主机与五千元组装电脑主机的价格类似,因为电脑主机就几个大部件,电脑主机主板是多少代的产品?主板内存的插槽数?电脑处理器等如果是自己组装,都可以配置到十二代产品,电脑硬盘可以分为256G固态硬盘做系统盘,1T机械硬盘作为工作...
-
2025-11-06 20:05 liuian
- linux是一种什么系统(linux属于什么系统)
-
Linux,全称GNU/Linux,是一种免费使用和自由传播的类UNIX操作系统,是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。其内核由林纳斯·本纳第克特·托瓦兹于1991年1...
- 手机管理大师免费版(手机管理大师极速版)
-
使用手机“文件管理”打开文件夹时提示访问受限,需要前往“文件”应用查看1.进入手机设置——安全——应用权限——权限/应用2.在手机桌面找到手机管家——权限隐私——应用权限——权限/应用?当然,相对于被...
- 电脑能开机但是进不去桌面怎么办
-
打开任务管理器按Ctrl+Shift+Esc打开任务管理器。文件中运行新任务点击文件,运行新任务。输入指令重启桌面输入explorer.exe,点击确定,等待桌面重启完成就可以了。电脑已经是我们生活中...
- 怎样解除自动关机模式(怎样解除自动开关机)
-
1、打开手机主界面,找到系统自带的“时钟”应用,点击打开它。2、点击进入时钟后,点击右下角的“计时器”。3、进入到计时器后,点击“在计时结束启用雷达”这个选项。4、然后在这里,下拉到最下面,勾选“停...
- 电脑最高配置是什么配置2025
-
一,2023最新主流电脑装机配置如下。二,处理器可以使用十二代的i512400或者i512490f,内存16gb双通道,显卡rtx3060,主板可以使用b660m或者h610m。三,如果十三代酷睿...
- MySQL慢查询优化:从explain到索引,DBA手把手教你提升10倍性能
-
数据库性能是应用系统的生命线,而慢查询就像隐藏在系统中的定时炸弹。某电商平台曾因一条未优化的SQL导致订单系统响应时间从200ms飙升至8秒,最终引发用户投诉和订单流失。今天我们就来系统学习MySQL...
- 一文读懂SQL五大操作类别(DDL/DML/DQL/DCL/TCL)的基础语法
-
在SQL中,DDL、DML、DQL、DCL、TCL是按操作类型划分的五大核心语言类别,缩写及简介如下:DDL(DataDefinitionLanguage,数据定义语言):用于定义和管理数据库结构...
- 闲来无事,学学Mysql增、删,改,查
-
Mysql增、删,改,查1“增”——添加数据1.1为表中所有字段添加数据1.1.1INSERT语句中指定所有字段名语法:INSERTINTO表名(字段名1,字段名2,…)VALUES(值1...
- 数据库:MySQL 高性能优化规范建议
-
数据库命令规范所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用MySQL保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来)数据库对象的命名要能做到见名识意,...
- 下载工具合集_下载工具手机版
-
迅雷,在国内的下载地位还是很难撼动的,所需要用到的地方还挺多。缺点就是不开会员,软件会限速。EagleGet,全能下载管理器,支持HTTP(S)FTPMMSRTSP协议,也可以使用浏览器扩展检测...
- mediamtx v1.15.2 更新详解:功能优化与问题修复
-
mediamtxv1.15.2已于2025年10月14日发布,本次更新在功能、性能优化以及问题修复方面带来了多项改进,同时也更新了部分依赖库并提升了安全性。以下为本次更新的详细内容:...
- 声学成像仪:泄露监测 “雷达” 方案开启精准防控
-
声学成像仪背景将声像图与阵列上配装的摄像实所拍的视频图像以透明的方式叠合在一起,就形成了可直观分析被测物产生状态。这种利用声学、电子学和信息处理等技术,变换成人眼可见的图像的技术可以帮助人们直观地认识...
- 最稳存储方案:两种方法将摄像头接入威联通Qu405,录像不再丢失
-
今年我家至少被4位邻居敲门,就是为了查监控!!!原因是小区内部监控很早就停止维护了,半夜老有小黄毛掰车门偷东西,还有闲的没事划车的,车主损失不小,我家很早就配备监控了,人来亮灯有一定威慑力,不过监控设...
- 离岗检测算法_离岗检查内容
-
一、研发背景如今社会许多岗位是严禁随意脱离岗位的,如塔台、保安室、监狱狱警监控室等等,因为此类行为可能会引起重大事故,而此类岗位监督管理又有一定困难,因此促生了智能视频识别系统的出现。二、产品概述及工...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)
