前端学习week3-程序员宅基地
CSS学习
十四.定位
9.固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position: fixed;
特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置->已脱标
应用场景：让盒子固定在屏幕的某个位置
10.定位小结
11.元素的层级关系
不同布局方式元素的层级关系：定位>浮动>标准流
不同定位之间的层级关系：相对，绝对，固定默认层级相同，写在HTML下面的元素层级高
12.更改元素层级
场景：改变定位元素的层级
属性名：z-index
属性值：数字，数字越大，层级越高
十五.装饰
1.垂直对齐方式
（1）基线
基线：浏览器文字类型元素排版中存在用于对齐的基线
行内块元素，默认基线对齐，图片默认与文字的基线对齐
（2）垂直对齐方式
属性名：vertical-align
| 属性值 | 说明 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
（3）vertical-align应用场景
- 文本框和表单按钮无法对齐问题
- input标签和img标签无法对齐
- div中的文本框，文本框无法贴顶问题
- div不设高度由img标签撑开，img标签无法贴底
- 使用line-height让img标签垂直居中问题
2.光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
| 属性值 | 说明 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
3.边框圆角
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px，百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
应用
- 画一个正圆：border-radius:50%(盒子为正方形)
- 胶囊按钮:border-radius:盒子高度的一半(盒子为长方形)
4.overflow溢出部分显示效果
溢出部分：指的是盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示，隐藏，滚动条…
属性名：overflow
| 属性值 | 说明 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
5.元素本身隐藏
场景：让某元素本身在屏幕中不可见。如：hover之后元素隐藏
常见属性：visibility: hidden，display: none
区别：
- visibility: hidden隐藏元素本身，并且在网页中占位置
- display: none隐藏元素本身，但在网页中不占位置
注意点：开发中经常会通过display属性完成元素的显示隐藏切换(display: none<->dispaly: block)
e.g. : .father:hover .son{display: block}
6.元素整体透明度
属性名：opacity
属性值：0~1之间的数字（1为完全不透明，0为完全透明
注意点：opacity会让元素整体变透明，包括里面的内容，如：文字，子元素等
7.边框合并
代码：border-collapse: collapse;
8.用CSS画三角形（面试）
实现原理：用盒子边框完成（边框实际是个梯形）
实现步骤：
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为0，仅保留边框
- 得到四个三角形，选择其中一个，将其它三角形（边框）设置颜色为透明
9.用CSS画任意三角形
原理：通过改变border-top(上边框宽度),border-right(右边框宽度),border-bottom,border-left实现
十六.伪类选择器
1.链接伪类选择器
场景：选中超链接的不同状态
| 选择器语法 | 说明 |
|---|---|
| a:link{} | 选中a链接未访问过的状态 |
| a:visited{} | 选中a链接访问之后的状态 |
| a:hover{}（多） | 选中鼠标悬停的状态 |
| a:active{} | 选中鼠标按下的状态 |
注意点：如果需要实现四种伪类状态效果，书写顺序建议为lvha
2.焦点伪类选择器
场景：选中元素获取焦点时的状态，常见用于表单控件
选择器语法：input:focus{css}
效果：表单控件获取焦点时会默认显示外部轮廓线
3.属性选择器
场景：通过元素上的HTML属性来选择元素，常用于选择input标签
| 选择器语法 | 说明 |
|---|---|
| E[attr] | 选择具有attr属性的E元素 |
| E[attr=“val”] | 选择具有attr属性并且属性值等于val的E元素 |
十七.精灵图
1.精灵图
场景：项目中将多张小图片合成大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器压力，提高页面的加载速度
使用步骤
- 创建一个盒子
- 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
- 将精灵图设置为盒子的背景图片
- 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y
2.背景图片大小
语法：background-size: 宽度 高度;
| 取值 | 说明 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相对于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子 |
| cover | 覆盖，将图片等比例缩放，直到刚好填满整个盒子没有空白 |
3.background连写拓展
完整连写：background: color image repeat position/size;
注意点：background-size和background连写同时设置时可能会覆盖
解决方法：将background-size写在background连写的下面 或写在连写的里面
4.文字阴影
属性名：text-shadow
| 取值 | 说明 |
|---|---|
| h-shadow | 必须，水平偏移量，允许负值 |
| v-shadow | 必须，垂直偏移量，允许负值 |
| blur | 可选，模糊度 |
| color | 可选，阴影颜色 |
e.g. : text-shadow: 10px 10px 5px red;
拓展：阴影可以叠加设置，每组阴影通过逗号隔开
5.盒子阴影
属性名：box-shadow
| 取值 | 说明 |
|---|---|
| h-shadow | 必须，水平偏移量 |
| v-shadow | 必须，垂直偏移量 |
| blur | 可选，模糊度 |
| color | 可选，阴影颜色 |
| spread | 可选，阴影扩大 |
| inset | 可选，将阴影改为内部阴影(扩张到图片内部) |
6.过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
| 取值 | 说明 |
|---|---|
| all：所以能过渡的属性都过渡或width：只有width有过渡 | 过渡的属性 |
| 数字+s(秒) | 过渡的时长 |
注意点：
- 过渡需要：默认状态和hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同
- 给默认状态设置，鼠标移入移出都有过渡效果
- 给hover状态设置，鼠标移入有过渡效果，移出没有
十八.项目前置认知
1.网页与网站的关系
网页：相当于每页纸
网站：相当于一本书
网页是网站的每一页
网站是提供特定服务的一组网页集合
2.骨架结构标签
<!DOCTYPE html>文档声明类型，告诉浏览器该网页的HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签
<html lang=“en”>标识网页使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN简体中文，en英文
<meta charset=“UTF-8”>标识网页使用的字符编码
作用：保存和打开的字符编码需要统一，否则会乱码
常见字符编码：
- UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
- GB2312：6000+汉字
- GBK：20000+汉字
注意点：开发中统一使用UTF-8字符编码即可
3.SEO三大标签
SEO：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
SEO三大标签：
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签
4.有语义的布局标签
注意点：以上标签显示特点和div一致，但是比div多了不同的语义
5.ico图标设置
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
常见代码：<link rel=“shortcut icon” href=“ico图标路径” type=“image/x-icon”>
6.版心
场景：把网页的主体内容束缚在网页中间
作用：让不同大小的屏幕都能看到网页的主体内容
代码：.container{width: 1240px; margin: 0 auto;}
注意点：版心类名常用：container，wrapper，w等
7.CSS书写顺序
| 顺序 | 类别 | 属性 |
|---|---|---|
| 1 | 布局属性 | display,position,float,clear,visibility,overflow |
| 2 | 盒子模型+背景 | width,height,margin,padding,border,background |
| 3 | 文本内容属性 | color,font,text-decoration,text-align,line-height |
| 4 | 点缀属性 | cursor,border-radius,text-shadow,box-shadow |
注意点：开发中推荐多用类+后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过3个
十九.项目结构搭建
1.文件和目录准备
2.基础公共样式
场景：一般项目开始时，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式
作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便项目后续开发
代码例子：
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{
/* 默认有边距，都要清除 /
margin: 0;
padding: 0;
/字体设置/
font-size: 14px;
font-family: “Microsoft Yahei”,sans-serif;
color: #ccc;
/ 去掉列表的原点 /
list-style: none;
/ 默认鼠标 */
cursor: default;
}
/可选/
html,body{
width: 100%;
height: 100%;
font-size: 100px!important;
}
/行内块元素/
input,img{
margin: 0;
padding: 0;
border: 0 none;
outline-style: none;
vertical-align: bottom;
}
/行内元素/
a,a:active,a:visited{
/下划线和颜色/
text-decoration: none;
color: #ccc;
}
a:hover{
color: #333;
}
textarea{
/* 边框清零 /
border: none;
/ 轮廓线清零 /
outline: none;
/ 防止文本域被随意拖拽 */
resize: none;
}
i{
/文字样式/
font-style: normal;
}
table{
/边框合并/
border-collapse: collapse;
border-spacing: 0;
}
/* 设置左右浮动 */
.f_l{
float: left;
}
.f_r{
float: right;
}
/* 使用伪元素清除浮动 */
.clearfix::before,
.clearfix::after{
content: “”;
height: 0;
line-height: 0;
display: block;
visibility: none;
clear: both;
}
/* 设置定位 */
.p_a{
position: absolute;
}
.p_r{
position: relative;
}
/* 版心*/
.container{
width: 1883px;
margin: 0 auto;
}
/可选/
/单选框和复选框的配置，一般是分开的/
input[type=“radio”],input[type=“checkbox”]{
appearance: none;
-webkit-appearance: none;
outline: none;
display: none;
}
label{
display: inline-block;
cursor: pointer;
}
label input[type=“radio”]+span,label input[type=“checkbox”]+span{
width: 16px;
height: 16px;
display: inline-block;
background: url(“…/images/nocheck.png”) no-repeat;
}
label input[type=“radio”]:checked+span,label input[type=“checkbox”]:checked+span{
background: url(“…/images/check.png”) no-repeat;
}
label input[type=“radio”]:checked~i,label input[type=“checkbox”]:checked~i{
color: #38d6ff;
}
/可选/
/* 自定义数字框配置 */
input[type=“number”]{
width: 76px;
height: 36px;
background-color: rgba(5,45,82,0.4);
border: 2px solid #ccc;
border-radius: 4px;
color: #fff;
font-size: 20px;
padding: 0 10px;
}
input[type=“number”]::-webkit-inner-spin-button{
-webkit-appearance: none;
}
input[type=“number”]+div{
width: 30px;
height: 40px;
padding-left: 2px;
cursor: pointer;
}
input[type=“number”]+div > .count_add{
display: block;
width: 28px;
height: 19px;
background: url(“…/images/count_add.png”) no-repeat;
background-size: contain;
margin-bottom: 2px;
}
input[type=“number”]+div > .count_subtract{
display: block;
width: 28px;
height: 19px;
background: url(“…/images/count_subtract.png”) no-repeat;
background-size: contain;
}
3.index页面骨架设置
4.header部分开发（common）
建议类名：xxx-shortcut：快捷菜单，xxx-main-nav：主导航
对于主导航的logo部分，建议用h1标签包裹
5.footer部分开发（common）
建议类名：xxx-service：宣传服务，xxx-copyright：版权信息，xxx-contact：联系方式
6.entry网站入口模块（index）
建议类名：banner：轮播图(焦点图)，category：分类侧边栏
CSS进阶
一.字体图标
1.基本使用
iconfont：阿里巴巴提供的矢量图标库
方法：
- 下载css样式表
- 引样式表：<link rel=“stylesheet” href=“iconfont.css文件的路径如：./iconfont/iconfont.css”>
- 调类名：e.g.：<i class=“iconfont 某个矢量图的类名如：icon-favorites-fill”></i>
2.iconfont类
所有iconfont的图标都属于iconfont类
修改使用的iconfont的图标：.iconfont{css}或直接设置类，直接修改标签样式
3.svg-上传矢量图
若图标库没有所需图标：
- 与设计师沟通，得到svg矢量图
- iconfont网站上传图标，下载使用
二.平面转换
1.介绍
平面转换：改变盒子在平面内的形态(位移，旋转，缩放)，2D转换
平面转换属性名：transform
2.平面转换-位移
语法：transform: translate(水平移动距离, 垂直移动距离);
取值：数字+px或百分比
注意点：
- 正负均可
- 百分比取盒子自身的长度的百分比
- x轴正方向向下
- y轴正方向向下
3.位移-技巧
translate()如果只给出一个值，只水平移动
单独设置某个方向的移动距离：translateX() & translateY()
4.平面转换-定位盒子居中
使用translate快速实现绝对定位的元素居中：
transform: translate(-50%, -50%);
本周demo
代码部分：
html部分：
css部分：
效果呈现：
智能推荐
基于SSM和MySQL的企业人事管理系统的设计与实现_基于ssm的企业人事管理系统的设计与实现参考文献-程序员宅基地
文章浏览阅读484次，点赞2次，收藏2次。管理员进入主界面，软件开始运行，提供用户登录功能，不同的用户登录操作的功 能不同，非管理员用户登录只能查看一些公告信息等，而管理员登录后，可以进行用户 管理丶部门管理、职位管理、员工管理、公告管理等功能。基于其他企业人事管理软件的不足,要求能够制作一个可以方便、快捷的对员工信 息进行添加、修改、删除的操作,为了能够更好的存储职工的信息,可以将职工的信息添 加到 Word 文档,这样,不但便于保存,还可以通过 Word 文档进行打印。员工信息的管理:维护员工的基本信息,用户可以进行员工档案信息的录入及更改,_基于ssm的企业人事管理系统的设计与实现参考文献
【C语言】手撕二叉树
【C语言】手撕二叉树
Postgresql源码（127）投影ExecProject的表达式执行分析
无论是投影还是别的计算，表达式执行的入口和计算逻辑都是统一的，这里已投影为分析表达式执行的流程。
hive启动beeline报错
出现上面的问题执行以下代码。
【Hadoop】-Hive客户端：HiveServer2 & Beeline 与DataGrip & DBeaver[14]
DataGrip是由JetBrains公司推出的数据库管理软件，DataGrip支持几乎所有主流的关系数据库产品，如DB2、Derby、MySQL、Oracle、SQL Server等，也支持几乎所有主流的大数据生态圈SQL软件，并且提供了简单易用的界面，开发者上手几乎不会遇到任何困难。3、连接成功，在里面我们可以看到我们前面章节所创建的表，这样子就可以在里面操作我们的sql语句的。5、连接成功，在里面我们可以看到我们前面章节所创建的表，这样子就可以在里面操作我们的sql语句的。
java lambda无法使用_java – 为什么不允许lambda函数？-程序员宅基地
文章浏览阅读1.2k次。我一直在Vaadin的GUI中工作,有一些来自我的IT主管的课程.这一切都很棒,但是,今天,我遇到过我不能在addListener方法类型中使用lambda表达式.此方法是自定义的,作为使用它的对象.这是实施：public class ResetButtonForTextField extends AbstractExtension {private final List listeners= n..._java: -source 1.5 中不支持 lambda 表达式
随便推点
FRTC8563时钟芯片的主要特性和应用场景
一款实时时钟（RTC）芯片，它采用SOP-8封装，这种封装形式使得芯片具有较小的体积和良好的引脚连接稳定性，便于集成到各种电子设备中。：该芯片采用低功耗技术，使得在待机状态下功耗极低，有助于延长电池寿命，特别适合用于便携式设备或长时间运行的系统。：FRTC8563基于稳定的晶振工作，能够提供准确的时钟和日历信息，包括年、月、日、星期、小时、分钟和秒等。：芯片支持较宽的电压范围，使其能够适应不同设备的电源需求。提供准确的时间戳和日历信息，支持设备的时间同步和事件记录。：在便携式仪器仪表中，由于其低功耗特性，
wetrtc简介
wetrtc简介
单片机基于ST25DV动态标签的无线通信_st25dv能量采集-程序员宅基地
文章浏览阅读651次。利用I2C有线链路，任何NFC智能手机或NFC/RFID HF专业读卡器以及MCU均可以访问存储在这些标签中的数据，并且支持掉电保存。这些标签的集成度和性价比极高，可提供丰富的功能集，适用于各种应用。此外，开发人员可从评估板、软件工具、移动应用和其他资源构成的完整生态系统中受益，从而加快应用开发速度。在物联网产品的开发过程中，物联网设备非接触式向外界提供可变的交换信息非常有必要，比如路由器向手机提供可配置的WiFi信息，巡检点向手机提供动态的传感器数据等等。_st25dv能量采集
自己搭建 Linux 服务器踩坑记录_建立服务器踩过的坑-程序员宅基地
文章浏览阅读149次。前言妈蛋，自己搭建一个Linux服务器居然能遇到这么多坑。特此整理下，方便下次遇到同样的错误时能够回过头来快速定位问题并解决问题Number 1，服务器重启之后，Xshell 连接不上注：在服务器重启之前，我只安装了 jdk ,配置了 /etc/profile 环境变量,我一直以为是这个原因，后面把jdk 配置注释掉也没用正确的方向应该是先查看 ssh 服务有没有启动键入命令systemctl status sshd.service如果你的显示跟红框一样 【dead..._建立服务器踩过的坑
MT4606-VB_MOSFET产品应用与参数解析-程序员宅基地
文章浏览阅读187次。通过控制20Vgs (±V)的门源电压，可以实现开关管的导通和截止，实现对电流的控制和开关状态的转换。MT4606详细参数说明 - 极性 N+P沟道- 额定电压 ±30V- 额定电流 9A (N沟道), -6A (P沟道)- 导通电阻 15mΩ @ 10V (N沟道), 42mΩ @ 10V (P沟道), 19mΩ @ 4.5V (N沟道), 50mΩ @ 4.5V (P沟道)- 门源电压 20Vgs (±V)- 阈值电压 ±1.65Vth (V)- 封装类型 SOP8。_mt4606
达梦启云平台中，部署使用HIVE笔记_达梦sql中hiveing-程序员宅基地
文章浏览阅读637次。启云平台部署hive_达梦sql中hiveing