-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdetail.html
161 lines (159 loc) · 8.1 KB
/
detail.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>详细博客界面</title>
<link rel="stylesheet" href="./css/detail.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1194436_6vw5tjr6dgk.css">
<script src="./js/detail.js"></script>
</head>
<body>
<div class="header">
<div class="headerBox">
<h1>XXX个人博客</h1>
<ul class="nav">
<li><a href="index.html">网站首页</a></li>
<li><a href="priblog.html">个人博客日记</a> </li>
<li><a href="#">网站制作</a></li>
<li><a href="detail.html">详细界面</a></li>
<li><a href="aboutme.html">关于我</a></li>
<li><a href="timeline.html">时间轴</a></li>
</ul>
<div class="rearch">
<a href=""class="iconfont icon-sousuo"></a>
</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="textdoc">
<div class="title">个人博客日记
<div class="wid"></div>
<div class="locate">您现在的位置是：首页>个人博客日志</div>
</div>
<h1>安静的做一个爱设计的女子</h1>
<div class="date">
<img src="./image/c06.png" alt="">
<span>2018-11-08</span><span>【个人博客日记】</span><span>5726人已围观</span>
</div>
<div class="brief">
<b>简介：</b> 自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。每当看到自己喜欢的配色图片
</div>
<div class="textarea">
<p>
自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。每当看到自己喜欢的配色图片或者布局，惊艳的js或者css3效果的时候，就有了做模板的冲动。</p>
<img src="./image/a02.jpg" alt="">
<p>
每一套模板，我都是利用了一些碎片化的时间慢慢做的，前后大概持续了一周多的时间，因为每个人的逻辑思维方式不一样，我想要更简洁明了的代码，所以每一套模板我都是自己一个个用键盘敲出来的。
</p>
<img src="./image/a03.jpg" alt="">
<p>对于个人博客模板，我一直坚持这样一个原则，那就是不仅漂亮，而且代码要少！因为要做出精美的个人博客模板是需要大量的时间投入的，没有一个人可以轻而易举的搞定一套个人博客模板，尤其是针对性（或专业性）极强的模板，一份好的模板，要求其代码在精炼的同时还要漂亮，后期内容上了，还要利于网站收录。</br>
<p>个人博客模板除了布局，颜色选择，图片修饰都是需要花时间和精力的，其实，制作博客模板最花时间的不是提炼代码，而是页面的排版设计，这里包含了多个方面，分别是排版、配色、图片，在处理这么多问题的同时还要求突出重点，确保每一页只有一个中心论点，这对于本身功底差的人来说是一件困难的事情！</p>
<img src="./image/a04.jpg" alt="">
</div>
<div class="zan">很赞哦! (186)</div>
<div class="shangxia">
<span>上一篇: <a href="">电话以外的宁静</a></span>
<span>下一篇: <a href="">返回列表</a></span>
</div>
</div>
<div class="discuss">
<div class="title">文章评论<div class="wid"></div></div>
<form action="">
用户名：<input type="text" name="username"><br>
选择头像：
<div class="boxImg">
<div class="humb"><img src="./image/tx1.jpg" alt=""></div>
<div class="humb"><img src="./image/tx2.jpg" alt=""></div>
<div class="humb"><img src="./image/tx3.jpg" alt=""></div>
<div class="humb"><img src="./image/tx4.jpg" alt=""></div>
<div class="humb"><img src="./image/tx5.jpg" alt=""></div>
<div class="humb"><img src="./image/tx6.jpg" alt=""></div>
<div class="humb"><img src="./image/tx7.jpg" alt=""></div>
</div>
<span>限写100字</span>
<textarea name="" id="" cols="125" rows="10"></textarea>
<input type="submit" value="提交" name="input">
<button name="resett">重置</button>
</form>
<ul>
<!-- <li>-->
<!-- <div class="rentou"><img src="./image/rentou.jpg" alt=""></div>-->
<!-- <div class="p"><p><span>2019-05-13 08:46:28</span> JinRich</p>-->
<!-- <p>哈哈哈哈哈</p></div>-->
<!-- </li>-->
</ul>
</div>
<!-- 左边大框结束-->
</div>
<div class="right">
<div class="clicksort">
<div class="title">点击排行<div class="wid"></div></div>
<div class="connect">
<a href=""><img src="./image/1.jpg" alt=""></a>
<ul class="textarea">
<li>
<i></i><a href="">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的</a>
</li>
<li><i></i><a href="">个人博客，属于我的小世界！</a></li>
<li><i></i><a href="">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的</a></li>
</ul>
</div>
</div>
<div class="recommend">
<div class="title">本站推荐<div class="wid"></div></div>
<a href="">
<div class="da">
<img src="./image/4.jpg" alt="">
<span>个人网站做好了，百度不收录怎么办？来，看看他们怎么做的</span>
</div>
<div class="hrey">
<div class="xiao"><img src="./image/b02.jpg" alt=""></div>
<p>个人博客，属于我们的小世界!</p>
</div>
</a>
</div>
<div class="jin"><a href=""><img src="./image/ad.jpg" alt=""></a></div>
<div class="label">
<div class="title">标签云<div class="wid"></div></div>
<ul>
<li>教程</li>
<li>活动</li>
<li>视频教程</li>
<li>网站</li>
<li>今夕何夕</li>
<li>比赛</li>
<li>个人</li>
<li>个人</li>
<li>视频教程</li>
<li>摩羯座</li>
<li>程序员</li>
<li>金牛座</li>
<li>视频教程</li>
</ul>
</div>
<div class="guass">
<div class="title">猜你喜欢<div class="wid"></div></div>
<ul>
<li><a href="">安静地做一个爱设计的女子</a></li>
<li><a href="">个人博客，属于我的小世界！</a></li>
<li><a href="">遇见一个未知的你</a></li>
<li><a href="">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的</a></li>
<li><a href="">电话以外的宁静</a></li>
</ul>
</div>
<div class="jin"><a href=""><img src="./image/ad.jpg" alt=""></a></div>
<!-- 右边大框结束-->
</div>
<!-- //消除左右浮动的影响-->
<div style="clear: both;"></div>
<!-- //整体大框的结束-->
</div>
<footer>
<div class="box">
<div>@2019.05.19</div>
<div>nuc.Zhongbei Univercity</div>
</div>
</footer>
</body>
</html>