2021-05-25

最新推荐文章于 2024-09-17 22:59:44 发布
最新推荐文章于 2024-09-17 22:59:44 发布
阅读量94 收藏 2
点赞数 3
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ll010705/article/details/117254587
版权

基础篇
语法规范
写在中
一定要以“；”结束
color：red；
font-size：12px；
样式格式书写（强烈推荐第二种）
样式大小写（小写）
空格规范

基础选择器
    作用
    分类
        基础选择器
            标签选择器
                标签名作为选择器

            类选择器
                实现差异化
                注意
                    不能用标签定义

                修饰格子

                多类名
                    一个标签有多个类名
                    使用场景


            id选择器
                语法
                一次性的

            id选择器与类选择器的区别
            通配符选择器
                语法

            总结



字体属性
    使用方法
        CSS Font
        个个字体之间用逗号隔开
        若写了多个字体 会按照顺序以此显示（若电脑上没有第一个，则会显示第二个）

    字体大小
        标题标签比较特殊，需要单独指定大小

    字体粗细
        font-weight后面的数字不加单位
        font-weight: 700加粗400不加粗（常用）
        实际开发中更喜欢数字
        变细不加粗的方法

    文字样式
        font-style
        倾斜变倾斜

    复合属性
        顺序不可更改

    总结
        注意项


文本属性
    文本颜色

    对齐文本
        text-align仅能设置水平
        照片居中<img src="" alt="" align="center" />
        让文字在盒子中垂直居中
            让文字高度等于盒子高度
            line-heiget=height


    装饰文本
        text-decoration
        去掉链接下划线

    文本缩进
        text-indent仅限于首行缩进

    行间距.
        line-height改变上下两个间距的距离（当大于文字高度时才会增大若相等则就为文字本身）

    总结
        是
        如何使表格页面居中
            对<table>设置margin：0 auto；
            https://jingyan.baidu.com/article/295430f10dd5c94d7f005047.html



引入方式
    分类

    内部样式表
        结构仍在<html>页面内

    行内样式表
        修改一些简单的样式

    外部样式表
        开发使用多

    总结
        尽可能使用外部样式表

深入篇
Emmet语法
快速生成HTML结构语法
快速生成CSS标签
例如：w200=width：100px

    快速格式化代码
        ctrl shift+f
        如何自动格式化


CSS复合选择器
    分类

    后代选择器（重要）又称为包含选择器
        语法
        class可以给元素划类

    子元素选择器（下拉菜单时使用）
        只能选择最近一级的(会选择第一个<a>)

    举例——课堂提问
        问题一
        问题二

    并集选择器
        语法

    伪类选择器
        鼠标划过颜色改变
        ：hover—鼠标经过时
        链接伪类
            语法
            注意事项
                问题链接需单独指定
                开发中常用


        focus伪类选择器
            处理表单底色


    总结
        表


CSS的元素显示模式
    元素以什么方式进行显示

    块元素
        特点
        注意
            第二点会自动分开


    行内元素（不可设置宽度高度）
        特点
        注意

    行内元素不可放块元素
    行内块元素（双重属性）
        特点

    总结
        表

    元素显示模式的切换
        语法
            行转块
            块转行
            转换为行内块


    snipaste

CSS背景
    背景颜色
        语法

    背景图片
        场景应用
        语法

    背景平铺
        语法

    背景图片位置
        参数是方位名词
            语法格式
            注意

        参数是精确单位
            注意

        混合单位
            注意顺序关系
            应用场景


    背景图片固定
        使用场景（视差布局）
        语法

    背景复合写法
        没有固定顺序font有固定顺序

    背景色半透明
        语法

    总结
        表

    案例
        五彩导航


css三大特性
    层叠性
        原则

    继承性
        孩子继承父亲的样式高度盒子模型不会继承
        行高的继承性

    优先级
        权重依次增大
        注意（单独写时优先级最高）
        权重叠加（不会有进位）

盒子模型
盒子模型
网页布局的本质
由许许多多的盒子组成
网页布局过程

 四个组成部分
    内容
    边框border
        语法
        简写无顺序
         分开写法（层叠性）
        边框合并（若边框未合并则相邻部分像素值为其他部位的两倍）
        注意

    内边距padding
        边框与内容之间的距离
        语法
        复合写法（简写）
            语法

        注意
        案例
        特殊
            当子元素未指定宽度时会继承父级的宽度此时加上padding不会改变子元素的宽度子元素不会超过父级


    外边距margin
        语法类似于padding
        应用使块或者行元素水平居中
            条件与语法

        外边距合并
            塌陷问题


    清楚内外边距
        https://www.bilibili.com/video/BV14J4114768?p=154&spm_id_from=pageDriver
        网页元素很多都带有默认的内外边距，而且不同预览器默认的也不一致。因此我们在布局时，首先要清楚下网页元素的内外边距


ps基本操作
总结
    https://www.bilibili.com/video/BV14J4114768?p=161

 圆角 边框
    语法原理
    常用写法

盒子阴影
    语法
    注意

文字阴影
    语法

浮动
标准流：按照规定好的默认方式排列

浮动的作用

定义

浮动特性
    特性1
    特性2
    特性3（具有行内块元素的特性）

与父级搭配

注意点
    浮动和标准

父盒子一般不给高度
    让子盒子把父盒子撑开

清除浮动
    为什么清除
    清除浮动的本质
    语法
    方法
        额外标签法（隔墙法）
        父级添加overflow
        after伪元素法
        双伪元素清除浮动

    总结

ps切图
    图片样式

学成在线案例
    遵守的顺序
    整体思路
        版心也就是宽度 
        导航栏


文字环绕效果
    当给图片添加浮动时 文字会绕着图片

定位
为什么用定位
解释

组成
    重要
    定位模式
    边偏移

静态定位static（了解）
    语法

相对定位relative
    语法特点

绝对定位absolute
    语法特点

子绝父相
    子绝对父相对

固定定位fixed
    语法
    应用1
    应用2
        算法


粘性定位IE不支持（将来的发展方向）
    使用场景
    语法

总结
    表

定位叠放次序
    语法

拓展（工作中会遇到）
    算法
    特殊性
    绝对定位（固定定位）
        特点


 淘宝浮动案例
    思路

网页布局总结
    作用

元素的显示与隐藏
    dispaly
        使用场景
        语法
        注意（没了之后位置也没了）

    visibili
        语法
        注意（保留位置）

    overflow溢出
        语法
ღBug killer&
关注
(VIP-朝夕教育)2021-05-25 .NET高级班 07-Lambda表达式
微软MVP Eleven
05-25 6万+
public class LambdaShow { public delegate void NoReturnNoPara();//无参数无返回值委托 public delegate void NoReturnWithPara(string x, string y);//有参数无返回值委托 public delegate int WithReturnNoPara(); public delegate string WithReturnWithPara(out int x, r
2021-05-05
樊金良的博客
05-05 752
你需要努力，fighting！
2021-01-18
weixin_54641072的博客
01-18 1841
找程序猿哥哥！！！！编制App或者小程序
2021-05-23
qq_41758359的博客
05-23 2380
新装的Win10带有大量的实际工作和生活中不怎么常用的APP，如果觉得这些APP占用磁盘空间或者想要卸载这些应用（APP），Win10下并不能使用Windows应用管理器直接图形化地卸载这些应用，而要使用Win10自带的WindowsPowershell工具来进行应用的管理，使用下面相应的命令即可进行应用的卸载或者安装。（注：本文所列方法在Win10专业版测试通过，其他版本Windows未作测试） 一、步骤1：以管理员身份打开WindowsPowershell。 　　右击桌面工具栏最左侧的Wind...
2021-05-25 Android 有关WIFI的命令以及解决wifi异常的办法
海月汐辰
05-25 4868
一、关闭wifi命令 adb shell svc wifi disable二、打开wifi命令 adb shell svc wifi enable三、查看wifi连接状态 三、扫描热点 wpa_cli -iwlan0 scan wpa_cli -iwlan0 scan_results四、添加热点 wpa_cli -iwlan0 add_network 0 wpa_cli -iwlan0 set_network 0 ssid "fuckyouw
2021-01-04
wubaoyu123的博客
01-04 2256
博客园Logo 首页 新闻 博问 专区 闪存 班级 代码改变世界 搜索 注册 登录 返回主页 知了一笑 博客园 首页 新随笔 联系 订阅 管理 数据仓库组件：Hive环境搭建和基础用法 本文源码：GitHub || GitEE 一、Hive基础简介 1、基础描述 Hive是基于Hadoop的一个数据仓库工具，用来进行数据提取、转化、加载，是一个可以对Hadoop中的大规模存储的数据进行查询和分析存储的组件，Hive数据仓库工具能将结构化的数据文件映射为一张数据库表，并提供SQL查询功能，能将SQL语句转变成
2021-05-25：给定一个矩阵matrix，值有正、负、
福大大架构师每日一题
05-25 3968
2021-05-25：给定一个矩阵matrix，值有正、负、0，蛇可以空降到最左列的任何一个位置，初始增长值是0，蛇每一步可以选择右上、右、右下三个方向的任何一个前进，沿途的数字累加起来，作为增长值；但是蛇一旦增长值为负数，就会死去 。蛇有一种能力，可以使用一次：把某个格子里的数变成相反数，蛇可以走到任何格子的时候停止。返回蛇能获得的最大增长值。 福大大 答案2021-05-25： 动态规划。 代码用golang编写。代码如下： package main import ( "fmt" "m
2021-05-06
weixin_45779984的博客
05-06 184
计算机工程投稿过程 阶段名称 处理人 提交时间 估计完成时间 初审 编辑部 2021-02-25 2021-02-25 待交审稿费 编辑部 2021-02-25 2021-03-11 待送审 编辑部 2021-02-25 2021-03-04 外审 外审专家 2021-02-26 2021-04-07 待送修 编辑部 2021-04-14 2021-04-28 退修 责任编辑 2021-0
2021-01-05
wubaoyu123的博客
01-05 1909
博客园Logo 首页 新闻 博问 专区 闪存 班级 代码改变世界 搜索 注册 登录 踏歌行的专栏 一个爱学习爱分享的技术人员，微信公众号「OpenInfo」。 本文原创发布于公众号 OpenInfo，转载请务必注明出处！ 随笔 - 158, 文章 - 0, 评论 - 13, 引用 - 0 Kubernetes K8S之通过helm部署metrics-server与HPA详解 Kubernetes K8S之通过helm部署metrics-server与 Horizontal Pod Autoscaling (
CPU benmarks 2021-05-25.xlsx
05-25
截至2021-05-25为止，x86 CPU 性能排序数据，Excel表格格式。数据完整，统计了3000个CPU型号。数据为自行录入并排版。
CPU benmarks 2021-05-25.pdf
05-25
本文档提供了截至2021年5月25日的x86架构CPU性能排行榜。该排行榜基于PassMark软件公司提供的性能基准测试数据进行CPU性能的评估与排序。数据覆盖了3000个不同型号的CPU，并经过了作者的自行录入和排版。此次整理的...
智慧能源综合利用大数据能源综合分析示范项目实施方案[2021-05-25]（61页）.pdf
05-24
智慧能源综合利用大数据能源综合分析示范项目实施方案[2021-05-25]（61页）.pdf
css父容器溢出隐藏 子容器溢出滚动
u010234868的专栏
09-13 362
parent 容器设置了固定的宽度和高度，并且通过 overflow: hidden;隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度，则会显示滚动条，允许用户滚动查看所有内容。在父容器上设置 overflow: hidden;可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条，可以设置 overflow: auto;
HTML、CSS实现树状图
p_s_p的博客
09-09 711
【代码】HTML、CSS实现树状图。
【CSS in Depth 2 精译_032】5.4 Grid 网格布局的显示网格与隐式网格（上）
PeacefulWinter的博客
09-17 720
本篇为《CSS in Depth》全新第2版5.4小节的上篇，主要介绍了 Grid 网格布局中的显示网格（explicit grid）与隐式网格（implicit grid）的基本概念，并通过引入一个新的示例页面，详细演示并讲解了基础网格布局的实现过程，为后续隐式网格的用法做铺垫。建议收藏，并跟随本篇上传的同步源代码在本地进行验证。
css ＜样式一＞
最新发布
weixin_43689953的博客
09-17 196
盒子模型 浮动 定位
vue 实现tab菜单切换
weixin_57334661的博客
09-17 373
实现切换tab菜单，激活状态，按钮高亮，显示对应的菜单内容。
CSS 响应式设计（补充）——WEB开发系列36
一条晒干的咸鱼的博客
09-11 1203
随着移动设备的普及，网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示，还要适应不同设备的特性。
使用python中的pymsql完成如下：表结构与数据创建 1. 建立 `users` 表和 `orders` 表。 `users` 表有用户ID、用户名、年龄字段，（id，name，age） `orders` 表有订单ID、订单日期、订单金额，用户id字段。（id，order_date，amount，user_id） 2 两表的id作为主键，`orders` 表用户id为users的外键 3 插入数据 `users` (1, '张三', 18), (2, '李四', 20), (3, '王五', 22), (4, '赵六', 25), (5, '钱七', 28); `orders` (1, '2021-09-01', 500, 1), (2, '2021-09-02', 1000, 2), (3, '2021-09-03', 600, 3), (4, '2021-09-04', 800, 4), (5, '2021-09-05', 1500, 5), (6, '2021-09-06', 1200, 3), (7, '2021-09-07', 2000, 1), (8, '2021-09-08', 300, 2), (9, '2021-09-09', 700, 5), (10, '2021-09-10', 900, 4); 查询语句 1. 查询订单总金额 2. 查询所有用户的平均年龄，并将结果四舍五入保留两位小数。 3. 查询订单总数最多的用户的姓名和订单总数。 4. 查询所有不重复的年龄。 5. 查询订单日期在2021年9月1日至9月4日之间的订单总金额。 6. 查询年龄不大于25岁的用户的订单数量，并按照降序排序。 7. 查询订单总金额排名前3的用户的姓名和订单总金额。 8. 查询订单总金额最大的用户的姓名和订单总金额。 9. 查询订单总金额最小的用户的姓名和订单总金额。 10. 查询所有名字中含有“李”的用户，按照名字升序排序。 11. 查询所有年龄大于20岁的用户，按照年龄降序排序，并只显示前5条记录。 12. 查询每个用户的订单数量和订单总金额，并按照总金额降序排序。
06-03
这里是使用 Python 的 PyMySQL 完成上述任务的代码： ```python import pymysql # 连接数据库 conn = pymysql.connect(host='localhost', port=3306, user='root', password='123456', database='test') # 创建游标 cur = conn.cursor() # 创建 users 表 cur.execute(''' CREATE TABLE users ( id INT PRIMARY KEY, name VARCHAR(20), age INT ) ''') # 创建 orders 表 cur.execute(''' CREATE TABLE orders ( id INT PRIMARY KEY, order_date DATE, amount INT, user_id INT, FOREIGN KEY (user_id) REFERENCES users(id) ) ''') # 插入数据 users_data = [ (1, '张三', 18), (2, '李四', 20), (3, '王五', 22), (4, '赵六', 25), (5, '钱七', 28) ] orders_data = [ (1, '2021-09-01', 500, 1), (2, '2021-09-02', 1000, 2), (3, '2021-09-03', 600, 3), (4, '2021-09-04', 800, 4), (5, '2021-09-05', 1500, 5), (6, '2021-09-06', 1200, 3), (7, '2021-09-07', 2000, 1), (8, '2021-09-08', 300, 2), (9, '2021-09-09', 700, 5), (10, '2021-09-10', 900, 4) ] for user in users_data: cur.execute('INSERT INTO users VALUES (%s, %s, %s)', user) for order in orders_data: cur.execute('INSERT INTO orders VALUES (%s, %s, %s, %s)', order) # 提交事务 conn.commit() # 查询语句 # 1. 查询订单总金额 cur.execute('SELECT SUM(amount) FROM orders') print(cur.fetchone()[0]) # 2. 查询所有用户的平均年龄，并将结果四舍五入保留两位小数。 cur.execute('SELECT ROUND(AVG(age), 2) FROM users') print(cur.fetchone()[0]) # 3. 查询订单总数最多的用户的姓名和订单总数。 cur.execute(''' SELECT users.name, COUNT(*) AS total_orders FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_orders DESC LIMIT 1 ''') print(cur.fetchone()) # 4. 查询所有不重复的年龄。 cur.execute('SELECT DISTINCT age FROM users') print([row[0] for row in cur.fetchall()]) # 5. 查询订单日期在2021年9月1日至9月4日之间的订单总金额。 cur.execute('SELECT SUM(amount) FROM orders WHERE order_date BETWEEN "2021-09-01" AND "2021-09-04"') print(cur.fetchone()[0]) # 6. 查询年龄不大于25岁的用户的订单数量，并按照降序排序。 cur.execute(''' SELECT users.name, COUNT(*) AS total_orders FROM users JOIN orders ON users.id = orders.user_id WHERE age <= 25 GROUP BY users.id ORDER BY total_orders DESC ''') print(cur.fetchall()) # 7. 查询订单总金额排名前3的用户的姓名和订单总金额。 cur.execute(''' SELECT users.name, SUM(amount) AS total_amount FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_amount DESC LIMIT 3 ''') print(cur.fetchall()) # 8. 查询订单总金额最大的用户的姓名和订单总金额。 cur.execute(''' SELECT users.name, SUM(amount) AS total_amount FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_amount DESC LIMIT 1 ''') print(cur.fetchone()) # 9. 查询订单总金额最小的用户的姓名和订单总金额。 cur.execute(''' SELECT users.name, SUM(amount) AS total_amount FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_amount ASC LIMIT 1 ''') print(cur.fetchone()) # 10. 查询所有名字中含有“李”的用户，按照名字升序排序。 cur.execute('SELECT * FROM users WHERE name LIKE "%李%" ORDER BY name ASC') print(cur.fetchall()) # 11. 查询所有年龄大于20岁的用户，按照年龄降序排序，并只显示前5条记录。 cur.execute('SELECT * FROM users WHERE age > 20 ORDER BY age DESC LIMIT 5') print(cur.fetchall()) # 12. 查询每个用户的订单数量和订单总金额，并按照总金额降序排序。 cur.execute(''' SELECT users.name, COUNT(*) AS total_orders, SUM(amount) AS total_amount FROM users JOIN orders ON users.id = orders.user_id GROUP BY users.id ORDER BY total_amount DESC ''') print(cur.fetchall()) # 关闭游标和连接 cur.close() conn.close() ``` 注意：在运行代码之前，需要先安装 PyMySQL 模块，可以使用以下命令进行安装： ``` pip install pymysql ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值