随便写写之——CSDN个人主页布局(二)

news2024/11/27 4:38:44

现在是中午11点30,还是有点迷糊,也不知道怎么了。

继续写写这个界面吧

代码太多了。吧上边的丢到组件里

加个图片好了,不然太丑了,看下main_haeader的布局

都是些比较简单的布局,头像这边就用了一个绝对定位定在了左边盒子上

      .mianinfo_haeder_left {
        width: 120px;
        height: 100%;
        position: relative;
        .mianinfo_haeder_left_img {
          position: absolute;
          top: -10px;
          left: 20px;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          box-shadow: 0 0 0 3px rgb(226, 255, 10); 
        }
      }

侧边栏应该用组件的,这个后边再封装好了,先稍微添加实现下效果

这边写的时候发现页面交互上还有可以改进的地方,比如csdn里的这块hover可以添加点特效

其中设置和更多的地方,我觉得是可以添加点css的,不过可能他们有额外的考虑或者在他们认为是没有必要的吧~也不用想太多

当前效果:

今天的好像都是简单的布局,没有太多的技巧,明天再看看吧,

现在是12点48分,想吃鸡腿去了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1816440.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java多线程临界区介绍

在Java多线程编程中,"临界区"是指一段必须互斥执行的代码区域。当多个线程访问共享资源时,为了防止数据不一致或逻辑错误,需要确保同一时刻只有一个线程可以进入临界区。Java提供了多种机制来实现这一点,例如synchroniz…

2024-6-12-IXI(mat)应用到SR的代码解读

数据集 Download and decompress data from the link 百度网盘 请输入提取码 Password: qrlt Transform .h5 format to .mat format "python convertH5tomat.py --data_dir XXX/T2Net/h5 论文:Task Transformer Network for Joint MRI Reconstruction and Super-Resoluti…

甲骨文新业绩发布!云业务同比增长42%,盘后股价上涨9%

KlipC报道:当地时间6月11日,甲骨文发布了2024财年年报以及2024第四季度的业绩报告。2024财年营收529.61亿美元,同比增长6.02%;净利润104.67亿美元,同比增长23.1%。 第四季度营收同比增长3.3%,达到143亿美元…

Mysql学习(九)——存储引擎

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 七、存储引擎7.1 MySQL体系结构7.2 存储引擎简介7.3 存储引擎特点7.4 存储引擎选择7.5 总结 七、存储引擎 7.1 MySQL体系结构 连接层:最上层是一些客户…

Font Creator使用方法,将第三方.ttf字符拷贝至自定义ttf字体

网上官网下载FontCreator,打开,使用免费版,直接拖拽.ttf进入工程 拷贝Google字库ttf到自定义Custom字库方法: 完成后导出 导出配置我保持默认的,路径选下就好了

前端加载 动画特效

效果图: 完整代码: <!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>加载动画</title><style type="text/css">/* 设置页面背景颜色 */body {background: #ECF0F1;}/* 定义加载动画容器的样式…

vue3第三十九节(TS中的高级类型,分类以及使用注意事项)

前言&#xff1a;为什么需要使用高级类型&#xff0c;正常的类型不能满足日常的业务需求&#xff0c;对于复杂的数据结构、函数签名、类型转换&#xff0c;我们需要使用高级类型来处理&#xff0c;常用的高级类型包含以下几种&#xff1a; 常用的类型定义&#xff1a; 基本类…

vs2015+win10编译LAStools

文章目录 下载LasTool安装包编译laslib测试 下载LasTool安装包 不要再GitHub上下载&#xff0c;在官网下载&#xff1a;link 编译laslib 将压缩包解压到对应路径下&#xff0c;注意路径下不要有空格和汉字。用vs打开目录下的 “lastools.dsw” 文件 下面注意几点&#xff1a…

Python解析Word文档的自动编号

关于自动编号的知识可以参考《在 Open XML WordprocessingML 中使用编号列表》 链接&#xff1a;https://learn.microsoft.com/zh-cn/previous-versions/office/ee922775(voffice.14) python-docx库并不能直接解析出Word文档的自动编号&#xff0c;因为原理较为复杂&#xff…

0502 构成分析设计MOS管放大电路与FET异同点

构成&分析&设计MOS管放大电路&与FET有何异同点 MOSFET需具备什么样的条件才能正常放大信号&#xff1f;如何构成MOSFET放大电路如何分析和设计MOSFET放大电路1.图解分析 2.直流偏置及静态工作点的计算![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/fc…

6.7.31 使用端到端训练的基于 EfficientNet 的卷积网络在双视图乳房 X 线摄影中进行乳腺癌诊断

最好的技术之一进行了两次迁移学习:第一种是使用在自然图像上训练的模型来创建“块分类器”,对子图像进行分类;第二种是使用块分类器扫描整个乳房 X 光检查并创建“单视图全图像分类器”。建议进行第三次迁移学习,以获得一个“双视图分类器”,以使用两个乳房 X 光检查视图…

每日复盘-202406012

今日关注&#xff1a; 这几天市场打板情绪环境转好&#xff0c;轻仓试错 20240612 六日涨幅最大: ------1--------605258--------- 协和电子 五日涨幅最大: ------1--------605258--------- 协和电子 四日涨幅最大: ------1--------301036--------- 双乐股份 三日涨幅最大: --…

《亿级流量网站架构核心技术》-高可用-限流详解

背景 项目中遇到一个场景&#xff0c;用户点击按钮给缺勤员工发送扣薪通知。按照需求是一个月只会发送一次通知&#xff0c;在代码逻辑中已经做了兜底策略--在发送邮件之前先判断本月通知是否已发送&#xff0c;发送完之后将发送状态进行持久化。发邮件的时间大概在1分钟之内。…

看了这面经,测开上岸不远了

前段时间和4位来自百度、美团、快手、滴滴的高级测开大厂学长学姐&#xff0c;进行了一场直播&#xff0c;负责解答24届春招补录&25届找实习同学的问题 当天直播时长达2个小时&#xff0c;对于如何找测开实习&#xff0c;需要怎么准备项目&#xff0c;简历怎么写&#xff…

每天五分钟计算机视觉:如何在现有经典的卷积神经网络上进行微调

本文重点 在深度学习领域,卷积神经网络(Convolutional Neural Networks,CNN)因其强大的特征提取和分类能力而广泛应用于图像识别、自然语言处理等多个领域。然而,从头开始训练一个CNN模型往往需要大量的数据和计算资源,且训练时间较长。幸运的是,迁移学习(Transfer Le…

MySQL系列-语法说明以及基本操作(二)

1、MySQL数据表的约束 1.1、MySQL主键 “主键&#xff08;PRIMARY KEY&#xff09;”的完整称呼是“主键约束”。 MySQL 主键约束是一个列或者列的组合&#xff0c;其值能唯一地标识表中的每一行。这样的一列或多列称为表的主键&#xff0c;通过它可以强制表的实体完整性。 …

C++的爬山算法

爬山算法&#xff08;Hill Climbing Algorithm&#xff09;是一种局部搜索算法&#xff0c;它通过迭代搜索的方式寻找问题的局部最优解。在爬山过程中&#xff0c;算法总是选择当前状态邻域中最好&#xff08;即函数值最大或最小&#xff09;的状态作为下一个状态&#xff0c;直…

小程序 js+Canvas 绘制半圆环虚线进度条

效果图&#xff1a; 思路&#xff1a;过程分为三步&#xff0c;第1步&#xff0c;先画虚线底部背景&#xff0c;第2步&#xff0c;画动态的虚线&#xff08;已选虚线蓝颜色&#xff09;&#xff0c;第3步&#xff0c;画动态的外标&#xff08;已选虚线外位置的标&#xff09;&a…

AOSP12隐藏首页搜索框----隐藏google 搜索栏

目录 第一步&#xff1a;修改文件 第二步&#xff1a;修改文件 第三步&#xff1a;重新编译源码&#xff0c;启动模拟器 第四步、运行效果 第一步&#xff1a;修改文件 源码文件路径: packages/apps/Launcher3/res/layout/search_container_workspace.xml&#xff0c;将…

Navicat for MySQL 11软件下载附加详细安装教程

根据使用者情况表明Navicat Premium 能使你快速地在各种数据库系统间传输数据&#xff0c;或传输到一份指定 SQL 格式和编码的纯文本文件&#xff0c;计划不同数据库的批处理作业并在指定的时间运行&#xff0c;其他功能包括导入向导、导出向导、查询创建工具、报表创建工具、数…