linux办公网
【JavaEE】博客前端
创始人
2024-05-13 13:24:17
0次

目录

 一、列表页

1.1导航条

 1.2主题区域

1.2.1个人信息框

1.2.2 内容区

 二、登录页

三、详情页

 一、列表页

整体布局如下：

1.1导航条

导航条分为三块，整体都设置id为导航栏，然后左右分为导航栏左和导航栏右。左边靠左，右边靠右。再在开头加入一张图片。



博客列表页


我的博客系统

 首先我们需要把整个框架靠上整个浏览器页面，否则正常是会有空格的，使左右上下都没有空隙，处于一个盒子中。

* {margin: 0;padding: 0;box-sizing: border-box;
}

然后使小图片变小设置50px像素。

div#logo img {height: 50px;
}

 然后使导航条中的a标签变为白色，去掉下划线。

div#导航栏 a {color: #eee;text-decoration: none;
}

 导航条分为左右，需要让一边靠左一边靠右在父元素上设置display: flex。弹性布局:两个资源在主轴上justify-content: space-between;使导航栏出现左右两侧分区。先设置一个弹性布局：display: flex;设置颜色宽高之类的。padding-left: 100px;padding-right: 100px;使导航栏和左右有100px像素的间距。

div#导航栏 {background-color: rgba(0, 0, 0, .4);color: #eee;display: flex;width: 100%;height: 60px;align-items: stretch;justify-content: space-between;padding-left: 100px;padding-right: 100px;
}

然后呢继续设置弹性布局，需要使图片和文字在一行。display: flex;align-items: center;

 然后需要让图片和文字、文字和文字之间有距离需要增加一个宽度，调节弹性布局的主轴：justify-content: space-between;然后再设置宽度。

div#导航栏左 {display: flex;align-items: center;width: 220px;justify-content: space-between;
}div#导航栏右 {display: flex;align-items: center;width: 220px;justify-content: space-between;
}

 然后使图标设置圆形border-radius: 50%;然后让被遮挡的部分都不显示：overflow:hidden;

div#logo {width: 50px;height: 50px;border-radius: 50%;overflow:hidden;
}

 1.2主题区域

下图为主体区域的大致样式：

1.2.1个人信息框

佳佳
文章
2
分类
1

孩子选择器 结合 通配符选择器 此处的含义是: div#个人信息所有孩子（不是子孙）选中 。

首先配置个人信息的整体像素为6px。以及图片的像素120px。

还有小图标的形状设定。

div#个人信息 > * {margin: 6px;
}
div#avatar img {width: 120px;
}
div#avatar {width: 120px;height: 120px;overflow: hidden;border-radius: 50%;
}

 然后对有链接的文本取消下划线，设置颜色。

div#个人信息 a {color: #555;text-decoration: none;
}

 设置一个背景，使他滑动屏幕时不移动。

body {background-image: url(../img/cat.jpg);background-size: cover;background-repeat: no-repeat;background-attachment: fixed;
}

div#个人信息 {background-color: rgba(255, 255, 255, .8);border-radius: 12px;width: 180px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding: 12px; 
}

然后再设置整体得到颜色，像素，宽度，居中，设置间距等等，在导航条中讲过。

div#文章数量区域 {display: flex;text-align: center;width: 80px;justify-content: space-between;
}

然后使文章和的分类在同一行，数量对应，再设置宽。

1.2.2 内容区

    
  1. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
  2. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
  3. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
  4. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
  5. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
  6. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
  7. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
  8. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
  9. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
  10. 我的第一篇文章
    2023-01-05 10:19:28
    深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。一种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 
div#主体区域 {display: flex;align-items: start;justify-content: center;padding-right: 100px;
}

然后再把整个区域设置为中间，并设置右侧空白100px像素。

div#内容区 {background-color: rgba(255, 255, 255, .8);border-radius: 12px;width: 1000px;margin-left: 16px;
}

再将内容区设置离左空白16px像素，设置颜色等。

body {background-image: url(../img/cat.jpg);background-size: 100%;background-repeat: no-repeat;background-attachment: fixed;
}

设置背景为指定的图片。 

div#内容区 ol {list-style: none;
}

然后取消每一层的标记数字。

div.文章信息 {margin: 30px;
}
div.文章信息 > * {margin: 12px;
}
div.文章信息 h2 {text-align: center;
}

  使每个小文章有30px像素。看的更清晰。让文章下的所有信息像素为12px。让每个文章的标题居中。

div.文章信息 p.发表时间 {text-align: center;color: #c52813;
}
div.文章信息 p.文章简介 {text-indent: 2em;
}

让发表时间也居中并且置为红色。让文章简介首行留出两字符。

div.文章信息 div.功能区 {display: flex;align-items: center;justify-content: center;
}
div.文章信息 div.功能区 a {border: 2px solid #000;padding: 5px 15px;color: #000;text-decoration: none;
}

然后让功能区在块中处于中间位置，然后利用border: 2px solid #000给链接处加一个块围住，使块为白色，将块设置一个宽和高，然后取消链接的下划线。

list.css代码：

div#内容区 ol {list-style: none;
}div.文章信息 {margin: 30px;
}
div.文章信息 > * {margin: 12px;
}
div.文章信息 h2 {text-align: center;
}
div.文章信息 p.发表时间 {text-align: center;color: #c52813;
}
div.文章信息 p.文章简介 {text-indent: 2em;
}
div.文章信息 div.功能区 {display: flex;align-items: center;justify-content: center;
}
div.文章信息 div.功能区 a {border: 2px solid #000;padding: 5px 15px;color: #000;text-decoration: none;
}

layout.css代码：

* {margin: 0;padding: 0;box-sizing: border-box;
}body {background-image: url(../img/cat.jpg);background-size: cover;background-repeat: no-repeat;background-attachment: fixed;
}div#logo img {height: 50px;
}div#导航栏 a {color: #eee;text-decoration: none;
}div#导航栏 {background-color: rgba(0, 0, 0, .4);color: #eee;display: flex;width: 100%;height: 60px;align-items: stretch;justify-content: space-between;padding-left: 100px;padding-right: 100px;
}div#导航栏左 {display: flex;align-items: center;width: 220px;justify-content: space-between;
}div#导航栏右 {display: flex;align-items: center;width: 220px;justify-content: space-between;
}/* 孩子选择器 结合 通配符选择器 */
/* 此处的含义是: div#个人信息所有孩子（不是子孙）选中 */div#个人信息 > * {margin: 6px;
}div#个人信息 {background-color: rgba(255, 255, 255, .8);border-radius: 12px;width: 180px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding: 12px;
}div#logo {width: 50px;height: 50px;border-radius: 50%;overflow:hidden;
}div#个人信息 a {color: #555;text-decoration: none;
}div#avatar {width: 120px;height: 120px;overflow: hidden;border-radius: 50%;
}div#avatar img {width: 120px;
}div#文章数量区域 {display: flex;text-align: center;width: 80px;justify-content: space-between;
}
div#内容区 {background-color: rgba(255, 255, 255, .8);border-radius: 12px;width: 1000px;margin-left: 16px;
}div#主体区域 {display: flex;align-items: start;justify-content: center;padding-right: 100px;
}body {background-image: url(../img/cat.jpg);background-size: 100%;background-repeat: no-repeat;background-attachment: fixed;
}

 二、登录页

 登录页大致就长成这样，然后根据这个进行设计。



博客列表页



我的博客系统


登录



* {margin: 0;padding: 0;box-sizing: border-box;
}body {background-image: url(../img/cat.jpg);background-size: 100%;background-repeat: no-repeat;background-attachment: fixed;
}div#logo img {height: 50px;
}div#导航栏 a {color: #eee;text-decoration: none;
}div#导航栏 {background-color: rgba(0, 0, 0, .4);color: #eee;display: flex;width: 100%;height: 60px;align-items: stretch;justify-content: space-between;padding-left: 100px;padding-right: 100px;
}div#导航栏左 {display: flex;align-items: center;width: 220px;justify-content: space-between;
}div#导航栏右 {display: flex;align-items: center;width: 220px;justify-content: space-between;
}div#logo {width: 50px;height: 50px;border-radius: 50%;overflow:hidden;
}div#主体区域 {height: calc(100vh - 60px);display: flex;align-items: center;justify-content: center;
}div#登录框 {background-color: rgba(255, 255, 255, .8);width: 500px;padding: 16px;font-size: 1.5em;border-radius: 16px;
}div#登录框 h1 {text-align: center;
}div#用户名区域, div#密码区域, div#按钮区域 {margin: 16px 0;display: flex;
}.输入 label {display: flex;align-items: stretch;justify-content: space-between;
}.输入 span {width: 80px;
}.输入 input {width: 388px;height: 100%;font-size: 1.5em;padding: 6px 15px;border: none;background-color: #fff;outline: none;border-radius: 8px;
}button {width: 100%;font-size: 1.5rem;background-color: #531748;color: #fff;border: none;border-radius: 8px;padding: 6px 0;
}

 ​

三、详情页



博客列表页



我的博客系统


比特老陈
文章
2
分类
1
我的第一篇文章
2023-01-05 11:18:23
深度学习框架编译优化时，需要先根据计算逻辑形成一个逻辑计算图，然后再改写计算图，最后执行改写后的计算图。其中生成逻辑计算图方式有两种。
种计算图生成是基于 trace tensor 的，跟踪 tensor 的执行路径。tensor 执行时，基于函数重载，可以落到支持 tensor 计算的框架自定义函数，该函数一般是 c++ 层的。c++ 层的自定义函数中，功能是用于生成一个 Operation 的符号表达。比如一个对于加法运算，trace 就是记录一个符号化的加法算子。如此一连串的运算就被转换了符号化的计算图。
另外一种计算图生成是基于 AST（抽象语法树） 解析的。在代码执行前，直接根据 Python 文本代码得到 Python AST，然后根据 AST 来翻译成计算图（也叫做中间代码 IR）。
Python（特指 CPython）解释器执行，第一阶段会先把 Python 源码解析成 AST，第二阶段根据 AST 生成和优化 ByteCode（字节码），第三阶段在虚拟机中执行 ByteCode。
基于 AST 解析的计算图生成，发生在这里的第一阶段；基于 trace tensor 的计算图生成，发生在第三阶段之后。

详情页简单些来就更简单了，延续列表页大部分的代码，左侧的个人信息以及导航条都延续，只更改内容区。

div#内容区 {padding: 16px;/* 100vh：浏览器的高度 */min-height: calc(100vh - 60px);
}div#内容区 h1 {text-align: center;margin-bottom: 12px;
}div#内容区 p.发表时间 {text-align: center;color: #c52813;margin-bottom: 12px;
}div#内容区 p.文章段 {text-indent: 2em;line-height: 2em;margin-bottom: 12px;
}

 

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：交换机的基本原理（特别是动态ARP、静态ARP、代理ARP）

下一篇：常见垃圾回收器

相关内容

热门资讯

【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介： 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分，它可以提供高速稳定的网络连接。但是，有时候我们会遇到不能访问光...
AWSECS：访问外部网络时出... 如果您在AWS ECS中部署了应用程序，并且该应用程序需要访问外部网络，但是无法正常访问，可能是因为...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限：此外...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件，主要用于保护内网安全。在日常使用过程中，卸载该软件是一种常...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如，在Dockerfile中添加以下代码：FR...
AsusVivobook无法开... 首先，我们可以尝试重置BIOS（Basic Input/Output System）来解决这个问题。...
ASM贪吃蛇游戏-解决错误的问... 要解决ASM贪吃蛇游戏中的错误问题，你可以按照以下步骤进行：首先，确定错误的具体表现和问题所在。在贪...
月入8000+的steam搬砖... 大家好，我是阿阳 今天要给大家介绍的是 steam 游戏搬砖项目，目前...