django 007 css 美化页面

一、添加主页

1.主页布局，一般为：导航栏+主体+尾注

2.导航栏设计，在base.html中增加导航栏

1     <div>
2        <a href="{% url 'home' %}">首页</a>
3        <a href="{% url 'myblog' %}">博客</a>
4     </div>

3.增加设计首页设计首页全局url.py,非APPurl.py；计首页方法views.py保存到全局url.py同级文件夹中，而不是修改APP 方法views.py；设计首页模板 index.html。

1 from . import views
2 urlpatterns = [
3     path('', views.index,name="home"),
4     path('admin/', admin.site.urls),
5     path ('myblog/',include('myblog.urls'),name='myblog'),

1 from django.shortcuts import render_to_response,get_object_or_404
2 def index(request):
3     context={}
4     return render_to_response('index.html',context)

1 {% extends 'base.html' %}
2 
3 {% block title %}
4     我的网站 | 首页
5 {% endblock %}
6 
7 {% block content %}
8     <h3>欢迎访问我的网站！</h3>
9 {% endblock %}

二、使用CSS（层叠样式表）美化页面

1.修饰base.html，添加<style>标签，可以加在head或body末尾。

2.谷歌浏览器调试，f12可以查看、修改、调试CSS设置。

3.设置base.html

<body>
    <div class="nav">
       <a class="logo" href="{% url 'myblog' %}"><h3>个人博客网站</h3></a>       
       <a href="{% url 'home' %}">首页</a>
       <a href="{% url 'myblog' %}">博客</a>
    </div>
      
    {% block content %}{% endblock %} 

    <style type="text/css" > 
        body{
            margin:2px;
            padding:2px;
        }
        div.nav{            
            border-bottom: 2px solid #33a731;     /*代替fr 设置底边框。*/
            background-color: #eee;    /* 底色 */
            padding:2px 2px;            
        }        
        div.nav a{
            text-decoration:none;      /* 去掉下划线 */
            color: darkgreen;
            padding:2px 2px;    
        }
        div.nav a.logo{
            display:inline-block;     /* 设置在同行 */
            font-size:150%;
        }        
</body>

设置index.html

 1 {% block content %}
 2     <h3 class="index-content">欢迎访问我的网站！</h3>
 3     
 4     <style type="text/css">
 5         h3.index-content{
 6             font-size: 300%;     /* 放大字体 */
 7             /* text-align: center; */   /* 居中 */
 8             position: absolute;    /* 设置为相对位置 */
 9             left: 50%;   
10             top: 50%;
11             transform: translate(-50%,-50%);  /* 偏移 */
12         }
13     </style>
14 {% endblock %}

四、使用静态文件--设置css

1.在项目中创建static文件夹，文件夹中创建css文件夹，创建base.css文件。

 1 body{
 2     margin:2px;
 3     padding:2px;
 4 }
 5 div.nav{            
 6     border-bottom: 2px solid #33a731;   
 7     background-color: #eee;  
 8     padding:2px 2px;            
 9 }        
10 div.nav a{
11     text-decoration:none;   
12     color: darkgreen;
13     padding:2px 2px;
14     
15 }
16 div.nav a.logo{
17     display:inline-block;   
18     font-size:150%;
19 }

2.在setting中设置路径。

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static')
]

3.在模板设置css文件引用。

方法一：在head末尾加入link标签。<link rel="stylesheet" href="/static/base.css">

方法二：在第一行引入static库{% load staticfiles %}，然后加入标签<link rel="stylesheet" href="{% static 'base.css' %}">。

 1 {% load staticfiles %}
 2 <! DOCTYPE html>
 3 <html lang='zh-hans'>
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>{% block title %}{% endblock %}</title>
 7     /* <link rel="stylesheet" href="/static/base.css"> */
 8     <link rel="stylesheet" href="{% static 'base.css' %}">
       {% block header_extends %}{% endblock %}
 9 </head>
10 <body>
11     <div class="nav">
12        <a class="logo" href="{% url 'myblog' %}"><h3>个人博客网站</h3></a>       
13        <a href="{% url 'home' %}">首页</a>
14        <a href="{% url 'myblog' %}">博客</a>
15     </div>
16       
17     {% block content %}{% endblock %}    
18     
19 </body>
20 </html>

4.设置index.css文件。

1 h3.index-content{
2     font-size: 300%;     /* 放大字体 */
3     /* text-align: center;  居中 */
4     position: absolute;    /* 设置为相对位置 */
5     left: 50%;   
6     top: 50%;
7     transform: translate(-50%,-50%);  /* 偏移 */
8 }

5.index.css文件引用。

在base.htmlde head尾部加入块标签{% block header_extends %}{% endblock %}(见上)，然后在index.html文件中引入库{% load staticfiles %}，在块标签中引入css文件。

 1 {% extends 'base.html' %}
 2 {% load staticfiles %}
 3 
 4 {% block title %}
 5     我的网站 | 首页
 6 {% endblock %}
 7 
 8 {% block header_extends %}
 9     <link rel="stylesheet" href="{% static 'index.css' %}">
10 {% endblock %}
11 
12 {% block content %}
13     <h3 class="index-content">欢迎访问我的网站！</h3>
14 {}% endblock %}
15

posted on 2018-11-17 19:56 南飞雁ht 阅读(304) 评论(0) 收藏举报