Java学习笔记 第十三章 CSS

2021/6/13 22:21:37

本文主要是介绍Java学习笔记 第十三章 CSS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

JAVA学习笔记第十三章

13.CSS

image-20210613143628973

13.1CSS书写方式

【1】内联样式

image-20210613144039989

【2】内部样式

image-20210613144211244

【3】外部样式

有多个html页面需要用到该样式,可以在css文件夹下新建css文件mystyle.css

image-20210613144450215

在html文件中通过link导入css

image-20210613144338739

【4】实际开发中常用第三种方式,这种方式真正做到了元素页面和样式分离

【5】三种方式的优先级:就近原则

13.2选择器和样式

image-20210613144915308

13.2.1基本选择器

image-20210613145048943

image-20210613145125783

image-20210613145151725

【4】优先级别:id选择器>class选择器>元素选择器

13.2.2关系选择器

image-20210613151204849

image-20210613151359370

image-20210613151415097

13.2.3属性选择器

image-20210613151557337

13.2.4伪类选择器

image-20210613151758229

image-20210613151847419

13.2.5模拟百度首页

image-20210613185459359

image-20210613185347477

13.2.6浮动

image-20210613185635265

image-20210613190537541

image-20210613190558642

代码:

image-20210613190240400

效果:

image-20210613190215313

image-20210613190659509

image-20210613190718991

给绿色和橙色div加上浮动的效果:float: left

image-20210613190912955

给黄色div设置浮动效果:

image-20210613191012479

现在在大的div下面添加一个div

image-20210613191124815

image-20210613191146047

用浮动要考虑影响,看看是否对其他元素造成影响

消除浮动影响:

  • 方式一:添加overflow: hidden

image-20210613191337034

  • 方式二:添加高度

image-20210613191440901

  • 方式三:对需要消除浮动影响的div加上clear: both

image-20210613191530265

13.2.7定位

image-20210613192600782

【1】静态定位static:一般静态定位可以不写static

image-20210613191755899

【2】相对定位relative:优先级:左上>右下

image-20210613192031701

应用场合:

  • 元素在小范围移动的时候
  • 结合绝对定位使用

z-index的使用:相对于屏幕的方向是z轴,可以控制那个在上层、下层

image-20210613192526745

image-20210613192358398

image-20210613192452959

【3】绝对定位absolute:

image-20210613192927597

image-20210613192951153

image-20210613193042834

为了使蓝色的方块在粉色块内移动,在outer可以设置一个相对定位

image-20210613193202319

image-20210613193235014

这个绝对定位会先向上一层一层找父节点是否有定位,找到body也没有定位的话,会相对body进行绝对定位

如果父级点有相对定位、绝对定位、固定定位,但是一般会配合父级为相对定位,当前元素为绝对定位,这样当前元素会围绕父级元素位置进行变化。且都会释放原来的位置,其他元素会占用原来的位置。

开发中:父级结点使用relative,子级结点使用absolute

【4】固定定位fixed:

右侧的导航栏

image-20210613193819313

image-20210613193912756

应用场合:在页面过长的时候,将某个元素固定在浏览器的位置上,当拉动滚动条的时候,这个元素的位置不动

13.3盒子模型

理解蓝色区域为一个盒子

image-20210613194124839

image-20210613194257739

image-20210613194330259

image-20210613203653653

image-20210613204137676

image-20210613204403297

案例:12306

image-20210613204826847

image-20210613204856608

image-20210613204943652



这篇关于Java学习笔记 第十三章 CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程