实现在不同宽度设备中等比缩放的网页效果(仿写哔站首页)

最新推荐文章于 2024-06-20 15:06:48 发布
最新推荐文章于 2024-06-20 15:06:48 发布
阅读量158 收藏
点赞数 1
文章标签： servlet 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ll__opa/article/details/125963590
版权

项目目录及文件：

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
    <!-- 引入字体图标 -->
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <!-- 引入首页的css -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部开始 -->
    <header>
        <div class="m-navbar">
            <div class="logo">
                <i class="iconfont Navbar_logo"></i>
            </div>
            <div class="right">
                <a href="#" class="search">
                    <i class="iconfont ic_search_tab"></i>
                </a>
                <a href="#" class="face">
                    <img src="./images/login.png" alt="">
                </a>
                <div class="app-btn">
                    <img src="./images/download.png" alt="">
                </div>
            </div>
        </div>
        <div class="tabs iconfont">
            <ul class="tabs-left">
                <a href="#">首页</a>
                <a href="#">动画</a>
                <a href="#">番剧</a>
                <a href="#">国创</a>
                <a href="#">音乐</a>
                <a href="#">舞蹈</a>
                <a href="#">鬼畜</a>
                <a href="#">时尚</a>
                <a href="#">影视</a>
                <a href="#">电影</a>
                <a href="#">电视剧</a>
                <a href="#">直播</a>
                <!-- 线 -->
                <div class="line"></div>
            </ul>

        </div>
    </header>
    <!-- 头部结束 -->
    <!-- 主体区域开始 -->
    <main>
        <div class="video-list-box">
            <!-- 装a标签的盒子 -->
            <div class="video-list">
                <a href="#">
                    <div class="pic">
                        <img src="./images/banner1.webp" alt="">
                        <div class="cont">
                            <span>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                288.8万
                            </span>
                            <span>
                                <i class="iconfont icon_shipin_danmushu"></i>
                                8540
                            </span>
                        </div>
                    </div>
                    <p>东 汉 变 种 人</p>
                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/banner8.webp" alt="">
                        <div class="cont">
                            <span>
                                <i class="iconfont icon_shipin_bofangshu"></i>
                                202.1万
                            </span>
                            <span>
                                <i class="iconfont icon_shipin_danmushu&
最低0.47元/天 解锁文章
༨ᦔᵧₒᵤ
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
b站首页banner景深移动特效 bilibili秋
u014584271的博客
01-25 1803
看到b站的animation-banner效果太妙了,就自己也想仿写一个.去查了查资料鼓捣出来一个. 首先是成品展示 大家可能觉得这个效果看起来很复杂,其实拆开来看比较简单. 他的效果就是实现了一个镜头聚焦,那么我们分步骤进行讲解 step1 首先,让图层跟随鼠标进行移动,大家应该已经想到怎么办了,但是有个问题,每个图层跟随鼠标移动的距离不能相同,这里可以用循环进行移动距离的迭代. 其实就是让 step2 其次是让图层跟随鼠标的移动距离进行清晰度的变化,和上述的办法类似,也是构造一个函数来计算清晰度,可以
html让整体缩放实现分辨率兼容,纯CSS实现不同分辨率下实现样式自适应
weixin_29349409的博客
06-02 1287
用户体验一直是SEO最注重的，一个好的网页设计能给用户带来舒适的体验。而很多用于SEO优化的网站，画面实在难看...为了优化而优化。如果移动端能自适应最好尽量少调用JS，提高网站打开速度。纯CSS实现PC浏览器(显示屏幕)或移动端浏览器宽度样式的自适应。将用到@media样式进行判断，不支持IE9以下版本，需要增加一个JS。一般我们设计网页的时候PC端宽度都在900-1400像素之间，移动端宽度在...
移动开发字体大小配置
weixin_34405557的博客
10-06 188
html { font-size: 24px!important; } @media screen and (min-width: 360px) { html { font-size: 24px!important; } } @media screen and (min-width: 375px) { html { font-size: 25px!important;...
移动Web学习总结
weixin_43972501的博客
07-10 52
只为 scal设置一个值，表示 X 轴和 Y 轴等比例缩放 取值大于1表示放大，取值小于1表示缩小。核心原理:根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。注意点:查看z轴缩放,需要配合透视和x轴旋转一起使用,先缩放在旋转。将网页等分成10份， HTML标签的字号为视口宽度的 1/10。伪类,结构伪类,伪元素通过&进行书写(&表示包裹他的元素)一套代码在多个不同端(pc,移动,ipa)显示不同的布局,1.margin移动100%,参考的是父元素的100%;
《CSS3-布局》移动设备网页等比缩放布局
weixin_33913377的博客
11-23 273
移动设备网页，怎么才能做一套样式，可以适应不同分辨率设备？ 知识点：《CSS3-rem》相对于根元素字体大小的单位 《CSS3-media》在Html内容不变的情况，根据媒体设备不同，浏览器窗口尺寸不同，使用不同的CSS样式 《CSS3-fle...
代码动态设置tabLayout 导航条宽度
请叫我孙长老的博客
08-22 2005
项目用中用到了tabLayout 切换页面，但是他下面的导航栏宽度不符合要求，于是研究了半天。 不多说直接贴代码。 /** * 设置tabLayout 导航条宽度 */ public void setIndicator(TabLayout tabs, int leftDip, int rightDip) { Class tabLayout = tabs.getClass();
页面窗口自动调整到设备宽度，并禁止用户缩放页面
JSli的博客
09-24 5318
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;  
网页在移动设备上实现自动缩放
张云勇
10-13 7445
查找了一下相关资料才算是明白了上面那行代码的意思： target-densitydpi=device-dpi ：在做手机版的页面时，如果使用了此属性那么页面中的内容会很小，好像分辨率越大的手机屏幕显示的效果越小，如果不用这个属性那么手机浏览器会自动放大到一定大小（这个应该是手机默认的）便于阅读效果。据说平板电脑用这个属性比较好。 width=device-width ：设置了这个属性后
在vue项目中实现网页整体随屏幕尺寸缩放
chenghao1111的博客
12-29 1916
此处的项目为vue2版本，因为pc端的项目没有采用响应式自适应手机端的设计，所以使用lodash插件实现屏幕移动端自适应。 首先下载lodash插件。 npm i lodash -S 然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。 import _ from 'lodash' 然后给app容器挂上ref=“app” <template> <a-config-provider :locale="locale"> &lt.
css 网页整体缩小_css实现缩放自适应网页--手机web
weixin_33110093的博客
02-01 7911
一.允许网页宽度自动调整： "自适应网页设计"到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比 例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。 对于viewport属性，我是真正在接触...
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
10-19
在网页开发中，有时我们可能需要禁用用户的某些交互行为，比如防止用户使用`Ctrl + 鼠标滚轮`来缩放网页内容。这在特定场景下是必要的，例如保持网页布局的一致性或者避免干扰用户的特定操作。在JS（JavaScript）中...
three.js实现3D视野缩放效果
10-19
在3D图形编程中，创建逼真的视觉效果是至关重要的，而...在实际项目中，可以根据需要进一步优化和扩展这种缩放机制，例如添加平滑过渡效果，或者结合其他输入设备（如触摸屏、游戏手柄等）实现更加自然的交互控制。
Android实现图片在屏幕内缩放和移动效果
08-26
在实现图片在屏幕内缩放和移动效果时，需要计算图片的精确位置，以确定手指是否点在图片内。不同于普通缩放的图片充满屏幕，屏内缩放的图片只占据屏幕的一部分，因此需要判断手指是否点在图片内，才能进行各种操作。...
点击图片上的窗口实现图片的缩放效果
06-10
大家可以看到图片上有一些框框，点击框框试试，可以放大局部效果，是不是有点像FBI拿着相机在监视你啊
Unity3D实现物体旋转缩放移动效果
08-26
Unity3D实现物体旋转缩放移动效果 Unity3D是一个功能强大且广泛使用的游戏引擎，它提供了大量的功能和工具来帮助开发者实现游戏和交互式应用程序。 Unity3D实现物体旋转缩放移动效果是Unity3D中一个重要的功能，它...
webClient + fastJSON2 获取json格式的数据，同时解析至java class 并 下划线转驼峰
qq_46662528的博客
06-17 267
决定返回值是什么格式一般情况可以不写，但这里要获取JSON格式的。可以将JSON和java的class属性自动进行匹配。webClient中。fastJSON2中。
【尚庭公寓SpringBoot + Vue 项目实战】后台用户信息管理（十七）
小林的博客
06-18 963
用户的密码通常不会直接以明文的形式保存到数据库中，而是会先经过处理，然后将处理之后得到的"密文"保存到数据库，这样能够降低数据库泄漏导致的用户账号安全问题。
netcore 生成验证码
最新发布
qq_51172697的博客
06-20 248
提供一个生成验证码和校验的接口。
qml实现点击按钮往Columnt添加一个组件对象
海涛高软
06-17 225
FR：徐海涛(hunkxu)
C#实现窗体在不同分辨率的缩放
06-02
在 C# 中实现窗体在不同分辨率的缩放，可以通过以下步骤来实现： 1. 在窗体的属性中，将 AutoScaleMode 设为 Font，这样窗体中的所有控件都会根据字体大小进行缩放。 2. 在窗体的 Load 事件中，添加如下代码： `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值