Java学web——day02【一天掌握CSS个人心得】

最新推荐文章于 2022-04-10 21:28:35 发布

Singinwind

最新推荐文章于 2022-04-10 21:28:35 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb

本文链接：https://blog.youkuaiyun.com/u012184326/article/details/80358739

JavaWeb 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个初学者从Java转向前端开发的经历，分享了使用frameset标签进行后台管理页面布局的方法，以及CSS的基础知识，包括引用方式、盒子模型、浮动机制等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  学java太累了，学完今天的课，去财务处结账出去写前端吧。贴一个标签就能马上看到效果。java代码写了一天就得出1+1=2。
总结一下今天的知识。
重点:
1.使用framest标签制作简单的网站后台管理页面
2.掌握CSS链接的三种方式
难点(纯属了解):css盒子模型，css浮动，css定位

一，使用frameset标签制作后台管理页面。
     在今天的案例中，用了frameset标签嵌套子标签frame和frameset标签来制作，以下是我理解的详细步骤。
    1.新建立一个html页面，把里面的body标签删除掉。加入frameset标签(body标签和frameset标签共存)。
    2.重点来了。开始切割页面。需要掌握frameset属性rows和cols，和链接属性src。rows表示横着切。cols表示竖着切。根据需求，我们要先将页面切割成上下两部分，使用rows="15％，*"这个属性。里面再套一个frame标签，属性值src设为top.html。指向写有管理员个人信息和欢迎语的页面top.html
     3.对于下面的部分，要切割成左右两部分，左边是管理员操作选项的页面，设网页为left.html，右边为显示相应操作结果所得数据的页面，设为data.html。完成上述操作要再套用<frameset cols=""15％，＊>这个属性。贴一下这个核心代码比较好理解。

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,*">
<frame src="top.html"  name="top"/>
<frameset cols="15%,*">
<frame src="left.html" name="left"/>
<frame src="right.html" name="right"/>
</frameset>
</frameset>
</html>

这段代码可以背下来。

二，css的三种引用方式
1.使用所有标签共有的属性style。里面按照“属性:值；”的形式写css代码。这种方式称为行内引用
2.在head标签里面使用<style>标签，写css样式，称为页面引用
3.在head标签使用link标签，属性值src填写css页面的位置，rel填写”stylesheet”，这两个属性必须要填写，不然不能引用。这种方式使css代码和html代码分离，并且其他页面也可以使用。称为外部链接。
    到这里总结可以结束了。冲着轩哥学了也用不到，都是美工的事。

    但是还是忍不住研究了css的盒子模型还有定位类型，和float浮动机制。
     当你理解div+css布局的精髓是几个盒子模型在网页上分布时，就可以做任意网站页面的布局了。
     前面html的总结有提过标签分为块状标签(div,p,table,ul这些是块状标签)和内联标签(a,img,font这些是内联标签，)。这个意思是块状标签可以直接做成一个盒子模型，每个盒子模型在正常情况下都有个看不见的框子，每个标签不相重合。可以直接设置宽高，加边框来看出这个盒子。盒子模型还有外边距属性margin，用来设置与其他盒子的距离。内边距padding。用来设置盒子里面各个标签与盒子边缘的距离。我们在使用a标签，img标签的时候，总是发现不能给它们设置宽高，加了边框border属性也看不出来。是因为这些标签不是块级标签。要想变成块级标签，在外面套一个div标签即可。
     理解完上面的盒子模型，再学float浮动就很简单了。当第一个标签贴上float属性，left就是从当前位置，浮动到父级标签的左上角。其他后面贴上float:left的标签，会跟着浮动上来。遇到前面的盒子时候，不能重合，而是紧跟在它后面。当盒子不想有其他盒子跟着，就设置一个clear属性，这样就能独占一行，其他盒子就排在下一行。
     另外，在做div模型布局的时候，要特别注意宽高方面的设置，当几个盒子排在一起，宽高超过预先设置的宽高时，会导致盒子排列和自己想的不一样。实际开发工作中是用像素级别为单位来设置宽高，要是平时做着玩，还是建议用百分比设置宽高比较方便。
     做页面的布局。个人习惯先用盒子把各个大模块利用float布局起来。不建议用border边框显示盒子的形状，因为border的粗细会占用像素，后期也要去掉，但是你已经预先设置完了各个盒子的宽高了。去掉后的几个像素会干扰布局。推荐的做法是给各个盒子加背景颜色来显示它们。
     大模块整体搭建好以后，再往各个模块添加小模块，这样做起来就比较有规划。
     最后提一下定位。定位的属性值是position,它的值分为相对定位relative，绝对定位absolute,固定定位fixed。使用相对定位可以使盒子往原来的位置上下左右直接位移。比较适合布局时候移动。使用绝对定位，要先找对一个父级元素，给父级元素设置属性pisition:relative。这样再来使用绝对定位就能相对这个父级元素移动。
     绝对定位和相对定位的区别是。绝对定位移动以后，它原来所占的位置，会被其他元素自动占领。相对定位移动以后，原来的位置还存在。其他盒子不会去占领它。
     固定定位就是，经常我们在进入一个广告网站，不论怎么滚动，都有qq客服交谈存在。这个是用固定定位来做的。
     个人觉得，前端非常无聊。