null - 程序员宅基地

CSS基础笔记_css垂直二级导航条-程序员宅基地

技术标签： css 前端 css3

CSS基础笔记

1.块级标签与行级标签

1.块级标签： p div hr ul li h1-h6 table… 等等.

2.行级标签： a span img input …

块级标签与行级标签的区别：

块级标签：独占一行，可以设置宽高。

行级标签：不会换行，不能设置宽高。

img可以设置宽高。是因为它具有行内块的属性。

行与块互相转换使用display.

2.css引入方式

1.内嵌样式

2.内联样式

3.外联样式

导入样式 @import url(“文件路径”)；

使用频率比较：外联 > 内联 > 内嵌

优先级：内嵌 > 内联 > 外联

3.css的注释

注释：/* */

文档注释： /** */

4.基础选择器

选择器	解释说明
*{}	通配符选择器
元素{}	标签选择器
.类名{}	类选择器（原子类）
#id名{}	ID选择器

权重问题：id>类>标签>通配符>浏览器默认样式

5.字体样式

1.基础属性

属性名	说明	属性值
font-size	设置文字大小	可以使用相对长度单位，也可以使用绝对长度单位
font-family	设置文本字体	可以同时指定多个字体，中间以逗号隔开
font-weight	设置字体粗细	normal默认属性 bold加粗可以是单词，可以是数字100-900
font-style	字体风格	italic使用斜体样式（小众字体不支持）oblique强制定义文字倾斜

2.长度单位

相对长度单位	说明
em	相对于当前对象内文本的字体大小（相当于是正常文本大小的倍数）
px	像素，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

3.文本装饰

属性名	解释说明	属性值
text-decoration	文本装饰	none 默认值， underline定义文本字体下划线， overline定义文本字体上划线， line-through定义文本字体删除线。

4.文本对齐方式

属性名	解释说明	属性值
text-align	文本位置	center居中，left 左对齐，right 右对齐

5.行间距

属性名	解释说明
line-height	行间距，行高

6.首行缩进

属性名	属性值
text-indent	首行缩进

7.文本溢出时出现省略号

overflow:hidden; --------溢出隐藏

white-space:nowrap; --------文本变成一行显示

text-overflow:ellspsis; ---------溢出时出现省略号

**要配合使用

6.选择器

E F{ }--------派生选择器（后代）

E>F{ } -------子元素选择器

元素1，2，3{ } -------多元素组合选择器

E+F{ } ------兄弟选择器（相邻）

E~F{ }-------兄弟选择器（范围F元素全部）

！import;强制优先级

7.文字排版方式

1.文字排版方向

writing-mode：

属性值	解释说明
vertical-lr	文字从上到下，换行从左到右
vertical-rl	文字从上到下，换行从右到左

2.垂直对齐

vertical-align：

定义行内元素在容器内的垂直对齐方式

属性值	解释说明
baseline	和文字基线对齐
bottom	和文字底部对齐
top	和文字顶部对齐
middle	和文字中线对齐
super	和文字上标对齐
sub	和文字下标对齐

8.表格固定

table-layout：

属性值	解释说明
auto	默认值，单元格的大小会根据单元格里面的内容来扩大跟减小
fixed	表格固定：会把表格里面的单元格宽度按照等分来显示

word-spacing单词间隔

letter-spacing字符间隔

9.背景

1.背景颜色

background-color

背景颜色
颜色： red blue cyan yellow green gold
6位16进制颜色编码集 #FF4466
rgb(red,green,blue)

2.背景图片

background-image

background-image:url(图片路径)；

3.背景图片平铺方式

background-repeat

repeat 背景图片默认值
background-repeat:repeat;
no-repeat 背景图片不平铺，图片大小是什么就显示什么样
background-repeat: no-repeat;
repeat-x 图片在X轴显示
background-repeat: repeat-x;
repeat-y 图片在Y轴显示

4.背景图片大小

background-size

属性值	解释说明
auto	背景图片真实大小
cover	设置图片完全覆盖元素大小，
contain	设置图片完全在元素内，并尽可能的覆盖背景面积

5.背景位置

background-position

6.背景原点

background-origin

属性值	解释说明
padding-box	默认值背景从边框内的左上角作为原点
border-box	背景从边框的左上角作为原点
content	背景从显示区域内容左上角作为原点

7.背景附着

background-attachment

属性值	解释说明
fixed	设置图片相对于视口滚动（位置固定不再移动）
scroll	设置背景图片跟随对象滚动（元素滚动跟着移动）
local	元素内容滚动跟着滚动

10.列表样式

1.list-style-type

属性值	解释说明
disc	实心圆
circle	空心圆
square	实心方块
decimal	阿拉伯数字
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写英文字母
upper-alpha	大写英文字母
none	不使用项目符号

2.list-style-image

设置列表项的图片

list-style-image:url();

11.伪类选择器

属性名	解释说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标移动到链接上
:active	鼠标点击时的链接
:focus	获取焦点
:first-child	当选择器1选中的元素第一个子元素能够匹配选择器2时,给该子元素设置样式

12.块级与行级之间的转换

display:

属性值	解释说明
inline	转换为行内元素
block	转换为块级元素
inline-block	转换为行内快元素

1.元素显隐

display:

属性值	解释说明
none	元素隐藏
visibility: hidden	设置元素隐藏，但是保留位置

13.垂直二级导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
     
      
            margin: 0;
            padding: 0;
        }
        ol li{
     
      
            list-style-type: none;
        }
        .a1{
     
      
            width: 300px;
            background-color: blanchedalmond;
        }
        .a1 li{
     
      
            width: 300px;
            height: 30px;
            line-height: 30px;
            background-color: blanchedalmond;
        }
        .a1 li:hover{
     
      
            background-color: rgb(221, 145, 32);
        }
        .a2{
     
      
            width: 300px;
            margin-left: 300px;
            margin-top: -30px;
            display: none;
        }
        .a2 li,.a3 li,.a4 li,.a5 li,.a6 li{
     
      
            background-color: blueviolet;
        }
        .a2 li:hover{
     
      
            background-color: rgb(152, 138, 166);
        }
        .a1 li:hover ol{
     
      
            display: block;
        }
        .a3{
     
      
            width: 300px;
            margin-left: 300px;
            margin-top: -60px;
            display: none;
        }
        .a4{
     
      
            width: 300px;
            margin-left: 300px;
            margin-top: -90px;
            display: none;
        }
        .a5{
     
      
            width: 300px;
            margin-left: 300px;
            margin-top: -120px;
            display: none;
        }
        .a6{
     
      
            width: 300px;
            margin-left: 300px;
            margin-top: -150px;
            display: none;
        }
    </style>
</head>
<body>
    <ol class="a1">
        <li>一级导航
            <ol class="a2">
            <li>二级导航</li>
            <li>二级导航</li>
            <li>二级导航</li>
            <li>二级导航</li>
            <li>二级导航</li>
        </ol></li>
        <li>一级导航
            <ol class="a3">
                <li>二级导航</li>
                <li>二级导航</li>
                <li>二级导航</li>
                <li>二级导航</li>
                <li>二级导航</li>

本文链接：https://blog.csdn.net/weixin_52218117/article/details/126074347

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

oracle 12c 集群安装后的检查_12c查看crs状态-程序员宅基地

文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下：http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态：[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态

解决jupyter notebook无法找到虚拟环境的问题_jupyter没有pytorch环境-程序员宅基地

文章浏览阅读1.3w次，点赞45次，收藏99次。我个人用的是anaconda3的一个python集成环境，自带jupyter notebook，但在我打开jupyter notebook界面后，却找不到对应的虚拟环境，原来是jupyter notebook只是通用于下载anaconda时自带的环境，其他环境要想使用必须手动下载一些库：1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境

国内安装scoop的保姆教程_scoop-cn-程序员宅基地

文章浏览阅读5.2k次，点赞19次，收藏28次。选择scoop纯属意外，也是无奈，因为电脑用户被锁了管理员权限，所有exe安装程序都无法安装，只可以用绿色软件，最后被我发现scoop，省去了到处下载XXX绿色版的烦恼，当然scoop里需要管理员权限的软件也跟我无缘了（譬如everything）。推荐添加dorado这个bucket镜像，里面很多中文软件，但是部分国外的软件下载地址在github，可能无法下载。以上两个是官方bucket的国内镜像，所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn

Element ui colorpicker在Vue中的使用_vue el-color-picker-程序员宅基地

文章浏览阅读4.5k次，点赞2次，收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了，例如：这里的:sty..._vue el-color-picker

迅为iTOP-4412精英版之烧写内核移植后的镜像_exynos 4412 刷机-程序员宅基地

文章浏览阅读640次。基于芯片日益增长的问题，所以内核开发者们引入了新的方法，就是在内核中只保留函数，而数据则不包含，由用户（应用程序员）自己把数据按照规定的格式编写，并放在约定的地方，为了不占用过多的内存，还要求数据以根精简的方式编写。boot启动时，传参给内核，告诉内核设备树文件和kernel的位置，内核启动时根据地址去找到设备树文件，再利用专用的编译器去反编译dtb文件，将dtb还原成数据结构，以供驱动的函数去调用。firmware是三星的一个固件的设备信息，因为找不到固件，所以内核启动不成功。_exynos 4412 刷机

Linux系统配置jdk_linux配置jdk-程序员宅基地

文章浏览阅读2w次，点赞24次，收藏42次。Linux系统配置jdkLinux学习教程，Linux入门教程（超详细）_linux配置jdk

随便推点

matlab(4)：特殊符号的输入_matlab微米怎么输入-程序员宅基地

文章浏览阅读3.3k次，点赞5次，收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图：_matlab微米怎么输入

C语言程序设计-文件(打开与关闭、顺序、二进制读写)-程序员宅基地

文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件，可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中，对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数，而关闭则使用fclose函数。在C语言中，可以使用fread和fwrite函数进行二进制读写。‍ Biaoge 于2024-03-09 23:51发布阅读量：7 ️文章类型：【 C语言程序设计】在C语言中，用于打开文件的函数是____，用于关闭文件的函数是____。

Touchdesigner自学笔记之三_touchdesigner怎么让一个模型跟着鼠标移动-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏13次。跟随鼠标移动的粒子以grid（SOP）为partical（SOP）的资源模板，调整后连接【Geo组合+point spirit（MAT)】，在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in（CHOP)鼠标位置到metaball的坐标，实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动

【附源码】基于java的校园停车场管理系统的设计与实现61m0e9计算机毕设SSM_基于java技术的停车场管理系统实现与设计-程序员宅基地

文章浏览阅读178次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计

Android系统播放器MediaPlayer源码分析_android多媒体播放源码分析时序图-程序员宅基地

文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多，会从Java-&amp;gt;Jni-&amp;gt;C/C++慢慢分析，后面会慢慢更新。另外，博客只作为自己学习记录的一种方式，对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析时序图

java 数据结构与算法 ——快速排序法-程序员宅基地

文章浏览阅读2.4k次，点赞41次，收藏13次。java 数据结构与算法 ——快速排序法_快速排序法