update the method

This commit is contained in:
wolegca 2019-09-20 12:31:47 +08:00
parent a70cbd93ce
commit 72ec664c0f
7 changed files with 77 additions and 45 deletions

7
content.json Normal file
View File

@ -0,0 +1,7 @@
[
{
"title": "笔记1",
"date": "2019-09-19$1",
"hasCode": false
}
]

View File

@ -0,0 +1,9 @@
<span>笔记1首字下沉的技巧</span>
<p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那下面小编给大家分享一下CSS如何实现首字下沉效果</p>
<p>首先准备一个HTML文档然后在文档中准备好一段文字如下图所示</p>
<img src="images/note1/1.jpg" alt="截图1">
<p>接下来就去除浏览器的间隙将margin以及padding都设置为0。然后设置body的样式如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了设置行间距段落宽度等。然后定位到p元素的first-child然后找到其第一个字这里用到的是first-letter如下图所示
</p>
<img src="images/note1/2.jpg" alt="截图2">
<p>最后我们运行以后,你会看到如下图所示的效果,第一个字是不是下沉了</p>
<p>综上所述实现首字下沉效果主要运用了CSS的first-letter选择器给其添加样式即可</p>

View File

@ -170,7 +170,6 @@ body {
width: 100%; width: 100%;
position: relative; position: relative;
padding: 50px 20px 25px; padding: 50px 20px 25px;
overflow-y: scroll;
transition: padding .5s ease .1s; transition: padding .5s ease .1s;
left: 50%; left: 50%;
transform:translateX(-50%) transform:translateX(-50%)

View File

@ -32,40 +32,13 @@
</label> </label>
<div class="content-border"> <div class="content-border">
<div class="content"> <!--文章-->
<span>笔记1首字下沉的技巧</span>
<p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那下面小编给大家分享一下CSS如何实现首字下沉效果</p>
<p>首先准备一个HTML文档然后在文档中准备好一段文字如下图所示</p>
<img src="images/note1/1.jpg" alt="截图1">
<p>接下来就去除浏览器的间隙将margin以及padding都设置为0。然后设置body的样式如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了设置行间距段落宽度等。然后定位到p元素的first-child然后找到其第一个字这里用到的是first-letter如下图所示
</p>
<img src="images/note1/2.jpg" alt="截图2">
<p>最后我们运行以后,你会看到如下图所示的效果,第一个字是不是下沉了</p>
<p>综上所述实现首字下沉效果主要运用了CSS的first-letter选择器给其添加样式即可</p>
</div>
<div class="content">
<span>笔记2css选择器</span>
<p>有时候我们会想选择众多兄弟元素中特定次序的元素这个怎么通过css来选中呢这里有个技巧就是巧用css的child选择器</p>
<p>1、first-child</p>
<p>first-child表示选择列表中的第一个标签。代码如下
<pre><code></code></pre>
</div>
<div class="content">
<span>笔记3</span>
</div>
<div class="content">
<span>笔记4</span>
</div>
<div class="sidebar-border"> <div class="sidebar-border">
<div class="sidebar"> <div class="sidebar">
<div> <div>
往期回顾 往期回顾
</div> </div>
<div> <!--列表-->
content 2
</div>
</div> </div>
</div> </div>
</div> </div>
@ -74,7 +47,7 @@
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/drag.js"></script> <script src="js/drag.js"></script>
<script src="js/initialize.js"></script> <script src="js/initialize.js"></script>
<script src="js/main.js"></script> <script src="js/index.js"></script>
</body> </body>
</html> </html>

32
js/index.js Normal file
View File

@ -0,0 +1,32 @@
// $.ajax({
// type:"GET",
// url:"https://javacloud.bmob.cn/0104a7ae840e3555/counter?name=wcx",
// async:true,
// success:function(res){
// message.alert('提示',res);
// },
// error:function(){
// message.alert('提示','error!');
// }
// });
$.ajax({
type: "GET",
url: "content.json",
dataType: "json",
success: function (response) {
var lastIndex = response.length - 1;
if (response[lastIndex]['hasCode'] == true)
loadScript('content/js/' + response[lastIndex]['date'] + '.js');
$.ajax({
type: "GET",
url: 'content/html/' + response[lastIndex]['date'] + '.html',
success: function (response) {
appendContent(response);
}
});
}
});

View File

@ -78,6 +78,29 @@ var message = new function () {
} }
} }
function loadScript(url, callback){
var script = document.createElement('script');
script.src = url;
document.head.appendChild(script);
if(callback)
callback();
}
function loadCss(url, callback){
var css = document.createElement('link');
css.rel = 'stylesheet';
css.href = url;
document.head.appendChild(css);
if(callback)
callback();
}
function appendContent(content){
var div = $('<div class="content">');
div.append(content);
$('.content-border').prepend(div);
}
function uuid() { function uuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, var r = Math.random() * 16 | 0,
@ -190,4 +213,6 @@ function Base64() {
} }
return string; return string;
} }
} }
console.log('\n' + base64.decode('4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paE4paR4paRCuKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkOKWiOKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWhOKWgOKWkuKWjOKWkQrilpHilpHilpHilpHilpHilpHilpHilpHilpDiloDilpLilojilpHilpHilpHilpHilpHilpHilpHilpHiloTiloDilpLilpLilpLilpAK4paR4paR4paR4paR4paR4paR4paR4paQ4paE4paA4paS4paS4paA4paA4paA4paA4paE4paE4paE4paA4paS4paS4paS4paS4paS4paQCuKWkeKWkeKWkeKWkeKWkeKWhOKWhOKWgOKWkuKWkeKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWiOKWkuKWkuKWhOKWiOKWkuKWkArilpHilpHilpHiloTiloDilpLilpLilpLilpHilpHilpHilpLilpLilpLilpHilpHilpHilpLilpLilpLiloDilojilojiloDilpLilowK4paR4paR4paQ4paS4paS4paS4paE4paE4paS4paS4paS4paS4paR4paR4paR4paS4paS4paS4paS4paS4paS4paS4paA4paE4paS4paSCuKWkeKWkeKWjOKWkeKWkeKWjOKWiOKWgOKWkuKWkuKWkuKWkuKWkuKWhOKWgOKWiOKWhOKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWiOKWkuKWkArilpHilpDilpHilpHilpHilpLilpLilpLilpLilpLilpLilpLilpLilozilojilojiloDilpLilpLilpHilpHilpHilpLilpLilpLiloDiloQK4paR4paM4paR4paS4paE4paI4paI4paE4paS4paS4paS4paS4paS4paS4paS4paS4paS4paR4paR4paR4paR4paR4paR4paS4paS4paS4paSCuKWgOKWkuKWgOKWkOKWhOKWiOKWhOKWiOKWjOKWhOKWkeKWgOKWkuKWkuKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkuKWkuKWkgrljZXouqvni5flsLHov5nmoLfpu5jpu5jlnLDnnIvnnYDkvaDvvIzkuIDlj6Xor53kuZ/kuI3or7TjgII='));

View File

@ -1,13 +0,0 @@
// $.ajax({
// type:"GET",
// url:"https://javacloud.bmob.cn/0104a7ae840e3555/counter?name=wcx",
// async:true,
// success:function(res){
// message.alert('提示',res);
// },
// error:function(){
// message.alert('提示','error!');
// }
// });
console.log('\n' + base64.decode('4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paE4paR4paRCuKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkOKWiOKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWhOKWgOKWkuKWjOKWkQrilpHilpHilpHilpHilpHilpHilpHilpHilpDiloDilpLilojilpHilpHilpHilpHilpHilpHilpHilpHiloTiloDilpLilpLilpLilpAK4paR4paR4paR4paR4paR4paR4paR4paQ4paE4paA4paS4paS4paA4paA4paA4paA4paE4paE4paE4paA4paS4paS4paS4paS4paS4paQCuKWkeKWkeKWkeKWkeKWkeKWhOKWhOKWgOKWkuKWkeKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWiOKWkuKWkuKWhOKWiOKWkuKWkArilpHilpHilpHiloTiloDilpLilpLilpLilpHilpHilpHilpLilpLilpLilpHilpHilpHilpLilpLilpLiloDilojilojiloDilpLilowK4paR4paR4paQ4paS4paS4paS4paE4paE4paS4paS4paS4paS4paR4paR4paR4paS4paS4paS4paS4paS4paS4paS4paA4paE4paS4paSCuKWkeKWkeKWjOKWkeKWkeKWjOKWiOKWgOKWkuKWkuKWkuKWkuKWkuKWhOKWgOKWiOKWhOKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWiOKWkuKWkArilpHilpDilpHilpHilpHilpLilpLilpLilpLilpLilpLilpLilpLilozilojilojiloDilpLilpLilpHilpHilpHilpLilpLilpLiloDiloQK4paR4paM4paR4paS4paE4paI4paI4paE4paS4paS4paS4paS4paS4paS4paS4paS4paS4paR4paR4paR4paR4paR4paR4paS4paS4paS4paSCuKWgOKWkuKWgOKWkOKWhOKWiOKWhOKWiOKWjOKWhOKWkeKWgOKWkuKWkuKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkuKWkuKWkgrljZXouqvni5flsLHov5nmoLfpu5jpu5jlnLDnnIvnnYDkvaDvvIzkuIDlj6Xor53kuZ/kuI3or7TjgII='));