HTML/CSS
三月的一天
计算机专业硕士毕业,多年的数学建模、复杂网络、软件开发、前后端技术开发的实践经验。作为一名博客作者,我致力于将我所学到的知识和经验分享给更多的人。我相信,知识的力量在于传播,而分享则是知识传播的最佳途径。我的博客内容涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识。旨在为读者提供有价值的信息和实用的技巧。如果您对我的博客内容感兴趣,或者有任何问题想要交流,您可以通过评论或者私信与我联系!
展开
-
fixed定位既然相对于屏幕视口定位,为什么在滚动时不生效
当你设置一个元素为fixed定位时,它的位置会相对于浏览器窗口的可视区域进行计算。因此,无论页面如何滚动,该元素都会保持在固定的位置上,不会随滚动而移动。fixed定位是一种CSS属性,用于将元素相对于浏览器窗口进行定位,而不是相对于其父元素。它会使元素固定在屏幕上的某个位置,不会随页面滚动而改变位置。示例,给搜索框固定在网页上方,但是在鼠标向下滚动时,搜索框会消失。这是内容区域的z-index比搜索框 默认的z-index大。给搜索框坐在样式加上较大的z-index即可。原创 2024-03-19 17:28:23 · 885 阅读 · 0 评论 -
CSS实现两栏布局,左侧固定宽高,右侧超高滚动加载
要实现左侧子元素高度固定,右侧子元素超高滚动加载,并且左侧子元素与父级元素高度一致且不跟随滚动,可以使用CSS的flex布局和overflow属性来实现。左侧子元素设置为固定高度,右侧子元素设置为flex-grow: 1,以占据剩余的空间。最后,为了使左侧子元素与父级元素高度一致且不跟随滚动,可以使用position: sticky和top: 0来固定左侧子元素在父级元素的顶部。接下来,将右侧子元素设置为overflow: auto,这样当内容超过右侧子元素的高度时,会出现滚动条。原创 2024-02-19 16:23:26 · 1245 阅读 · 0 评论 -
HTML/CSS盒子模型及可见框大小
盒子模型CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子。• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。一个盒子我们会分成几个部分:内容区(content)内边距(padding)边框(border)外边距(margin)盒子模型样式如下:...原创 2019-06-13 20:08:43 · 1387 阅读 · 0 评论 -
美团网官网最新底部导航页面制作及CSS样式设计
目的:实现美团网站底部的导航页面的设计设计思路:整体一个div-1整体可分为上下两部分:上为——浅绿色背景;下为选项及选项内容上部分的左侧设置一个div,存放美团导航文字内容使用ul>li无序列表存放每个选项:热门城市、热门分类、周边热门其中每个<li>包括左侧的文本以及右侧的展开选项。右侧展开选项设置为两个<ul>无序列表。具体...原创 2019-06-09 17:16:04 · 2688 阅读 · 0 评论 -
美团网站底部超链接部分设计实现
美团web项目底部超链接界面实现美团网底部超链接(原网页图)1.设计思路整体设计为一个div竖着划分为5块div:前四块宽度各自占比18%,最后一块27%或28%第一个div内部设计两个<dl>无序列表第二个div设计一个<dl>第三个两个、第四个两个、第五个三个。2.HTML设计如下: <div class="fo...原创 2019-06-09 20:44:03 · 1444 阅读 · 0 评论 -
相对定位,绝对定位和固定定位的区别
一、定位: 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素,通过position属性来设置元素的定位可选值: static:默认值,元素没有开启定位 relative:开启元素的相对定位 absolute...原创 2019-07-01 20:32:54 · 13372 阅读 · 2 评论 -
background背景相关属性,repeat及attachment,CSS-Sprite图片整合
1.background-image属性使用background-image来设置背景图片, 语法:background-image:url(相对路径);如果背景图片大于元素,默认会显示图片的左上角,如果背景图片和元素一样大,则会将背景图片全部显示,如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素。可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色,一般...原创 2019-07-01 21:02:13 · 308 阅读 · 0 评论 -
HTML表格、长表格、表单
表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单在网页中也可以来创建出不同的表格。 在HTML中,使用table标签来创建一个表格,在table标签中使用tr来表示表格中的一行,有几行就有几个tr,在tr中需要使用td来创建一个单元格,有几个单元格就有几个td 。rowspan用来设置纵向的合并...原创 2019-07-02 10:39:48 · 1640 阅读 · 0 评论