From c45d42996a2dff45aa807912503e3b58c43677a0 Mon Sep 17 00:00:00 2001 From: wolegca <2738076308@qq.com> Date: Sun, 15 Sep 2019 14:27:21 +0800 Subject: [PATCH] update the layout --- base.js | 15 ++++++--- drag.js | 2 -- highlight.css | 7 ++++ index.css | 45 +++++++++++++++++++++++++ index.html | 91 ++++++++++++++++++++++++++++++--------------------- myui.css | 48 ++++++++++++++++----------- 6 files changed, 146 insertions(+), 62 deletions(-) create mode 100644 highlight.css diff --git a/base.js b/base.js index d0341e3..e1523cb 100644 --- a/base.js +++ b/base.js @@ -27,19 +27,26 @@ $(function () { p.remove(); m.remove(); },300); + message.alertCode = ''; }); })(); var message = new function () { + this.alertCode = ''; this.alert = function (header, content) { + if(message.alertCode){ + console.warn('存在未关闭的提示框'); + return; + } + var id = uuid(); var html = '
' + '
' + - header + + (header || '提示框') + '
' + '
' + - content + + (content || '提示内容') + '
' + '
'+ '关闭'+ @@ -47,9 +54,9 @@ var message = new function () { '
' + '
'; $(document.body).append(html); - $('.mask').show().css('animation','fadeIn .2s forwards'); + $('.mask').css('animation','fadeIn .2s forwards'); $('#mh-'+id).Drag($('#mc-'+id)); - return id; + message.alertCode = id; } } diff --git a/drag.js b/drag.js index f36fdfc..3ec1612 100644 --- a/drag.js +++ b/drag.js @@ -10,7 +10,6 @@ Rx = event.pageX - (parseInt(target.css("left")) || 0); Ry = event.pageY - (parseInt(target.css("top")) || 0); M = true; - scaleChanged = false; }) .mouseup(function (event) { M = false; @@ -23,7 +22,6 @@ left: event.pageX - Rx }); } - scaleChanged = true; }); } })(document); \ No newline at end of file diff --git a/highlight.css b/highlight.css new file mode 100644 index 0000000..7d3ee85 --- /dev/null +++ b/highlight.css @@ -0,0 +1,7 @@ +.css-keyword{ + color:#ff7800!important +} + +.css-value{ + color:#090!important +} \ No newline at end of file diff --git a/index.css b/index.css index e69de29..f22f6d0 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,45 @@ +.container{ + max-width: 1440px; + /* height: 100%; */ + margin:0 auto; + position: relative +} + +.sidebar-border{ + position: absolute; + left:0px; + top:0px; + display: block; + width:250px; + /* height:100%; */ + background-color: transparent; + padding-top:50px; + overflow-x:hidden; + /* border:1px solid white; */ + padding-bottom: 10px; + padding-left: 10px +} + +.sidebar{ + position: relative; + display: block; + width:100%; + /* min-height:100%; */ + background-color:rgba(255,255,255,.5); + border-radius: 15px; + padding:15px +} + +.sidebar div:first-child{ + font-size: 20px; + font-weight: bold +} + +@media screen and (max-width:700px){ + .sidebar-border{ + position: relative; + width:100%; + height:auto; + padding:0px + } +} \ No newline at end of file diff --git a/index.html b/index.html index 6115610..1d5cd52 100644 --- a/index.html +++ b/index.html @@ -7,54 +7,71 @@ + LAOZHONGYI BLOG -
AHPU 老中医的博客
- -
- -
- - +
-
-
- 笔记1 -

在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果

-

首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示

- 截图1 -

接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示 -

- 截图2 -

最后我们运行以后，你会看到如下图所示的效果，第一个字是不是下沉了

-

综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可

-
-
- 笔记2 +
AHPU 老中医的博客
+ +
+
    +
  • 首页
    • +
  • 关于
    • +
    • +
-
- 笔记3 + + -
-
- 笔记4 +
+
+ 笔记1：首字下沉的技巧 +

在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果

+

首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示

+ 截图1 +

接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示 +

+ 截图2 +

最后我们运行以后，你会看到如下图所示的效果，第一个字是不是下沉了

+

综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可

+
+
+ 笔记2：css选择器 +

有时候我们会想选择众多兄弟元素中特定次序的元素，这个怎么通过css来选中呢？这里有个技巧，就是巧用css的child选择器

+

1、first-child

+

first-child表示选择列表中的第一个标签。代码如下： +

+
+
+ 笔记3 +
+
+ 笔记4 + +
+
+
+
+ 往期回顾 +
+
+ content 2 +
+
+
- diff --git a/myui.css b/myui.css index 8b0a720..747a1cc 100644 --- a/myui.css +++ b/myui.css @@ -8,15 +8,17 @@ body, html { margin: 0; padding: 0; - height: 100%; - overflow: hidden + /* height: 100%; */ + /* overflow: hidden */ } body { background: black url(bg.jpg) repeat-y center; background-size: cover; width: 100%; - z-index: 0 + z-index: 0; + position: relative; + display: block } #menu-control { @@ -39,8 +41,8 @@ body { .menu-container { display: block; - position: relative; - float: left; + position: fixed; + /* float: left; */ top: 0; left: 0; height: 100%; @@ -113,7 +115,7 @@ body { [for=menu-control].content-mask { display: block; - position: absolute; + position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); @@ -137,7 +139,7 @@ body { position: relative; margin: 5px 0 0 3px; cursor: pointer; - transition: all .5s ease; + transition: all .2s ease; left:0px; top:0px } @@ -164,16 +166,18 @@ body { .content-border { width: 100%; - height: 100%; + /* height: 100%; */ position: absolute; - padding: 50px 50px 25px; + padding: 50px 20px 25px; overflow-y: scroll; - transition: padding .5s ease + transition: padding .5s ease; + left: 50%; + transform:translateX(-50%) } .content { min-height: 200px; - max-width: 800px; + max-width: 1000px; background-color: rgba(255, 255, 255, .5); border-radius: 15px; opacity: 1; @@ -201,18 +205,18 @@ body { text-align: left } -.content span { +.content>span { font-size: 24px; font-weight: bold } -.content span+p:first-letter { +.content>span+p:first-letter { float: left; font-size: 36px; font-weight: bold } -.content p~p { +.content>p~p { text-indent: 36px; } @@ -241,7 +245,7 @@ body { display: block; position: relative; width: 100%; - min-height: 20px; + min-height: 40px; background-color: rgb(40, 40, 40); cursor: move; border-radius: 10px 10px 0px 0px; @@ -294,13 +298,15 @@ body { } .mask { - position: absolute; - display: none; + position: fixed; + display: block; width: 100%; height: 100%; background-color: rgba(95, 95, 95, 0.7); z-index: 998; opacity: 0; + top:0px; + left: 0px } @keyframes fadeIn { @@ -336,10 +342,10 @@ body { width: 100%; } - input#menu-control:checked~label.content-mask { + /* input#menu-control:checked~label.content-mask { opacity: 0; visibility: hidden - } + } */ div.content-border { padding: 50px 5px 25px; @@ -357,6 +363,10 @@ body { margin-right: auto } + .content-border{ + padding-left: 260px; + } + } @media screen and (max-width:480px) {