背景图片固定
This commit is contained in:
parent
82519d9007
commit
0e1224361c
@ -7,6 +7,7 @@ body {
|
|||||||
line-height: 1.5; /* 设置行高为字体大小的1.5倍 */
|
line-height: 1.5; /* 设置行高为字体大小的1.5倍 */
|
||||||
background-size: cover; /* 背景图片覆盖整个元素区域,可能会被裁剪以保持宽高比 */
|
background-size: cover; /* 背景图片覆盖整个元素区域,可能会被裁剪以保持宽高比 */
|
||||||
background-repeat: no-repeat; /* 背景图片不重复 */
|
background-repeat: no-repeat; /* 背景图片不重复 */
|
||||||
|
background-attachment: fixed; /* 背景图片固定,不随页面滚动 */
|
||||||
}
|
}
|
||||||
img { border: 0; display: block }
|
img { border: 0; display: block }
|
||||||
ul, li { list-style: none; }
|
ul, li { list-style: none; }
|
||||||
@ -17,7 +18,30 @@ a:hover { text-decoration: none; color: #000; }
|
|||||||
.f_l { float: left }
|
.f_l { float: left }
|
||||||
.f_r { float: right }
|
.f_r { float: right }
|
||||||
article { width: 1000px; margin: 80px auto 0; overflow: hidden; zoom: 1; }
|
article { width: 1000px; margin: 80px auto 0; overflow: hidden; zoom: 1; }
|
||||||
aside { width: 30%; float: left; overflow: hidden; display: block; position: relative; z-index: 1 }
|
.l_box {
|
||||||
|
/* 左边栏CSS样式规则 */
|
||||||
|
float: left; /* 举例:让这个aside元素向左浮动 */
|
||||||
|
width: 20%; /* 举例:设置宽度为父容器的25% */
|
||||||
|
margin-right: 20px; /* 举例:设置右边距为20px */
|
||||||
|
background-color: #f0f0f0; /* 举例:设置背景颜色为浅灰色 */
|
||||||
|
/* 您可以添加更多的样式规则 */
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1
|
||||||
|
}
|
||||||
|
.r_box {
|
||||||
|
/* 右边栏CSS样式规则 */
|
||||||
|
float: right; /* 举例:让这个aside元素向右浮动 */
|
||||||
|
width: 20%; /* 举例:设置宽度为父容器的20% */
|
||||||
|
margin-left: 20px; /* 举例:设置右边距为20px */
|
||||||
|
background-color: #f0f0f0; /* 举例:设置背景颜色为浅灰色 */
|
||||||
|
/* 您可以添加更多的样式规则 */
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1
|
||||||
|
}
|
||||||
main { overflow: hidden; width: 68%; float: right; display: block; }
|
main { overflow: hidden; width: 68%; float: right; display: block; }
|
||||||
.container { width: 1000px; margin: auto }
|
.container { width: 1000px; margin: auto }
|
||||||
nav { width: 1000px; margin: auto }
|
nav { width: 1000px; margin: auto }
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
@charset "gb2312";
|
@charset "UTF-8";
|
||||||
.l_box h2 { color: #333; font-size: 14px; line-height: 30px; padding-left: 20px; background: #fff }
|
.l_box h2 { color: #333; font-size: 14px; line-height: 30px; padding-left: 20px; background: #fff }
|
||||||
.l_box div { background: rgba(255,255,255,0.5); margin-bottom: 20px; overflow: hidden }
|
.l_box div { background: rgba(255,255,255,0.5); margin-bottom: 20px; overflow: hidden }
|
||||||
.l_box div ul { padding: 10px; overflow: hidden }
|
.l_box div ul { padding: 10px; overflow: hidden }
|
||||||
|
@ -18,6 +18,7 @@ a:hover { text-decoration: none; color: #000; }
|
|||||||
.f_r { float: right }
|
.f_r { float: right }
|
||||||
article { width: 1000px; margin: 80px auto 0; overflow: hidden; zoom: 1; }
|
article { width: 1000px; margin: 80px auto 0; overflow: hidden; zoom: 1; }
|
||||||
aside { width: 30%; float: left; overflow: hidden; display: block; position: relative; z-index: 1 }
|
aside { width: 30%; float: left; overflow: hidden; display: block; position: relative; z-index: 1 }
|
||||||
|
|
||||||
main { overflow: hidden; width: 68%; float: right; display: block; }
|
main { overflow: hidden; width: 68%; float: right; display: block; }
|
||||||
.container { width: 1000px; margin: auto }
|
.container { width: 1000px; margin: auto }
|
||||||
nav { width: 1000px; margin: auto }
|
nav { width: 1000px; margin: auto }
|
||||||
|
BIN
SinkDark/static/images/盐湖.png
Normal file
BIN
SinkDark/static/images/盐湖.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.9 MiB |
@ -17,11 +17,11 @@
|
|||||||
<nav><div class="logo"><a href="javascript:;">博客首页</a></div>
|
<nav><div class="logo"><a href="javascript:;">博客首页</a></div>
|
||||||
<h2 id="mnavh"><span class="navicon"></span></h2>
|
<h2 id="mnavh"><span class="navicon"></span></h2>
|
||||||
<ul id="starlist">
|
<ul id="starlist">
|
||||||
<li><a href="{% url 'article' id 1%}">我的日记</a></li>
|
<li><a href="{% url 'article' id 1%}">文章</a></li>
|
||||||
<li><a href="{% url 'album' id 1 %}">我的相册</a></li>
|
<li><a href="{% url 'album' id 1 %}">图库</a></li>
|
||||||
<li><a href="{% url 'about' id %}">关于我</a></li>
|
<li><a href="{% url 'about' id %}">自我介绍</a></li>
|
||||||
<li><a href="{% url 'board' id 1 %}">留言</a></li>
|
<li><a href="{% url 'board' id 1 %}">留言</a></li>
|
||||||
<li><a href="{% url 'admin:index' %}">博客后台管理</a></li>
|
<li><a href="{% url 'admin:index' %}">后台</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
@ -66,8 +66,8 @@
|
|||||||
<div class="links">
|
<div class="links">
|
||||||
<h2>友情链接</h2>
|
<h2>友情链接</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<a href="https://blog.csdn.net/HuangZhang_123" target="new">CSDN博客</a>
|
<a href="https://blog.csdn.net/" target="new">CSDN博客</a>
|
||||||
<a href="https://book.jd.com/writer/%E9%BB%84%E6%B0%B8%E7%A5%A5_1.html" target="new">出版图书</a>
|
<a href="https://zhihu.com" target="new">知乎</a>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
Loading…
Reference in New Issue
Block a user