首页 > 其他分享 >前端切图练习,仿哔哩哔哩导航栏

前端切图练习,仿哔哩哔哩导航栏

时间:2024-04-20 17:44:45浏览次数:23  
标签:border 切图 前端 float height 哔哩 番剧 margin left

效果

首先看看目标

image-20240420173246750

最后完成效果:

image-20240420173311441

思路

思路是分成左 右两个区域

左边:

分成三个重复的模块

image-20240420173401949

模块内分成上面(图片),下面(文字)

image-20240420173427625

右边

这种一个矩形就是一个li标签

image-20240420173607784

PS使用技巧

cmd+r 唤出左右游标卡尺

cmd+n 新建一个文件,最好先复制了,然后就可以建立一个和剪贴板一样的内容

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b站导航条实现</title>
    <style>
        ul,ol{
          margin: 0;
            padding: 0;
        }
        ol{
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .outerNode{
            width: 2496px;
            height: 208px;
            border: #000000 solid 1px;
        }
        .outerNode .left{
            width: 475px;
            height: 208px;
            border: red solid 3px;
            float: left;
        }
        .outerNode .right{
            width: 2000px;
            height: 208px;
            float: left;
            border: aqua solid 3px;
        }
        .outerNode .left .left_ul {
            float: left;
            list-style: none;
            margin-top: 34px;
            margin-left: 13px;
        }
        .outerNode .left .left_ul li {
            width: 98px;
            height: 139px;
            float: left;
            border: aqua solid 3px;
            margin-right: 42px ;
        }
        .outerNode .left .left_ul li .top_img {
            width: 98px;
            height: 98px;
            float: left;
            border: #7812b4 solid 1px;
        }
        .outerNode .left .left_ul li .bottom_text {
            width: 98px;
            height: 27px;
            float: left;
            border: #b21633 solid 1px;
            margin-top: 13px;
            text-align: center;
        }

        .right ol {
            float: left;
            margin-top: 35px;
        }
        .right ol li {
            width: 151px;
            height: 64px;
            border: #f2f2f4 solid 3px;
            float: left;
            background: #f6f7f9;
            text-align: center;
            line-height: 60px;
            border-radius: 10px;
            margin-right: 16px;
            margin-bottom: 10px;
        }
        .right ol li a {
            color: #66676c;
            font-size: 28px;
        }
    </style>
</head>
<body>
<div class="outerNode">
    <div class="left">
        <ul class="left_ul">
            <li>
                <div class="top_img">
                    <img src="./img_01.jpg" alt="">
                </div>
                <div class="bottom_text">动态</div>
            </li>
            <li>
                <div class="top_img">
                    <img src="./img_02.jpg" alt="">
                </div>
                <div class="bottom_text">热门</div>
            </li>
            <li>
                <div class="top_img">
                    <img src="./img_03.jpg" alt="">
                </div>
                <div class="bottom_text">频道</div>
            </li>

        </ul>
    </div>
    <div class="right">
        <ol>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">番剧</a>
            </li>
            <li>
                <a href="#">
                    <span>更多</span>
                    <img src="./img-4.jpg" alt="">
                </a>
            </li>


        </ol>
    </div>
</div>
</body>
</html>

标签:border,切图,前端,float,height,哔哩,番剧,margin,left
From: https://www.cnblogs.com/yangstar/p/18147931

相关文章

  • 前端实现盒子水平垂直居中的四种方式
    在前端开发中,实现元素的水平垂直居中是一个常见的需求。下面我将介绍几种常见的方法来实现这个效果:1.使用Flexbox(弹性盒子Flexbox是一个现代的布局模型,可以轻松地实现元素的水平垂直居中。Html代码<divclass="flex-container"><divclass="flex-item">我是内容</div>......
  • 前端开发中 对象 类 方法三者区别
    在前端开发中,对象、类和方法都是面向对象编程(OOP)的重要概念。它们各自有着不同的定义和作用,下面将详细解释这三者之间的区别:对象(Object):对象是现实世界或抽象概念中事物的表示。在编程中,对象是一个具体存在的实体,具有属性和方法。属性是对象的数据特征,而方法是对象能够执行的操作......
  • 前端【小程序】14-小程序基础篇【地理位置】【腾讯定位服务】
    腾讯定位服务官网:https://lbs.qq.com位置服务(LBS)是基于用户的位置来提供服务的技术,通过要配合第三方的服务来实现,如腾讯地图、高德地图、百度地图等,享+项目采用的是腾讯的位置服务。申请使用腾讯位置服务需要按如下步骤操作:注册账号创建应用生成key小程序管理后......
  • 前端使用 Konva 实现可视化设计器(6)
    请大家动动小手,给我一个免费的Star吧~这一章处理一下复制、粘贴、删除、画布归位、层次调整,通过右键菜单控制。github源码gitee源码示例地址复制粘贴复制粘贴(通过快捷键)//复制暂存pasteCache:Konva.Node[]=[];//粘贴次数(用于定义新节点的偏移距离)past......
  • Vue前端开发常用第三方资源库
    Vue前端第三方库集合......
  • 2024-04-19 前端常见面试题汇总(js篇)
    以下是前端面试中关于JavaScript的一些常见问题及其答案,共包含超过50个问题:1.解释一下JavaScript中的变量提升(Hoisting)。变量提升是指在JavaScript中,变量和函数的声明会被提升到其所在作用域的最顶部。但需要注意,只有声明会被提升,赋值操作不会。2.解释一下JavaScript中的闭包(C......
  • 若依框架中配置使得每次打包不修改前端访问接口IP和端口
    1.添加配置文件配置文件中的数据和application.yml中的context-path保持一致 2.添加配置代码<scripttype="text/javascript">document.write("<scriptsrc='./static/config.js?v="+newDate().getTime()+"'><\/script>");&......
  • 2024-04-19 前端常见面试题汇总(html篇)
    1、xhtml和html有什么区别?语法要求:XHTML要求严格的XML语法,例如所有标签必须小写,所有标签必须关闭(即使是空元素也要使用闭合标签),所有属性必须使用引号。HTML语法相对更宽松,不强制要求标签闭合,标签和属性的大小写不敏感。文件类型:XHTML文档必须以.xml、.xhtml或者.xhtml......
  • 前端如何使用Javascript实现一个简单的发布订阅模式
    在前端开发中,我们经常需要处理事件的订阅与发布,以实现组件之间的解耦和通信。本文将介绍如何使用JavaScript实现一个简单的发布订阅模式,通过分步写代码的方式,带领读者一步步完成实现过程。步骤一:定义EventEmitter类首先,我们需要定义一个名为EventEmitter的类,作为发布订阅......
  • 今天依然是写前端的一天--前端页面的搭建
    <!--Login.vue--><scriptsetup>import{User,Lock}from'@element-plus/icons-vue'import{ref}from'vue'//控制注册与登录表单的显示,默认显示注册constisRegister=ref(false)//定义数据模型constregisterData=ref({username:'&#......