如何仿建网站?附带个人博客样式搭建实例

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

如何仿建网站?附带个人博客样式搭建实例

OIer|zythonc   2020-03-06 我要评论
# 本文及技术仅供学习,请勿用于其他用途 ## 更新记录 >【1】2020.03.06-16:51 > > 1.完善内容 ## 正文 ### 前言 #### 本教程的博客园样式实例不公布完整css代码,白嫖党请走开,氪金大佬另谈 #### 本教程为初级篇,未涉及JavaScript 我们每天都会在在博客园写博客,看博客,时间久了,未免对这千篇一律的博客皮肤感到烦躁 那能不能想办法更改呢 答案是可以的 有的人可能会问,我自己又没有什么编程基础(那你来博客园干啥awa),更何况不会css,该怎么办呢? 肯定是学习 + 看教程喽 本文就是一篇附带实例的教程 那么,你要做的就是学习 根据个人实际经历来看,我建议你 + 8天学习HTML(个人实际5天) + 8天学习css(个人实际10天) + 10天学习JavaScript(个人实际10天) (本人有一定的编程基础) 然后就能达到随心所欲的修改博客园皮肤的水平了 ~~**想达到专业水平还是老老实实的学上半年再说吧**~~ 好了,回归正题 仿建网站的前提是千万不要侵权,即使是做个皮肤自己欣赏欣赏,也要记得加上原网站的链接 首先你要选择一个你认为满意的网站 然后学习它的源代码 然后自己在博客园码一些css的东西 就这么简单 下面还是让我们边看实例边说话 ### 实例时间 先放张图片感受一下 ![3qqhZV.jpg](https://s2.ax1x.com/2020/03/06/3qqhZV.jpg) **图1 原网站** ![3qbX4g.jpg](https://s2.ax1x.com/2020/03/06/3qbX4g.jpg) **图2 个人博客园皮肤** 没错,是高仿 首先先让我们来看一下原来的样子 ![3qzckt.png](https://s2.ax1x.com/2020/03/06/3qzckt.png) **图3 无css** 没错,非常磕碜(不磕碜我就不改了awa) 首先我们应该明白仿建一个网站需要怎么做 以这个网站为例,我们需要按顺序的像做加法一样慢慢实现 $head$ + $body$ + $foot$ 而$body$又可以分为 $left$ + $right$ + $list$ 然后是后期的 $fix$ + $HTMLhead$ 总共七步 $head$ + $left$ + $right$ + $list$ + $foot$ + $fix$ + $HTMLhead$ 再算上前期的$study$,总共就是8步 ### 第一步:study 首先我们按F12来查看网页源代码,一步步追溯看看每一步到底是怎么实现的 经过查找我们可以发现**网页的主体div** ```
``` 这个div块中又包含了这样几个div ```
``` 鼠标悬停在第一个div代码上时,发现logo被指出 由此我们知道第一个div代码块是用来实现logo及其相关 我们用不到,因此无需研究 鼠标悬停在第二个div代码上时,发现图片 ![3LPvwQ.png](https://s2.ax1x.com/2020/03/06/3LPvwQ.png) **图4 头部** 被指出,而这张图片正是我们所需要的头部 以此类推,我们会发现第3,4个div分别是body和foot 而第2,4个div是空div 所以,我们就开始主要研究第三个div div展开后的代码 ```
/*以下省略N行*/ ``` 为啥省略呢,一是因为太长,二是因为不需要 通过观察可以发现,我们需要学习的就只有前两个div + ```mc_map_border_left``` 和 + ```mc_map_border_right``` 鼠标点击div代码,我们会发现右侧出来了这么一个东西 ![3LdzWj.png](https://s2.ax1x.com/2020/03/06/3LdzWj.png) **图4 右侧的样式表** 其中橙色笔框住的就是关于这个div的所有css样式 而红色笔框住的就是我们需要的图片 以此类推,我们可以找到我们所需要的四张图片 接下来就是写css去实现 至于怎么实现,接下来让我们观察一下博客园的页面源代码 (这段代码虽然长,但是有插在这里的必要,如果不想看可以跳过) ```

list的泛型

更新记录

【1】2020.02.12-21:26

1.完善内容

正文

在学习list集合时,我看到书上写list的格式时
List<E> list = new ArrayList<>();
并且注明:E代表Java的泛型

作为一个还没学习泛型的小白,自然不知道啥是泛型
没事,书上说:例如:集合中的元素为字符串类型,那么E可以修改为String
那么,就很明白了(其实没明白)
接着就是写代码

List<int> list1 = new ArrayList<>();
List<int> list2 = new LinkedList<>();

结果编译未通过
是啥原因呢?

原来,必须是继承了Object的对象才可以泛型
int是基本数据类型,所以不可以

所以就用包装类吧
正确写法:

List<Integer> list1 = new ArrayList<>();
List<Integer> list2 = new LinkedList<>();
分类: Java
标签: Java
好文要顶 关注我 收藏该文
OIer|zythonc
关注 - 0
粉丝 - 1
0
0
« 上一篇: 抛出异常
» 下一篇: Java学习之路
posted @ 2020-02-12 21:34  OIer|zythonc  阅读(4)  评论(0)  MD  编辑  收藏
刷新评论刷新页面返回顶部
发表评论
编辑 预览
360bd562-eb5f-40cd-2406-08d76d60a59c

不改了 退出

[Ctrl+Enter快捷键提交]

【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【推荐】58到家技术VP沈剑的架构师成长之路
【推荐】阿里专家五年方法论总结!技术人如何实现职业突破?
【推荐】这6种编码方法,你掌握了几个?
相关博文:
· 、List<?>、List、List<?extends>、List<?super>" href="https://www.cnblogs.com/coisini/p/10964876.html" target="_blank" onclick="clickRecomItmem(10964876)">List<Object>、List<?>、List、List<?extends>、List<?super>
· Python List 列表list()方法
· Java 集合嵌套List of List
· list嵌套list
· LeetCode(list): list cycle, rotate arr/list, palindrom list, arr/list intersection,
» 更多推荐...
精品问答:微服务架构 Spring 核心知识 50 问
最新 IT 新闻:
· 首推全云端开发体验,腾讯云构建 Serverless 应用新标准
· 三星电子再度临时关闭龟尾手机工厂 一名员工新冠肺炎确诊
· OPPO Find X2 Pro 评测:这可能是今年屏幕最好的手机
· 传微医下周挑选投行负责IPO 拟下半年上市募集10亿美元
· OPPO首款智能手表发布:支持eSIM独立通信 售价1499元起
» 更多新闻...
``` 吐槽一下码风,太丑了。。 好了言归正传,这其中的80%css我们都要重写 这么大的工作量,就要有个顺序 我们先从最外层的div改起 没有什么意外的话最外层一共有两个div ```
``` 而这里我们用不到去改写第一个div 所以就直接去写第二个div的home ``` #home { opacity: 0.90; background-color: transparent; margin: 0 auto; min-width: 950px; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); width: 65%; } ``` #### 接下来不再提供完整css代码,仅提供思路 #### 认真学习请往下看,妄想将css片段拼接起来的自觉Alt + F4 接下来就是下一级的div ```
``` 我们从上往下解决 首先header的用途是用来设置mcbbs中头部的背景图片的 所以说css肯定有个设置背景图片的代码 然后分别设置xy轴的不重复 ``` #header{ /****/ } ``` 对,写完了 然后再看header的下一级 ```
``` 默认都是从上往下实现 首先是blogTitle 因为header的背景图有一部分是深色的 所以要把文字居中放置 我们看起来居中就行了 所以我们使用```left: XXXpx``` 然后是设置字体的粗细,大小,距离,位置 关键代码```position: absolute;``` 记得写的时候不要写错 因为我们blogTitle是针对标题的样式 所以以下写法是错误的 ``` #blogTitle{ } ``` 以下写法是正确的 ``` #blogTitle h1{ } ``` 接下来是navigator navigator就是那一横排的按钮 对于navigator,我们需要更改的并不算多,但却有**小细节** 依然是添加背景,设置不重复,调整位置 调整完之后,很多人会发现这次添加的图片与上面添加的header里得图片并没有完全接合 这是什么原因呢 让我们仔细看看原来的css,我们会发现这么一段: ``` border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; ``` **这两段就是造成图片没有接合的罪魁祸首!** 现在我们把这两段删去就可以了 **注意:没有禁用默认css的人不要删,而是把1px改为0px** **以后图片拼接时不再说明,请自行找到这段后修改** 有的人会问:现在为什么依然没有接合呢? 那是因为你没有添加这么一段css代码 ``` margin-top:-1px; ``` 它自己接不上,就由我们来帮助它! 再看看此时的页面,你会发现,虽然左边有图片了,但是右侧明显少了什么 ![3LRBFI.png](https://s2.ax1x.com/2020/03/06/3LRBFI.png) **图6 完美效果** 上图是我们想要的结果,但是我们会发现,自己实现后**右边完全没有东西** 看看原网站是怎么实现的: ```
``` 可以看到,它是使用了一个嵌套的div,而博客园并没有这种操作(MarkDown编辑器反正没有,其他的编辑器。。。。) 接下来就要用一种常见的操作来解决这个问题了—————— **图片合并** 通过查看header里的那张图片的分辨率可知,宽为1129 所以我们创建一个长为1129的空白画布(当然是在画图里创建了,Canvas和beginPaint()的请走开,这里是HTML教程awa) 把两张图片导进去,一个放左边,一个放右边,最后调一下背景颜色就可以了 ![3LfkvT.png](https://s2.ax1x.com/2020/03/06/3LfkvT.png) **图7 画好的图片** 用这张图片替换原来的图片,你就会发现,图6的效果已经出来了。 接下来是```
```里main的实现 这个其实最简单,设置图7为背景,x轴不重复,y轴重复就可以了 main里有3个div,其中我们用到的只有两个: ```
``` mainContent是文章主体 sideBar则是公告排行榜那一堆东西 因为以后要照顾到navigator(没错,它还会被修改) 所以我们现在先缩小一下mainContent 顺便把位置往左调调 ``` margin-left: -25em; width: 66%; ``` 虽然这样越调越难看,但是这样是为了以后做准备 mainContent里还有一个mainContent .forFlow 这个也要重写,只添加一个与顶端距离增大的属性就好了 sideBar的调整也不多,把它往左移,一直移到书本里头就行 (背景就是我说的那本书) sideBar里有个控制标题样式的catListTitle 在那里边添加背景图片的代码,设置不重复,然后设置字体白色居中 接下来是footer,添加背景,不重复,之后字体怎么调就看你的了 至此,初步框架已经弄好 ### 完善页面 我们在返回头来弄navigator 要想将那一排按钮变为左边一排,怎么实现呢 关键代码 ``` float: initial; ``` 其他的调调位置就可以了 最后添加一段页首HTML就完美了 ### 后记&声明 世上本没有难事 可怕的是你不去认真学习它,面对它 #### css源码提供出售

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们