背景图片固定
This commit is contained in:
parent
82519d9007
commit
0e1224361c
@ -7,6 +7,7 @@ body {
|
||||
line-height: 1.5; /* 设置行高为字体大小的1.5倍 */
|
||||
background-size: cover; /* 背景图片覆盖整个元素区域,可能会被裁剪以保持宽高比 */
|
||||
background-repeat: no-repeat; /* 背景图片不重复 */
|
||||
background-attachment: fixed; /* 背景图片固定,不随页面滚动 */
|
||||
}
|
||||
img { border: 0; display: block }
|
||||
ul, li { list-style: none; }
|
||||
@ -17,7 +18,30 @@ a:hover { text-decoration: none; color: #000; }
|
||||
.f_l { float: left }
|
||||
.f_r { float: right }
|
||||
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; }
|
||||
.container { 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 div { background: rgba(255,255,255,0.5); margin-bottom: 20px; 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 }
|
||||
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 }
|
||||
|
||||
main { overflow: hidden; width: 68%; float: right; display: block; }
|
||||
.container { 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>
|
||||
<h2 id="mnavh"><span class="navicon"></span></h2>
|
||||
<ul id="starlist">
|
||||
<li><a href="{% url 'article' 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 'article' 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 'board' id 1 %}">留言</a></li>
|
||||
<li><a href="{% url 'admin:index' %}">博客后台管理</a></li>
|
||||
<li><a href="{% url 'admin:index' %}">后台</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
@ -66,8 +66,8 @@
|
||||
<div class="links">
|
||||
<h2>友情链接</h2>
|
||||
<ul>
|
||||
<a href="https://blog.csdn.net/HuangZhang_123" 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://blog.csdn.net/" target="new">CSDN博客</a>
|
||||
<a href="https://zhihu.com" target="new">知乎</a>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
Loading…
Reference in New Issue
Block a user