前端基础（CSS）——css介绍 常用样式 案例—进化到Bootstrap——进化到Element-UI（未完待续）

news2024/11/23 22:40:12

目录

  • 引出
  • CSS相关
    • 1.css写在哪里？
    • 2.css的选择器【重要】
      • （1）标签选择器---div{}
      • （2）id选择器----#div01{}
      • （3）类选择器---class="div01"，.dav01{}
      • （4）后代选择器----div p{}
      • （5）子选择器，选中div里的input框，不包括孙子类----div>input{}
      • （6）并集选择器----div,p,h1{}
      • （7）伪类标签----a:hover{}
    • 3.常用样式
      • （1）首行缩进&+nbsp;到text-indent: 2em；
      • （2）把a标签变成点击框的案例
      • （3）把背景设置成一张图片body{}
      • （4）给body加个有圆弧的虚线
      • （5）表格的美化显示案例
  • Bootstrap相关
    • 1.初识Bootstrap
    • 2.导包---从html到jsp
  • 总结

引出

css是什么，层叠样式表，

css作用：让html网页有布局，变漂亮

CSS相关

参考w3school

1.css写在哪里？

以p标签为例，

序号位置优先级
1写在p标签内最高
2写在style内第二
3写在link内最低
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/tianju.css">
    <style>
        p{color: yellow}
    </style>
</head>
<body>
<div>
    <p>一个段落</p>
</div>

<p style="color: red">p标签</p>

<!--优先级：内部最高，写在style中第二，写在link里最低-->

</body>
</html>

在这里插入图片描述

2.css的选择器【重要】

（1）标签选择器—div{}

标签选择器，选择html文档中所有的div，对所有的div进行设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*<!--       标签选择器，选择html文档中所有的div，对所有的div进行设置 -->*/
        div{
            width: 200px;
            height: 20px;
            background-color: darkred;
        }

    </style>

</head>
<body>
<div>
<!--    特点，独占一行-->
    我是一个div
</div>

<h1>我是一个标题</h1>
<div>
    我是第二个div
</div>

</body>
</html>

在这里插入图片描述

（2）id选择器----#div01{}

符号 # 表示 id选择器，id是不允许重复的，id是唯一的标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    
        #div01{
            width: 200px;
            height: 200px;
            background-color: darkred;
        }
        #div02{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }

    </style>
</head>

<body>
<div id="div01">
<!--    特点，独占一行-->
    我是一个div
</div>

<div>
    我是第二个div
</div>

<div id="div02">
    我是第二个div
</div>


</body>
</html>

在这里插入图片描述

（3）类选择器—class=“div01”，.dav01{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div01{
            width: 200px;
            height: 20px;
            background-color: cornflowerblue;
        }
        .div02{
            width: 200px;
            height: 20px;
            background-color: yellow;
            border: 10px solid rgba(0, 255, 204, 0.77);
        }
    </style>
</head>

<body>
<p class="div01">这是一个段落</p>

<div class="div01">
    第一类1
</div>

<div class="div01">
    第一类2
</div>

<div class="div02">
    第三类1
</div>

<div class="div02">
    第三类2
</div>


</body>
</html>

在这里插入图片描述

（4）后代选择器----div p{}

选中div内部的p设置样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    如果只想给里面的div设置-->
    <style>
        /*选中div里面所有的p标签*/
        div p{
            height: 50px;
            width: 200px;
            background-color: cornflowerblue;
        }
        div input{
            height: 20px;
            background-color: azure;
        }
    </style>
</head>

<body>
<p>
    <input type="text" value="2">
</p>

<div>
    <input type="text" value="1">
    <p>
        <input type="text" value="2.1">
    </p>
    <input type="text" value="3">
    <p>
        <input type="text" value="2.2">
    </p>
</div>

<input type="text" value="4">

<p>
    <input type="text" value="2">
</p>

</body>
</html>

在这里插入图片描述

（5）子选择器，选中div里的input框，不包括孙子类----div>input{}

如果只想给div里面的input框设置样式，不想给里面的里面设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    如果只想给里面的div设置-->
    <style>
        /*选中div里面所有input框，但不包括孙子类*/
        div > input{
            height: 20px;
            background-color: azure;
        }
    </style>
</head>

<body>
<div>
    <input type="text" value="1">
    <p>
        <input type="text" value="2">
    </p>
    <input type="text" value="3">
</div>
<input type="text" value="4">
</body>
</html>

在这里插入图片描述

（6）并集选择器----div,p,h1{}

一次选择多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p,h1{
            background-color: deepskyblue;
            width: 300px;
            height: 50px;
        }
    </style>
</head>

<body>
<div>
    <input type="text" value="1">
    <p>
        <input type="text" value="2">
    </p><hr>
    <input type="text" value="3">
</div><hr>
<p>p标签</p><hr>
<h1>h1标签</h1>

<input type="text" value="4">

</body>
</html>

（7）伪类标签----a:hover{}

  • link：初始化的状态
  • visited：被访问过的状态
  • active：正在访问状态
  • hover：鼠标悬浮状态
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  <style>
    a:link {
      color: #0033ff;
      text-decoration: none;
    }
    a:visited {
      color: yellow;
    }
    a:hover {
      text-decoration: none;
      color: green;
    }
    a:active {
      color: aqua;
    }
  </style>
</head>
<body>

<a href="cssDemo/12.a标签案例.html" target="_blank">去百度</a>

</body>
</html>

案例2：图片跳动一下，表格鼠标放上去高亮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移上变化</title>
    <style>
        /*鼠标初始化状态*/
        a:link{
            /*background-color: rosybrown;*/
            text-decoration: none;
        }
        /*鼠标移上去变色*/
        a:hover{
            color: red;
            text-decoration: rgba(0, 0, 255, 0.7);
        }
        a:active{
            color: aqua;
        }


        /*鼠标以上去变大*/
        #imgTree:hover{
            width: 120px;
        }
        tr:hover{
            color: yellow;
        background-color: darkred}


    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a><br>
<img id="imgTree" src="../img/tree.png" width="100px">
<hr>
<br>
<table>
    <tr>
        <td>id</td>
        <td>名字</td>
        <td>价格</td>
    </tr>
    <tr>
        <td>1</td>
        <td>vivo</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>哈哈哈</td>
        <td>200</td>
    </tr>

</table>
</body>
</html>

在这里插入图片描述

3.常用样式

（1）首行缩进&+nbsp;到text-indent: 2em；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            font-size: 50px;
            font-family: 微软雅黑;
            font-weight: 700;
            font-style: oblique;
        }
        p{
            /*默认字体带下是16，空两个就是32*/
            /* &nbsp; */
            text-indent: 32px;
            /* 2em 可以解决字体大小的问题*/
            text-indent: 2em;

        }
    </style>
</head>
<body>
<span>
    &nbsp;&nbsp;&nbsp;我的饿啦啦啦姐大富科技阿卡丽的减法卡克
</span>
<p>
    摄图网是一家专注于正版摄影高清图片素材免费下载的图库作品网站,提供手绘插画,海报,ppt模板,科技,城市,商务,建筑,风景,美食,家居,外景,背景等好看的图片设计素材大全可供下载。摄图摄影师5000+入
</p>
</body>
</html>

在这里插入图片描述

（2）把a标签变成点击框的案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */
    a {
      /*  没有下划线*/
      text-decoration: none;
      width: 100px;
      height: 50px;
      background-color: red;
      /*  默认不可设置宽高，加了这个
      a标签的显示 宽高*/
      display: inline-block;
      /*  字的颜色*/
      color: #fff;
      text-align: center;
      line-height: 50px;
    }

    a:hover {
      /*  鼠标过来黄色*/
      background-color: orange;
    }
  </style>
</head>

<body>
<a href="1.入门案例1.html">百度</a>
<a href="2.标签选择器.html">必应</a>
</body>
</html>

（3）把背景设置成一张图片body{}

    <style>
        /*设置背景颜色*/
        body{
            background-image: url("../img/paper.jpg");
        }
    </style>

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*设置背景颜色*/
        body{
            background-image: url("../img/paper.jpg");
        }
    </style>
</head>
<body>
<div>
    <h1>hello</h1>
    <p>浅色背景</p>
</div>

</body>
</html>

（4）给body加个有圆弧的虚线

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            width: 300px;
            height: 100px;
            border: 1px dashed blue;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div>

</div>
<h1>我是标题</h1>
</body>
</html>

（5）表格的美化显示案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            /*两个边框合并到一个里面*/
            border-collapse: collapse;
            width: 100%;
        }
        th,td{
            /*内边距*/
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        tr:hover{background-color: #f5f5f5;}
    </style>
</head>
<body>
<table>
    <h1>可悬停表格</h1>
    <p>将鼠标移到表格行上可以查看效果。</p>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>Bill</td>
        <td>Gates</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>Steve</td>
        <td>Jobs</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>Elon</td>
        <td>Musk</td>
        <td>$300</td>
    </tr>
    <tr>
        <td>Mark</td>
        <td>Zuckerberg</td>
        <td>$250</td>
    </tr>
</table>
</body>
</html>

Bootstrap相关

1.初识Bootstrap

官网文档：单击访问

在这里插入图片描述

在webStorm中新建一个项目，把下载的文件解压，找到dist目录，将这个目录拷贝到项目中，并把文件夹改名为bootstrap,因为使用bootstrap需要用到jquery的js文件，所以在项目根目录下新建一个js目录，将提供的jquery-3.4.1.min.js文件，拷贝到此目录下，最终的目录结构如下:

在这里插入图片描述

几个要点：

  • 上线用min版，平时用另一版；
  • 要先导jquery包后导bootstrap包；

2.导包—从html到jsp

    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

在jsp中：
在这里插入图片描述

    <link rel="stylesheet" href="/day06/bootstrap/css/bootstrap.css">
    <script src="/day06/js/jquery-3.5.1.js"></script>
    <script src="/day06/bootstrap/js/bootstrap.js"></script>

总结

未完待续~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/612895.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

saas产品私有化(一) 缓存中间件适配

saas产品私有化(一) 缓存中间件适配

一.背景 名词解释:私有化一般指的是在对客交付过程中,客户由于自身数据敏感,成本控制等原因要求交付乙方将售卖的服务利用现有甲方的硬件设备或者云服务进行服务的部署. 面向场景:一般特制的是saas化的云服务软件提供商的对特殊客群的场景.其中saas行业中比较起步和规模比较大的…
阅读更多...
流氓软件篡改微软EDGE浏览器主页面的那些伎俩

流氓软件篡改微软EDGE浏览器主页面的那些伎俩

微软的EDGE浏览器很好用&#xff0c;但也很容易被绑架&#xff0c;在网上下载各类免费软件&#xff0c;只要你安装完&#xff0c;十有八九就给你把主页改成某某导航了。尽管打开EDGE直接进入360、毒霸、好123等链接对上网影响也不大&#xff0c;打开这些导航页面后&#xff0c;…
阅读更多...
IMX6ULL裸机篇之I2C实验主控代码说明二

IMX6ULL裸机篇之I2C实验主控代码说明二

一. I2C实验 I2C实验内容&#xff1a; 学习如何使用 I.MX6U 的 I2C 接口来驱动 AP3216C&#xff0c;读取 AP3216C 的传感器数据。 I2C读写数据时序图&#xff1a; I2C写数据时序图如下&#xff1a; I2C读数据时序图如下&#xff1a; 二. I2C主控读写时序 1. 读数据与写数…
阅读更多...
MMDetection学习记录（二）之配置文件

MMDetection学习记录（二）之配置文件

文件结构 config文件 在 config_base_ 文件夹下有 4 个基本组件类型&#xff0c;分别是&#xff1a;数据集(dataset)&#xff0c;模型(model)&#xff0c;训练策略(schedule)和运行时的默认设置(default runtime)。 命名风格 {model}_[model setting]_{backbone}_{neck}_[no…
阅读更多...
微信小程序项目实例——密码管理器

微信小程序项目实例——密码管理器

今日推荐&#x1f481;‍♂️ 自疫情后武林广场的音乐喷泉再次开启⛲⛲⛲ 坐在最佳视角下观赏了一场久违的表演&#x1f386;&#x1f386;&#x1f386; &#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;往期优质项目实例&#x1f52e;&#x1f52e;&…
阅读更多...
在三台Linux虚拟机上完成构建集群的前置准备

在三台Linux虚拟机上完成构建集群的前置准备

前言 从现在开始进入到实操阶段&#xff0c;将要在VMware软件中创建多台Linux虚拟机&#xff0c;并进行系统设置。 需要同学们拥有前置知识&#xff1a; VMware的使用经验&#xff0c;知道什么是虚拟机并在VMware中创建过Linux虚拟机&#xff08;CentOS系统&#xff09; 熟…
阅读更多...
go语言学习——8

go语言学习——8

文章目录 文件操作打开文件文件读取写文件判读文件或文件夹是否存在拷贝文件统计文件字符命令行参数flag包解析命令行参数 文件操作 os.File封装所有文件相关操作&#xff0c;File是一个结构体 打开文件 package mainimport ("fmt""os" )func main() {file…
阅读更多...
重载运算符三个const的作用

重载运算符三个const的作用

const Point operator(const Point &point) const{ } 尝试去理解const,然后搞懂为什么这里放置const。 const 用于修饰其后面跟着的名字&#xff0c;使其为常量&#xff0c;不可被修改。 1.第一个const 的位置后面是函数返回值类型&#xff0c;表明函数返回的是常量&#…
阅读更多...
Yolov8涨点神器：创新卷积块NCB和创新Transformer 块NTB,助力检测，提升检测精度

Yolov8涨点神器：创新卷积块NCB和创新Transformer 块NTB,助力检测，提升检测精度

🏆🏆🏆🏆🏆🏆Yolov8魔术师🏆🏆🏆🏆🏆🏆 ✨✨✨魔改网络、复现前沿论文，组合优化创新 🚀🚀🚀小目标、遮挡物、难样本性能提升 🍉🍉🍉定期更新不同数据集涨点情况 本博客将具有部署友好机制的强大卷积块和变换块，即NCB和NTB，引入到yolo…
阅读更多...
spring源码的简单梳理之bean的初始化过程

spring源码的简单梳理之bean的初始化过程

我们都知道spring中最核心的就是容器的概念&#xff0c;而交于spring管理的对象称为bean对象。在spring中我们这次以xml配置bean的方式进行简单模拟spring创建bean的初始化过程。 1、首先我们先来一起研究一下一个xml文件中bean的结构。 我们可以看到一个bean是一个标签所扩住…
阅读更多...
【STM32CubeMX】WS2812彩灯

【STM32CubeMX】WS2812彩灯

前言 有时间我就按照网上的时序推理了WS2812的传输时序。之前就推过时序了&#xff0c;但是当时时序好像没对&#xff0c;因为没用逻辑分析仪查看&#xff0c;就以为通过电片机的运行主频&#xff0c;在控制NOP&#xff0c;就能得到us级的延时控制&#xff0c;但是真实的情况是…
阅读更多...
EBU6304 Software Engineering 知识点总结_5 项目管理_上

EBU6304 Software Engineering 知识点总结_5 项目管理_上

Software architecture 功能需求和软件架构关系紧密&#xff0c;非功能需求是软件架构的选择结果&#xff08;好的架构运行效率高之类的&#xff09;。可以以表格或图的形式&#xff0c;比如UML图。 设计难以更改。敏捷开发的早期阶段就是设计系统架构。 好处&#xff1a; …
阅读更多...
MMDet3D——数据增强Pipline‘GlobalRotScaleTrans‘和‘RandomFlip3D‘的Pytorch逆变换实现

MMDet3D——数据增强Pipline‘GlobalRotScaleTrans‘和‘RandomFlip3D‘的Pytorch逆变换实现

在点云的3D感知算法中&#xff0c;常用RandomFlip3D和GlobalRotScaleTrans的数据增强方式&#xff0c;这两个可以有效地增强模型的鲁棒性&#xff0c;提升模型的性能。 transforms[dict(typeRandomFlip3D,sync_2dFalse,flip_ratio_bev_horizontal0.5,flip_ratio_bev_vertical0.…
阅读更多...
Qt问题：Qt槽函数是否支持内联？

Qt问题：Qt槽函数是否支持内联？

Qt的信号和槽机制是基于Qt的元对象系统的&#xff0c;这个系统提供了一种在运行时获取对象信息的能力&#xff0c;如类名、信号和槽的数量和类型等。这个系统通过Qt的元对象编译器&#xff08;moc&#xff09;在编译时生成额外的代码来实现。 当一个信号被发射时&#xff0c;Q…
阅读更多...
独立站电商优选的客服工具

独立站电商优选的客服工具

遇到难题&#xff0c;寻找在线客服肯定是解决问题的首选途径了。但大多数独立站跨境电商网站的客服响应速度很难达到及时响应&#xff0c;一般普遍响应的时间从十几分钟到几小时、几十小时不等&#xff0c;甚至还有客服处于‘失联’状态。 去年黑五大促&#xff0c;Louella在某…
阅读更多...
SpringCloud Alibaba Nacos学习

SpringCloud Alibaba Nacos学习

SpringCloud Alibaba Nacos 文章目录 SpringCloud Alibaba Nacos1 Nacos 是什么&#xff1f;2 服务提供者 service-provider-nacos 配置3 服务消费者&#xff1a;server-consumer-nacos 配置 1 Nacos 是什么&#xff1f; 一句话: Nacos 就是注册中心[替代 Eureka]配置中心[替代…
阅读更多...
如何进行代码数据算法测试

如何进行代码数据算法测试

在此数据科学和机器学习教程中&#xff0c;获取有关如何从头到尾创建和运行分类模型的动手示例。本教程涵盖以下步骤&#xff1a; 数据探索数据预处理拆分数据以进行训练和测试准备分类模型使用管道组装所有步骤训练模型对模型运行预测评估和可视化模型性能 建立 本教程包括…
阅读更多...
解决 MacOS BigSur JD-GUI 打开失败的问题

解决 MacOS BigSur JD-GUI 打开失败的问题

前言JD-GUI是一款轻量级的 Java 反编译工具&#xff0c;对于一些没有源码的 Jar 包&#xff0c;直接拖进去就可以反编译源码&#xff0c;十分的方便。 在 MacOS 还是 Mojave 的时候&#xff0c;JD-GUI(下载地址)使用一切正常。 (apkTool下载地址 https://bitbucket.org/iBotP…
阅读更多...
c++学习——运算符重载

c++学习——运算符重载

运算符重载 **运算符重载的概念****加号运算符重载****减号运算符重载****左移运算符重载****右移运算符重载****赋值运算符重载****关系运算符重载****前置加加和后置加加** 运算符重载的概念 1.运算符重载&#xff0c;就是对已有的运算符重新进行定义&#xff0c;赋予其另一…
阅读更多...
Spring Boot 框架整体启动流程详解

Spring Boot 框架整体启动流程详解

基于Spring Boot 版本&#xff1a;3.1 Java: 17 Spring Boot 的入口即为xxApplication类的main方法&#xff1a; SpringBootApplication public class SpringBootDemoApplication {public static void main(String[] args) {SpringApplication.run(SpringBootDemoApplication.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023