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

现在是中午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分,想吃鸡腿去了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络:网络层 - IPv4数据报 ICMP协议

计算机网络:网络层 - IPv4数据报 & ICMP协议 IPv4数据报[版本 : 首部长度 : 区分服务 : 总长度][标识 : 标志 : 片偏移][生存时间 : 协议 : 首部检验和][可变部分 : 填充字段] ICMP协议 IPv4数据报 一个IPv4数据报,由首部和数据两部分组成&#xff…

服务架构的设计原则

墨菲定律与康威定律 在系统设计的时候,可以依据于墨菲定律 任何事情都没有表面上看起来那么简单所有的事情都会比你预计的时间长可能出错的事总会出错担心的某一个事情的发送,那么它就更有可能发生 在系统划分的时候,可以依据康威定律 系…

【QT5】<知识点> QT常用知识(更新中)

目录 一、更改文本颜色和格式 二、QT容器类 三、字符串与整数、浮点数之间的转换 四、QString常用功能 五、SpinBox的属性介绍 六、滑动、滚动、进度条和表盘LCD 七、时间、日期、定时器 一、更改文本颜色和格式 动态设置字体粗体:QFont对象的setBold方法动态…

5.在Nginx中管理目录并允许浏览器中浏览和下载目录的文件

nginx.conf文件配置 charset utf-8; 防止文件名称为乱码。 autoindex on; 开启目录列表展示。 root /usr/local/software; 文件管理目录,浏览器浏览文件所在目录。

C++|哈希应用->位图

目录 一、概念 1.1原理分析: 1.2效率分析: 二、模拟实现 2.1位图框架初始化空间 2.2映射 2.3清零 2.4判断 2.5测试代码 三、位图扩展应用 一、概念 位图,本质上也是一个数组,通过哈希思想构造的一种数据结构&#xff0c…

每日复盘-202406012

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

vuInhub靶场实战系列--Kioptrix Level #4

免责声明 本文档仅供学习和研究使用,请勿使用文中的技术源码用于非法用途,任何人造成的任何负面影响,与本人无关。 目录 免责声明前言一、环境配置1.1 靶场信息1.2 靶场配置 二、信息收集2.1 主机发现2.1.1 netdiscover2.1.2 arp-scan主机扫描 2.2 端口扫描2.3 指纹识别2.4 目…

大模型 - Langchain-Chatchat小白本地部署踩坑血泪史

环境介绍 windows 11python 3.9.9显卡 GTX970 4G显存 (可怜巴巴)内存 24G 一、下载 Langchain-Chatchat 注意:这里先不要执行依赖下载,如果项目是通过 PyCharm 打开,就不要着急下载依赖,跟着往下面走&am…

Linux基础IO【II】

今天,我们接着在上一篇文章的基础上,继续学习基础IO。观看本文章之前,建议先看:Linux基础IO【I】,那,我们就开始吧! 一.文件描述符 1.重新理解文件 文件操作的本质:进程和被打开文件…

Linux crontabs定时执行任务

文章目录 前言一、安装二、服务1. 启动crond服务2. 关闭crond服务3. 重启crond服务4. 设置crond开机启动5. 禁用crond开机启动6. 查看crond是否开机启动7. 重新载入配置8. 查看crond运行状态 三、使用1. 查看当前用户的crontab2. 编辑用户的crontab3. 删除用户的crontab的内容 …

Python第二语言(十、Python面向对象(上))

目录 1. 标记变量的基础类型 2. 初识对象 2.1 使用对象组织数据 3. 成员变量 3.1 类和类成员的定义 3.2 成员变量和成员方法使用 3.3 成员方法的定义语句 4. 类和对象class Clock: def ring(self): 4.1 创建类对象的语法:对象名 类名称() 4.2 用生活中的…

访问方法(反射)

文章目录 前言一、访问成员方法的方法二、Method类 1.常用方法2.实操展示总结 前言 为了实现在某类中随时可以调用其他类的方法,java.lang.reflect包中提供了Method方法类来实现该效果。每一个Method对象代表着一个方法,利用Methoc对象可以操纵相应的方法…

【需求设计】软件概要设计说明怎么写?概要设计说明书实际项目案例(63页Word直接套用)

软件概要设计说明书书写要点可以归纳为以下几个方面,以确保文档的准确性、完整性和可读性: 引言 目的:介绍编写该文档的目的、主要内容及目标读者。 背景:说明被开发软件的名称、项目提出者、开发者等背景信息。 需求概述&#xf…

【FreeRTOS】创建第一个多任务程序

创建第1个多任务程序 韦东山 Freertos学习 第一个多任务程序创建 1. 目标 创建两个任务,任务A运行Led_Test,任务B运行LCD_Test。 硬件平台:DShanMCU-F103开发板 2. 接口函数 创建任务的API函数 不同操作系统有不同的创建API函数 FreeRTOS&…

全网首发-Docker被封后的代理设置教程

最近上交、科大以及阿里的一些docker镜像,好像都因为不可控力导致无法访问。 所以,之前好多正常的一些镜像的打包都会报错: 比如: #1 [internall load build definition from Dockerfile#1transferring dockerfile:972B done#1 D…

5.2 参照完整性

5.2.1 外键约束 语法格式&#xff1a;constraint < symbol > foreign key ( col_nam1[, col_nam2... ] ) references table_name (col_nam1[, col_nam2...]) [ on delete { restrict | cascade | set null | no action } ] [ on update { restrict | cascade | set nu…

水帘降温水温

不同环境下的水帘啊&#xff0c;使用水温是不一样的&#xff0c;夏天使用水疗的水有两种&#xff0c;一个是常温的循环水&#xff0c;20~26左右&#xff0c;另外一个呢&#xff0c;就是深井水&#xff0c;重点是啥呢&#xff1f;就是无论我们用哪一种&#xff0c;能够把温度降到…

新版Win11强制开启Bitlocker已实锤,难道真就治不了它了?(含自制工具下载)

网管小贾 / sysadm.cc 满院芳草绿&#xff0c;几树梨花香。 如此大一座院落中&#xff0c;唯范贤一人正自斟自饮悠闲地品着茶。 忽闻得一阵微风拂面&#xff0c;似乎有人在呼喊他…… “哥……哥㖿……原来你在这儿啊……哎哟……” 范贤转过脸去&#xff0c;正想看看来者何…

【虚拟现实】二、主要的AR/VR硬件设备

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 2.1 微软HoloLens 微软HoloLens是一款领先的混合现实设备&#xff0c;结合了AR和VR的元素&#xff0c;允许用户…

计算机科学(学习笔记三)

内容来源&#xff1a;计算机科学 指令和程序 指令&#xff1a;指示计算机要做什么的代码&#xff0c;多条指令共同组成程序。 计算机指令长度 由于早期计算机每个字只有8位&#xff0c;指令只占4位&#xff0c;意味着只能有16个指令&#xff0c;这远远不够。 现代计算机有两…