Web前端实操
墨倾许
下定决心要做的事情,就要保持不动声色,汹涌澎湃!
展开
-
【Web前端实操22】定位实操_鼠标悬停在手机上,手机两面图片岔开
本次实操主要是对之前定位练习的一个补充,实现鼠标悬停在手机上,手机两面图片岔开的效果。原创 2024-02-21 05:00:00 · 394 阅读 · 0 评论 -
【Web前端实操20】商城官网_黑色导航
今天继续着上一篇博客的内容进行编写,本次主要实现的是商场官网实战里面的黑色导航栏部分,也就是广告图片下面的部分。原创 2024-01-31 06:30:00 · 397 阅读 · 0 评论 -
【Web前端实操21】商城官网_白色导航
今日份实现白色导航栏部分,也就是第三部分,效果如图中划线所示:本次实现代码如之前的全局样式不再赘述,如有需要可以去我博客的Web前端实操19或者20自行查看。本次主要更新mi.css和index.html,原创 2024-01-31 21:37:17 · 411 阅读 · 0 评论 -
【Web前端实操19】商城官网_分析与顶部广告
本次实操主要是借用小米之前的网站来进行参考,达成网站静态页面开发的目的,而新学者想要一次性直接开发整个网站,肯定会很懵圈,因此,这个商城官网我会一部分一部分地进行拆分来写,最后合成整个界面。本次想要实现的效果图如下:当然了,我们并不是实现整个界面,而是要实现顶部广告的效果就可,如果对这部分不明白的,也可以看我的博客看了之后会对我们整个官方网站开发有着更深的理解。原创 2024-01-29 20:05:58 · 326 阅读 · 0 评论 -
【Web前端实操18】粘性定位——即固定顶层内容,可以继续滚动,但是顶层内容固定,不随着一起滚动
大家可以在翻看一些网页页面的时候,看到搜索栏那一块内容,在当前页面不动的时候,它是固定的,也不变动,这个时候是相对定位。在最开始的时候,图片在最顶层,导航栏在图片下面一行,但是,在滚动的时候图片会滑上去,但是导航栏位置不变,固定在顶层。元素在跨越特定阈值前为相对定位,之后为固定定位。但是往下滚动的时候,内容随之变化,但是搜索栏这一块内容会固定在顶部,又变换成固定定位。我们大体上一个大块中分为三块,最下面一块可以先不写内容,但是需要用高度将它撑开。本次博文主要实现的就是粘性定位,介于两种定位之间的定位。原创 2024-01-29 15:28:36 · 1601 阅读 · 0 评论 -
【Web前端实操17】导航栏效果——滑动门
至于" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。可以找到上面的名字,将icon-xxx替换掉就行。找到以html为后缀名的文件,点开,找到font-class,上面会有教你怎么应用的方式方法。滑到导航栏的某一项就会出现相应的画面,里面有对应的画面出现。下载之后可以将这两个文件复制到相应的文件夹下,方便引用。因为我需要的是一个箭头图标,用于完成实操。选择一个——>添加至购物车——>下载代码。原创 2024-01-28 21:00:14 · 1359 阅读 · 1 评论 -
【Web前端实操16】雪碧图(CSS精灵图)
CSS Sprite也叫CSS精灵图、CSS雪碧图,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。实现效果没有做很长,依次类推,可以慢慢根据距离做出雪碧图,如有不解,可以在评论区评论,共同进步。雪碧图一般会给一个完整的图片,主要利用。属性设置背景图像的起始位置。原创 2024-01-28 14:04:50 · 595 阅读 · 0 评论 -
【Web前端实操15】利用Grid布局完成九宫格
一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。属性指定了列与列间的边框样式。属性指定了需要分割的列数。属性指定了列与列间的间隙。属性指定了两列的边框厚度。属性指定了两列的边框颜色。指定一个容器采用网格布局。原创 2024-01-25 22:33:11 · 523 阅读 · 0 评论 -
【Web前端实操14】利用CSS绘制三角形和梯形
想要倒三角形也是一样,只要设置上边可见,其他边透明即可。主要是利用border属性,设置内容区宽高值为0。将其下边设置为可见,其他边设为透明。原创 2024-01-25 05:30:00 · 463 阅读 · 0 评论 -
【Web前端实操12】将一个100*100的盒子,变成圆形
将一个100*100的盒子,变成圆形,是一个简单的实操,想要完成这个实操,最关键的是一个知识点,使用 CSS3。属性,你可以给任何元素制作 "圆角"原创 2024-01-24 11:29:16 · 414 阅读 · 0 评论 -
【Web前端实操13】实现100*100的盒子的阴影效果,阴影值自拟
实现100*100的盒子的阴影效果,阴影值自拟,box-shadow 向框添加一个或多个阴影。原创 2024-01-24 11:53:14 · 376 阅读 · 0 评论 -
【Web前端实操11】定位实操_照片墙(无序摆放)
设置一个板块,将照片随意无序摆放在墙上,从而形成照片墙。本来效果应该是很唯美好看的,就像这种,但是奈何本人手太笨,只好设置能达到照片墙的效果就可。原创 2024-01-21 20:20:52 · 749 阅读 · 0 评论 -
【Web前端实操10】定位实操_图片上面定位文字
在自己写的过程中,对于标签的定位写成了相对定位,效果怎么都不对,因此有关于定位,需要好好地再琢磨以下,如果整个模块不设置定位的话,后面的标签进行定位的时候是会对于浏览器整个开始来定位的,因此整个模块最好是设置成相对定位,然后在设置标签的时候可以设置成绝对定位,就可以实现如图的效果。目前还没有学到渐变色,所以标签效果的渐变色没有实现,只是利用radius设置了圆角图形,辅之以背景色和设置其中文本文字的颜色和居中对齐。原创 2024-01-21 10:58:10 · 956 阅读 · 0 评论 -
【Web前端实操09】定位实操_实现在导航栏悬浮就能实现下拉列表效果
也就是实现导航栏,将超链接进行排版,使得鼠标悬浮在哪个超链接文本上面就会出现相对应的背景颜色的板块。原创 2024-01-19 17:00:07 · 480 阅读 · 0 评论 -
【Web前端实操08】实现一个导航效果,要求横向摆放,并且清除浮动
要利用浮动的知识点完成首页,电视,平板,家电,服务在一行导航栏剧中居中显示的功能,背景设置为灰黑色,导航栏下面是内容。原创 2024-01-17 14:18:24 · 403 阅读 · 0 评论 -
【Web前端实操07】利用弹性盒子模型,实现单行文本在盒子内上下左右居中
弹性容器通过设置 display属性的值为 flex将其定义为弹性容器,弹性容器内包含了一个或多个弹性子元素。弹性盒子只定义了弹性子元素如何在弹性容器内布局。注意:弹性容器外及弹性子元素内是正常渲染的。原创 2024-01-17 07:00:00 · 487 阅读 · 0 评论 -
【Web前端实操06】实现一个怪异盒子模型
怪异盒子又称为IE盒子,在这种模式下,浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和;即在怪异模式下的盒模型,盒子的(content)宽度+内边距padding+边框border宽度=我们设置的width(height也是如此),从实现的效果可以看出来,其宽度并不会跟随内容的宽度而进行扩展,而是会有溢出。原创 2024-01-17 06:00:00 · 392 阅读 · 0 评论 -
【Web前端实操05】利用CSS盒子模型属性完成一个容器在页面中左右居中
利用CSS盒子模型属性完成一个容器在页面中左右居中,可以将内边距设置为上下为0,左右自动,就能实现。原创 2024-01-16 21:55:22 · 507 阅读 · 0 评论 -
【Web前端实操04】通过CSS给一个容器设置背景图片,并应用所有背景属性
background-image、background-repeat、background-position 其中background-size单独书写。将学过的背景属性进行应用,没有用复合属性,先将简单的属性进行应用。如果要复合写的话,可以按照下面写一个background属性。background 简写属性在一个声明中设置所有的背景属性。原创 2024-01-16 08:31:15 · 542 阅读 · 0 评论 -
【Web前端实操03】利用两种方式实现一个 div 盒子半透明
通过CSS,想要实现一个div盒子半透明的效果,有两种方法,一种是通过透明属性来完成,还有一种是通过rgba最后一个属性是设置透明度的方法来搞定。原创 2024-01-15 20:21:52 · 629 阅读 · 0 评论 -
【Web前端实操02】创建页面,在页面上完成视频与音频的播放
在做这个实操的时候,有关于音频,如果不加muted,就会导致音频的界面不出现,以下是音频的属性,让音频静音,然后显示播放按钮,界面上就会出现音频,并且播放会有声音,可以控制音量,至于视频,没有找到视频,只好虚构一个,作为一个界面摆在那里。原创 2024-01-15 20:13:53 · 437 阅读 · 0 评论 -
【Web前端实操01】实现单行文本,如果超出容器大小,使用 ... 代替
最近在重拾web,把一些基础重新学习一下,之前报的班,怎么着也要学完,系统布置的实操作业,正好和大家学习分享。原创 2024-01-14 23:37:57 · 331 阅读 · 0 评论