b站小而美-页面开发-首页_2021-07-21

最新推荐文章于 2021-10-06 17:43:19 发布
最新推荐文章于 2021-10-06 17:43:19 发布
阅读量114 收藏
点赞数
分类专栏： 学习留档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42042774/article/details/118978925
版权

java css html

小而美博客系统-学习留档
b站学习链接：https://www.bilibili.com/video/BV1KJ411D7bW?p=5&spm_id_from=pageDriver

-------------------------------------------------------------------------------------------------------------------------

使用软件：WebStorm 2021.1.1 x64

引用框架：semanticUI

Semantic UI 网址：https://semantic-ui.com/

引用框架：jquery

jquery网址：https://www.jsdelivr.com/
 

页面开发-首页-3

代码

<!--中间内容-->
<div class="m-padded-td-large">
    <div class="ui container">
        <div class="ui grid">
            <!--左边的博客列表-->
            <div class="eleven wide column">
                <!--header-->
                <div class="ui top attached segment">
                    <div class="ui middle aligned two column stackable grid">
                        <div class="column">
                            <div class="ui teal header">博客</div>
                        </div>
                        <div class="right aligned column">
                            共<h3 class="ui orange header m-inline-block">14</h3>篇
                        </div>
                    </div>
                </div>

                <!--content-->
                <div class="ui attached segment">
                    <div class="ui padded vertical segment">
                        <div class="ui grid">

                            <div class="eleven wide column">
                                <h3 class="ui header">你真的了解什么是财富吗</h3>
                                <p>正确做好任何意见事情的前提是清晰、正确的理解目标。实事求是，我们很多人很多时候根本没有对目标的正确定义...</p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui horizontal link list">
                                            <div class="item">
                                                <img src="./static/images/WeChat.jpg/100/100" alt="" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">朋克奶罐</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2021-07-21
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>4869
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class ="ui teal basic lable m-padded-tiny">认知升级</a>
                                    </div>
                                </div>
                            </div>
                            <div class=" five wide column">
                                <a href="#" target="_blank">
                                    <img src="./static/images/WeChat.jpg" alt="" class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--2-->
                    <div class="ui padded vertical segment">
                        <div class="ui grid">
                            <div class="eleven wide column">
                                <h3 class="ui header">你真的了解什么是财富吗</h3>
                                <p>正确做好任何意见事情的前提是清晰、正确的理解目标。实事求是，我们很多人很多时候根本没有对目标的正确定义...</p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui horizontal link list">
                                            <div class="item">
                                                <img src="./static/images/WeChat.jpg/100/100" alt="" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">朋克奶罐</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2021-07-21
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>4869
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class ="ui teal basic lable m-padded-tiny">认知升级</a>
                                    </div>
                                </div>
                            </div>
                            <div class=" five wide column">
                                <a href="#" target="_blank">
                                    <img src="./static/images/WeChat.jpg" alt="" class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div><!--2-->
                    <div class="ui padded vertical segment">
                        <div class="ui grid">
                            <div class="eleven wide column">
                                <h3 class="ui header">你真的了解什么是财富吗</h3>
                                <p>正确做好任何意见事情的前提是清晰、正确的理解目标。实事求是，我们很多人很多时候根本没有对目标的正确定义...</p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui horizontal link list">
                                            <div class="item">
                                                <img src="./static/images/WeChat.jpg/100/100" alt="" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">朋克奶罐</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2021-07-21
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>4869
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class ="ui teal basic lable m-padded-tiny">认知升级</a>
                                    </div>
                                </div>
                            </div>
                            <div class=" five wide column">
                                <a href="#" target="_blank">
                                    <img src="./static/images/WeChat.jpg" alt="" class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div><!--3-->
                </div>
                <!--footer-->
                <div class="ui bottom attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <a href="#" class="ui teal basic botton">上一页</a>
                        </div>
                        <div class="right aligned column">
                            <a href="#" class="ui teal basic botton">下一页</a>
                        </div>
                    </div>

                </div>

            </div>
            <!--右边的top-->
            <div class="five wide column">
                <!--分类-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column">
                                <a href="#" target="_blank">more <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment">
                        <div class="ui fluid vertical menu">
                            <a href="#" class="item">学习日志1
                                <div class="ui lable">13</div>
                            </a>
                            <a href="#" class="item">学习日志2
                                <div class="ui lable">13</div>
                            </a>
                            <a href="#" class="item">学习日志3
                                <div class="ui lable">13</div>
                            </a>
                            <a href="#" class="item">学习日志4
                                <div class="ui lable">13</div>
                            </a>
                        </div>
                    </div>
                </div>
                <!--标签-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column">
                                <a href="#" target="_blank">more<i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="ui teal basic left pointing lable">方法论1
                            <div class="detail">22</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing lable">方法论2
                            <div class="detail">22</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing lable">方法论3
                            <div class="detail">22</div>
                        </a>
                    </div>
                </div>
                <!--最新推荐-->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>最新推荐
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank">用户故事1</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank">用户故事2</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank">用户故事3</a>
                    </div>
                </div>

                <!--二维码-->
                <h4 class="ui horizontal divider header">扫码关注我</h4>
                <div class="ui centered card" style="width: 11em">
                    <img src="./static/images/WeChat.jpg" alt="" class="ui rounded image">
                </div>

            </div>
        </div>
    </div>

</div>

关爷的发园
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用HTML+CSS简单仿制了一个bilibili电脑界面⚆_⚆（做着玩的）
qq_42459832的博客
09-28 1万+
** 效果图 **：两边的的标签是因为长截图滑动时，它会跟着一起动，实际并没有那么长(⑉･̆-･̆⑉)，截图对跟着跑的东西默认截图成这样，这页面里没有js和轮播，本身想加上去，还是太懒了… 下面上代码，真的很简单，没有一点技术含量，更像是在拼图 ( ˶˙º̬˙˶ )୨⚑︎，不过代码超级无敌多，有4000+行，不过大部分都是重复的。 首先是主体HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char
B站后端java_GitHub - javalovelinux/bilibili-vue: 前端vue+后端koa，全栈式开发bilibili首页...
weixin_35521169的博客
02-27 285
技术栈前端：vue2 + vuex + webpack + ES6/7 + stylus + nginx后端：koa2项目运行如何运行运行前请先安装nodejsclone项目到本地git clone https://github.com/lybenson/bilibili-vue.git前端运行cd bilibili-vuenpm installnpm run dev后端运行cd bilibili...
爬虫之旅（一）：爬取b站首页的源代码
qq_52528413的博客
10-06 1763
一、代码展示 import requests url='https://www.bilibili.com/' #指定对象 response =requests.get(url=url) #获得相应对象 page_text=response.text print(page_text) #持续化存储 with open('./bilibili.html','w',encoding='utf-8')as fp: fp.write(page_text) print('爬取结束') 二、运行结果显示
哔哩哔哩网页仿写总结
m0_46448833的博客
03-27 3380
哔哩哔哩网页仿写总结 神在成为神之前也是人——《头文字D》阿木 1、哔哩哔哩的分区布局真的非常美妙 2、学习到新的css知识。通过开发者工具，去模仿顶级页面的开发技巧，还有css的布局思路。 3、在编写网页前，需要思考布局，从整体入手。 4、留意bug。最好在精力最好的时候进行脑力活动。 5、保持充足的睡眠，睡眠不好，第二天会没有精神。不要熬夜。但是真的，熬夜会变成惯性， 不是我想熬，而是生物钟了...
【网站制作】二、实战 - B站首页导航栏
悟已往之不谏 知来者之可追
02-18 9323
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bilibili</title> <style> /*盒子模型的样式*/ *{margin: 0; padding: 0;} /*外边距；内边距*/ /*背景除了使用颜色...
大数据下的小而美--电子商务本科毕业论文.doc
最新发布
07-06
大数据下的小而美--电子商务本科毕业论文.doc 本论文主要探讨大数据在电子商务中的应用，特别是以 6 度淘宝店为例，探讨大数据对小而美网红店铺的影响，分析大数据对网络销售的影响，并形成一个将大数据、小而美、...
大数据下的小而美-电子商务本科毕业论文.doc
07-06
这篇毕业论文的主题是“大数据下的小而美”，以6度淘宝店为例，旨在探讨在网络环境中，小型电商如何利用大数据提升自身品牌特色，了解并迎合消费者细分需求，塑造独特的品牌形象。论文将结合理论与实践，对6度网店...
Go-Quickshare一个小而美的文件共享服务器
08-14
《Go-Quickshare：构建小而美的文件共享服务器》 Go-Quickshare是一个小巧而功能强大的文件共享服务器，它以其便捷性、跨平台性和高效能为亮点，深受开发者和普通用户的喜爱。在这个项目中，我们可以看到Go语言的...
html仿b站页面代码,B站首页界面设计：附详细教程
weixin_39810196的博客
06-04 3692
文件名大小更新时间B站首页界面设计：附详细教程\1.png2994402016-12-29B站首页界面设计：附详细教程\2.png2492252016-12-29B站首页界面设计：附详细教程\weapp-jief-bilibili-master\LICENSE113572016-12-01B站首页界面设计：附详细教程\weapp-jief-bilibili-master\notebooks\1.微...
哔哩网站登录界面html代码,仿哔哩哔哩网页模板设计
weixin_33575588的博客
06-09 3400
【实例简介】【实例截图】【核心代码】bilibili├── Home.html├── Login.html├── Register.html├── css│ ├── bootstrap.min.css│ └── css.css├── forget the password.html├── img│ ├── 001.png│ ├── 002.png│ ├── 003.png│ ...
仿B站网页模板
09-17
仿B站网页模板
Android UI使用HorizontalListView实现水平滑动
08-26
主要为大家详细介绍了Android UI使用HorizontalListView实现水平滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用css做出的B站登录界面
xishubawang的博客
09-15 3014
这个星期学习了前段有关的内容，利用css仿制了B站的登录界面 代码如下 css代码如下： .choice { margin: auto; margin-top: 20px; margin-left: -280px; width: 415px; height: 35px; } .lo...
用html做b站首页,前端练习-B站1
weixin_36324916的博客
06-16 1272
本周做了B站第一部分的练习，并利用工作的间隙做了一部分CSDN首页的模仿练习，自己的体会是，布局和基本样式没有太大问题，但是熟练程度有待进一步提高，主要是死磕一个比较成熟的案例，B站课程练习算是一个开始，之前做了很多小练习，是张开眼睛看，帮我打开前端的HTML、CSS的世界，下面不仅要看清楚想清楚，而且要自己动手做出来。练习B站的过程主要遇到以下问题：问题1因为游戏中心插入子元素div，被撑开，导...
b站图片css,纯CSS打造BiliBili样式博客主题
weixin_42511832的博客
08-03 350
前言一直以来，我都在思考如何减少不必要的JS代码，仅通过CSS来实现博客园主题美化。CSS有很多魔法代码，例如:before，iconfont，order，等等，利用好这些技巧，也能实现很好美化效果。这一次带来的是仿制BiliBli制作的纯CSS博客园主题，希望能给你带来不一样的体验。头部导航栏BiliBili个人主页效果这种头部感觉比较好看，并且根据博客园的代码布局，正好能够实现。其实博客园在设...
bilibili登录页面代码html5,Yaalon
weixin_39595164的博客
06-04 753
bilibili-html5An unofficial website of bilibili.com.Featureshtml5 video player support "Danmu"video part/quality selectBuildnpm installnpm run buildOthersLicenseMIT LicenseCopyright (c) 2016 Castaway ...
夜光带你走进我擅长的领域：SpringBOOT（10）
夜光的博客
08-20 347
夜光序言： 有时候我们有些近视，忽略了离我们最真的情感；有时候我们有些远视，模糊了离我们最近的幸福。一辈子真的很短，远没有我们想象的那么长，永远真的没有多远。所以,对爱你的人好一点，对自己好一点，今天是你的枕畔人，明天可能成了陌路人，如果这辈子来不及好好相爱，就更不要指望下一辈子还能遇见。 正文：采用Semantic UI前端框架，和jquery，css，js...
Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
热门推荐
yanzi1225627的专栏
03-15 20万+
本文内容：1、横向ListView的所有实现思路; 2、其中一个最通用的思路HorizontalListView，并基于横向ListView开发一个简单的相册； 3、实现的横向ListView在点击、浏览时item背景会变色，并解决了listview里setSelected造成item的选择状态混乱的问题。
Spring boot实训 个人博客系统一 首页
aqaerw的博客
07-05 345
1. 个人博客介绍: 个人博客的大概内容:博客首页、博客文章、博客管理。实现的各种功能：留言板、回复功能、多级回复功能、标签分类、归档页、关于我页面、搜索、导航页面、后台管理博文。 个人博客思维导图： 需要的代码： 后端：Spring Boot +JPA +thymleaf模板 数据库: MySQL 前端UI: SemanticUI框架 工具与环境: IDEA Maven 3 JDK 8 Axure RP 8 2.功能实现: 1.创建index.html文件: 2.到Sem
基于RT-Thread开发的绘本故事机实战解析
"基于RT-Thread 实现的绘本故事机实例，使用BK7252平台，展示了如何利用RT-Thread操作系统进行音视频设备的开发。文档详细阐述了选择RT-Thread的原因，包括其小巧的内核、丰富的组件以及清晰的设备模型，便于移植和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值