龙空技术网

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

无病呻吟的现代诗人 1293

前言:

而今你们对“css写在哪里好”大致比较看重,你们都想要分析一些“css写在哪里好”的相关资讯。那么小编在网络上搜集了一些关于“css写在哪里好””的相关资讯,希望大家能喜欢,看官们一起来学习一下吧!

本小节基本要求:

了解标签的父子关系

要点:

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文件

下一篇:完结一个网站的头部编写:

标签: #css写在哪里好 #css设置偏右 #html改变图片的位置 #css的格式设置代码位于什么位置 #css图片居右怎么设置