当前位置：网站首页 > IT知识 > 正文

第六次记录，利用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/

ul li标签的作用

上一篇：小编带你分分钟了解并学会SEO
下一篇：Python3 网络爬虫:漫画下载，动态加载、反爬虫这都不叫事

第六次记录，利用CSS调整样式位置

目前样式

目标样式

Step1：将竖的文字变为横着的文字

Step2：除了第一个li标签中的文字(得之我幸)外，将其它的文字移到最右边

相关推荐

飞牛OS入门安装遇到问题，如何解决?

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

如何在 iPhone 和 Android 上恢复已删除的抖音消息

Boost高性能并发无锁队列指南:boost::lockfree::queue

大模型手册: 保姆级用CherryStudio知识库

西门子博途中如何输入读取和编辑date and time变量

我的Excel打开后是一堆乱码，如何解决?

用什么工具在Win中查看8G大的log文件?

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse