跟着pink老师前端入门教程-day21

5.4 常见flex布局思路

5.5 背景线性渐变

语法:

background: linear-gradient( 起始方向 , 颜色 1, 颜色 2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);

背景渐变必须添加浏览器私有前缀

起始方向可以是: 方位名词 或者 度数 , 如果省略默认就是 top

    <title>背景线性渐变</title><style>div {width: 600px;height: 200px;/* background: linear-gradient(起始方向, 颜色1, 颜色2, ...); *//* background: -webkit-linear-gradient(left, red, blue); *//* background: -webkit-linear-gradient(left top, red , blue); */}</style>
</head><body><div></div>
</body>

15-焦点图focus模块制作_哔哩哔哩_bilibili

16-local-nav布局_哔哩哔哩_bilibili

17-local-nav内容制作_哔哩哔哩_bilibili

18-利用属性选择器更换背景图片_哔哩哔哩_bilibili

19-nav外观布局_哔哩哔哩_bilibili

20-nav内容制作_哔哩哔哩_bilibili

21-背景渐变linear-gradient_哔哩哔哩_bilibili

22-subnav-entry模块制作_哔哩哔哩_bilibili

23-热门活动模块制作_哔哩哔哩_bilibili

24-更多福利模块制作_哔哩哔哩_bilibili

25-sales-bd模块制作_哔哩哔哩_bilibili

三、移动WEB开发之rem布局

1、rem 基础

1.1 rem单位

rem (root em)是一个相对单位,类似于em,em是父元素字体大小。

不同的是rem的基准相对于html元素的字体大小

比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小

/* html 12px */
html {
        font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
        font-size: 2rem;
}
    <title>rem 基础</title><style>html {font-size: 14px;}div {font-size: 12px;width: 15rem;height: 15rem;background-color: sandybrown;}p {/* em 相对于父元素 字体大小来说的 120*120 *//* width: 10em;height: 10em; *//* rem相对于html元素 字体大小来说的 140*140 */height: 10rem;width: 10rem;background-color: saddlebrown;/* rem的优点:通过修改html的文字大小来改变页面中元素的大小可以整体控制 */}</style>
</head><body><div><p></p></div>
</body>

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】基础知识讲解(引用、内联、auto,基于范围for循环)

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;http://t.csdnimg.cn/eCa5z 目录 引用 概念 特性 使用场景 作参数 作返回值 传值、传引用效率比较 引用和指针的区别 内联函数 概念…

用python编写爬虫,爬取二手车信息+实验报告

题目 报告要求 工程报告链接放在这里 https://download.csdn.net/download/Samature/88805518使用 1.安装jupyter notebook 2.用jupyter notebook打开工程里的ipynb文件&#xff0c;再run all就行 注意事项 可能遇到的bug 暂无&#xff0c;有的话私信我

Unity类银河恶魔城学习记录4-1,4-2 Attack Logic,Collider‘s collision excepetion源代码 P54 p55

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Entity.cs using System.Collections; using System.Collections.Generic; u…

(十五)springboot实战——spring securtity的核心过滤器介绍

前言 本节内容主要介绍spring securtity安全框架的一些核心过滤器及其作用&#xff0c;我们都清楚spring securtity安全框架底层是基于filter过滤器实现的&#xff0c;采用的是责任链的设计模式&#xff0c;它有一条很长的过滤器链。本次spring securtity原理介绍使用的版本是…

MySQL之建表操作

华子目录 表操作创建表数据类型文本类型数值类型日期/时间类型Bit数据类型常见数据类型 MySQL存储引擎创建表的三个操作创建表时指定存储引擎&#xff0c;字符集&#xff0c;校对规则&#xff0c;行格式 查看表显示数据库中所有表显示数据库中表的信息&#xff08;表结构&#…

航芯ACM32G103开发板评测 06 1.28圆形屏幕 LVGL移植

航芯ACM32G103开发板评测 06 1.28圆形屏幕 LVGL移植 软硬件平台 航芯ACM32G103开发板1.28寸圆形彩色TFT显示屏高清IPS 模块240X240 SPI接口 GC9A01驱动芯片LVGL V8.3.1源码 LVGL LVGL&#xff08;Light and Versatile Graphics Library&#xff09;是一个免费的开源图形库&…

类与对象(终章)——友元,内部类,匿名对象

这里写目录标题 1. 友元1.2 友元函数1.3 友元类 2. 内部类3.匿名对象 1. 友元 之前实现日期类我们实现输入输出流重载的时候就已经了解了友元的概念&#xff0c;我们今天正式走进友元&#xff0c;详细地学习友元的各种特点与性质。 关键字:friend 1.2 友元函数 友元函数在重载…

基于Java学生管理系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

Springboot简单设计两级缓存

两级缓存相比单纯使用远程缓存&#xff0c;具有什么优势呢&#xff1f; 本地缓存基于本地环境的内存&#xff0c;访问速度非常快&#xff0c;对于一些变更频率低、实时性要求低的数据&#xff0c;可以放在本地缓存中&#xff0c;提升访问速度 使用本地缓存能够减少和Redis类的远…

GridModel事件集合——yonBIP低代码

我们接着看表格相关的事件&#xff0c;用友的文档打不开&#xff0c;真的是天大的404&#xff0c;客观请看这个开发文档网址&#xff0c;找不到了&#xff0c;你说holy 不咯&#xff1f;http://tinper.org/mdf/&#xff08;如果有哪位小伙伴知道这个地址是不是迁移了的话&#…

Ryzen Controller 最新版本下载

Ryzen Controller 最新版本下载 GitLab中最新版本地址&#xff1a; Releases Ryzen Controller Team / Ryzen Controller GitLab 然后语言切换成简体中文&#xff0c;就可以愉快使用啦

兼容ARM 32位架构的edgeConnector产品为用户提供新的部署选项

Softing工业将ARM 32位兼容性集成到了edgeConnector产品中&#xff0c;以满足用户对ARM处理器的边缘设备日益增长的使用需求。 &#xff08;兼容ARM 32位架构的edgeConnector产品扩展了其应用部署范围&#xff09; 用户对采用ARM处理器的紧凑型边缘设备的需求正在大幅增长&…