HTML基础知识②（用于vscode 零基础小白)

最新推荐文章于 2023-04-12 21:19:34 发布

VIP文章小小程序喵

最新推荐文章于 2023-04-12 21:19:34 发布

阅读量242

点赞数

分类专栏： HTML 文章标签： html5 css 前端 html

本文链接：https://blog.csdn.net/LYP211985/article/details/119058419

版权

HTML和CSS写在不是同一个文件时：

不在同一个文件时，需要引用外部资源

在head里面引入外部资源的时候使用的是link标签href属性表示资源路径，rel表示引入东西的类型

<!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>导航栏</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

实质上就是在html用link来插入外部资源css,而css也需要重新创建一个后缀为css的文件（如下图），方便插入

插入的css

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

ul.nav {
    margin: 100px auto 0;
    width: 600px;
    height: 60px;
    border: 1px solid tomato;
    cursor: pointer;
}

ul.nav li {
    width: 100px;
    line-height: 60px;
    float: left;
    text-align: center;
}

ul.nav li:hover {
    background-color: pink;
}

ul.nav li.current {
    background-color: tomato;
}

ul.content {
    width: 600px;
    height: 300px;
    border: 1px dashed orangered;
    margin: 0 auto;
    position: relative;
}

ul.content li {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    text-align: center;
    line-height: 300px;
}

ul.content li.current

最低0.47元/天解锁文章

小小程序喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识②（用于vscode 零基础小白)

HTML和CSS写在不是同一个文件时：不在同一个文件时，需要引用外部资源在head里面引入外部资源的时候使用的是link标签href属性表示资源路径，rel表示引入东西的类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ..
复制链接

扫一扫