Java学习笔记 第十三章 CSS
2021/6/13 22:21:37
本文主要是介绍Java学习笔记 第十三章 CSS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
JAVA学习笔记第十三章
13.CSS
13.1CSS书写方式
【1】内联样式
【2】内部样式
【3】外部样式
有多个html页面需要用到该样式,可以在css文件夹下新建css文件mystyle.css
在html文件中通过link导入css
【4】实际开发中常用第三种方式,这种方式真正做到了元素页面和样式分离
【5】三种方式的优先级:就近原则
13.2选择器和样式
13.2.1基本选择器
【4】优先级别:id选择器>class选择器>元素选择器
13.2.2关系选择器
13.2.3属性选择器
13.2.4伪类选择器
13.2.5模拟百度首页
13.2.6浮动
代码:
效果:
给绿色和橙色div加上浮动的效果:float: left
给黄色div设置浮动效果:
现在在大的div下面添加一个div
用浮动要考虑影响,看看是否对其他元素造成影响
消除浮动影响:
- 方式一:添加overflow: hidden
- 方式二:添加高度
- 方式三:对需要消除浮动影响的div加上clear: both
13.2.7定位
【1】静态定位static:一般静态定位可以不写static
【2】相对定位relative:优先级:左上>右下
应用场合:
- 元素在小范围移动的时候
- 结合绝对定位使用
z-index的使用:相对于屏幕的方向是z轴,可以控制那个在上层、下层
【3】绝对定位absolute:
为了使蓝色的方块在粉色块内移动,在outer可以设置一个相对定位
这个绝对定位会先向上一层一层找父节点是否有定位,找到body也没有定位的话,会相对body进行绝对定位
如果父级点有相对定位、绝对定位、固定定位,但是一般会配合父级为相对定位,当前元素为绝对定位,这样当前元素会围绕父级元素位置进行变化。且都会释放原来的位置,其他元素会占用原来的位置。
开发中:父级结点使用relative,子级结点使用absolute
【4】固定定位fixed:
右侧的导航栏
应用场合:在页面过长的时候,将某个元素固定在浏览器的位置上,当拉动滚动条的时候,这个元素的位置不动
13.3盒子模型
理解蓝色区域为一个盒子
案例:12306
这篇关于Java学习笔记 第十三章 CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门:从零开始的编程之旅
- 2024-11-23Java创业入门:新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门:初学者的简单教程
- 2024-11-23JAVA副业入门:初学者的实战指南