Django学习[30] 首页面资源储备，前端基础框架搭建

博主： justin
发布时间：2024 年 03 月 13 日
223 次浏览
关闭评论
10789字数
分类： Python

静态基本页面搭建

我们先从静态基本页面搭建PeiQi1号项目

我们在base.html导入一些样式，以后就不会重复的去写一下样式了

导入前端样式文件

我们需要的导入资源有：bootstrap,jquery,swiper

bootstrap

样式

第一个bootstrap.css是原生样式
第二个bootstrap.css.map 浏览器的一种缓存优化技术，可做一些样式缓存
第三个min.css指的是压缩版本

将这四个文件导入至css中：

字体

可以制作字体图片

bootstrap的js

其实以后我们正真上线会选择一些cdn资源，有百度或者阿里等等，帮我们全球化部署好的资源可以直接调用，因为这些资源加载在本地服务器内会占资源，也会影响速度。

jquery

轮拨框架

reset.css

在base中导入css，jquery，reset.css

reset.css指的是重置的样式
将我们一些控件元素外边距内边距，的格式去掉（设置为0），盒子模型全为0

观察reset.css:

@charset "utf-8";
/*设置盒子模型*/
* {
    box-sizing: border-box; /*设置盒子模型*/
}

body, nav, dl, dt, dd, p, h1, h2, h3, h4, ul, ol, li, input, button, textarea, footer, menu {
    margin: 0;
    padding: 0          /*把各种外边距内边距全部设置成0*/
}

body {
    font: 18px/1.5 'Microsoft Yahei', 'Simsun'; /*设置字体*/
    color: #353d44;
    background: #efefef;
    -webkit-text-size-adjust: none;
    min-width: 320px;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%
}

ul, menu {
    list-style: none    /*列表的点给去了*/
}

a {
    text-decoration: none;/*修饰的下划线去掉*/
    color: #1a1a1a
}

/*a:hover, a:active, a:focus{color:#1c5aa2;text-decoration: none;}*/
/*a:active{color:#aaa;}*/
img {
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

button, input, select, textarea {
    font-size: 100%;
    vertical-align: middle;
    outline: none;
}

textarea {
    resize: none
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
    -moz-appearance: button
}

input:focus:-moz-placeholder, input:focus::-webkit-input-placeholder {
    color: transparent
}

button::-moz-focus-inner, input::-moz-focus-inner {
    padding: 0;
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

/*.fl{float:left;}.fr{float:right;}.hide{display:none;}.show{display: block;}*/
.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.break {
    word-break: break-all;
    word-wrap: break-word
}

header, footer, article, section, nav, menu, hgroup {
    display: block;
    clear: both;
}

说白了就是清空各种默认样式

base.html：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><{{ title }}/title>

    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'css/swiper.css' %}">
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    {% block ext_css %}   {# 子类会用到css，我们在这里做好规划 #}

    {% endblock %}
</head>
<body>
    {% block header %}

    {% endblock %}

    {% block content %}

    {% endblock %}

    {% block footer %}

    {% endblock %}
    <script type="text/javascript" src="{% static 'js/jquery.js' %}"> </script>  {# 导入jquery #}
    <script type="text/javascript" src="{% static 'js/bootstrap.js' %}"> </script>  {# 导入bootstrap #}

    {% block ext_js %}  {# 页面还会用到js，js一般放在最后，js作用是让页面变成动态 #}

    {% endblock %}
</body>
</html>

(这里我在实验时由于粗心导致了web显示错误，该错误导致我卡了3天，原因只是手误敲错了代码，现已修正

如图，左边为BUG版，右边为无BUG版)
但是现在我们还是差一点东西，移动端的布局和电脑端的布局区别在于，viewport需要视图转换窗口。

比如现在手机很多都是1k分辨率的屏幕，尺寸是5-6寸，而你的电脑屏幕尺寸有15.6，17+的。
但是想一想，分辨率都一样，但是电脑屏幕很大，而手机屏幕很小，就会产生一个问题：屏幕像素密度不一样，并且高宽不一样，电脑的高是横着的，手机的高是竖着的。

这样就会导致一个现象:明明字体是10px，在电脑上看起来还不错，但是移植到手机上的时候会变得特别小，可能都看不清了。

后来为了移动端适配，加了一个属性叫做viewport，来转换成合适移动端的尺寸

viewport简介

自动检测你的客户端显示器的大小，然后将html的格式自动转换成合适的大小再去映射到你的移动端上
打开bootstrap3官网：https://v3.bootcss.com/css/

接着我们就把viewport 属性标签添加到base.html的head中

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> {# scalable=no是不可以缩放 initial-scale指的缩放比例#}
    <title><{{ title }}/title>

前端适配

推荐百分比，不推荐固定尺寸

固定尺寸容易出现布局混乱，我们在写代码的时候尽量考虑适配更多的屏幕

适配单位
- px 基本所有图形界面的设备，它的底层计算都是px
- em
  - 默认相对于父级元素
  - 默认大小1em = 16px
- rem
  - 相对于根级元素
  - 默认大小1rem=16px
- 弹性盒模型
- 响应式布局
在我们的项目中
- 屏幕宽度的十分之一，作为rem的基础单位。

这样就需要我们去做一个适配操作：将屏幕的宽度大小获取过来，然后除以10，再设置到基层的fontsize上面

实际导入viewport操作

我们将这个文件复制粘贴到static/js中，打开这个文件观察一下：

$(function(){
    document.documentElement.style.fontSize = innerWidth / 10 + "px";
})

/* 这句代码的意思是获取到屏幕宽度innerwidth,然后除以10并且作为底层的fontsize

然后我们在base.html中导入base.js

至此我们的初步环境配置完成了。

简单的写一写页面

在templates中新建main文件夹，用于存放主页，商品页面,购物车页面，个人中心页面。

主页

在main文件夹中新建home.html：

{% extends 'base_main.html' %}
{% load static %}
{% block ext_js %}  {# 主页需要导入额外的js格式，比如轮播 #}
{{ block.super }}  {# 增量式操作 #}
    <script type="text/javascript" src="{% static 'js/swiper.jquery.js'%}"></script>
    {# 先导入父标签的格式 #}
{% endblock %}

我们在做项目的时候，不管是主页还是其他界面，我们在屏幕最下方都要有主页，超时，购物车，我的四个页面按钮。这些都是通用的，所以我们将这个页脚写进base_main.html,但是在这之前我们要将写主页main的样式文件导入进我们的项目中（这个文件是引用其他地方的，想要自己写也可以）：

（这里之所以创建了一个peiqi1,因为我们这个静态势必会变得很庞大）
我们先看一下main.css有什么内容：

html, body {
    width: 100%;
    height: 100%;
}  /*将我们的屏幕填满*/

body {
    margin: 0;  /* 内边距外边距都设置为0 */
    padding: 0;
    overflow-x: hidden;  /* 内容横向溢出，就隐藏 */
    overflow-y: auto;   /* 内容纵向溢出，就自动滚动 */
    background: #eee;
}

header, footer {    /* 标签选择器，元素选择器，根据元素名直接匹配 */
    width: 100%;
    height: 1.5rem;
    font-size: 0.277777rem;
    border-top: 1px solid #f0f0f0;
    z-index: 10;    /* 这里添加的z轴，是为了让页面有层次，比较类似于ps的图层*/
    position: fixed;    /* 相对于浏览器的绝对定位 */
    display: flex;
}

header {
    background: yellow;
    top: 0;
    left: 0;
}

footer {
    background: #fff;
    bottom: 0;
    left: 0;
}

footer a {
    display: block;
    width: 25% !important;
    text-align: center;
    overflow: hidden !important;
}

footer dl dt {  /*自定义列表*/
    height: 0.777777rem;
    padding-top: 0.22222rem;
    position: relative;
}


footer dl dt span {
    display: inline-block;
    width: 0.513889rem;
    height: 0.513889rem;
}

footer dl dd {
    width: 100%;
    height: 0.708333rem;
}


footer .home span {
    background: url(/static/img/home.png) no-repeat;   /* 图片文件也到导入进static中的img中，并且注意图片的命名规范*/
    background-size: 0.513889rem;
}

footer .market span {
    background: url(/static/img/market.png) no-repeat; /* 图片文件也到导入进static中的img中，并且注意图片的命名规范*/
    background-size: 0.513889rem;
}

footer .cart span {
    background: url(/static/img/cart.png) no-repeat;   /* 图片文件也到导入进static中的img中，并且注意图片的命名规范*/
    background-size: 0.513889rem;
}

footer .mine span {
    background: url(/static/img/mine.png) no-repeat;   /* 图片文件也到导入进static中的img中，并且注意图片的命名规范*/
    background-size: 0.513889rem;
}

a {
    text-decoration: none
}

a:link {
    text-decoration: none
}

a:visited {
    text-decoration: none
}

a:hover {
    text-decoration: none
}

a:active {
    text-decoration: none
}

补充：ul ol dl的标签区别：ul无序列表，ol有序列表，dl自定义列表
详细dl、dt、dd标签看：https://www.w3school.com.cn/tags/tag_dt.asp
这里还要注意对应的图片姓名也要规范修改

下面我们看一下base_main.html：

{% extends 'base.html' %}   {# 先继承base #}
{% load static %}

{% block ext_css %}
    {{ block.super }}  {# 不管是导css还是js，都要做成增量式的 #}
    <link rel="stylesheet" href="{% static 'peiqi1/main/css/main.css' %}">
    {# 导入css #}
{% endblock %}
{% block header %}
    <header></header>  {# 重写header #}
{% endblock %}
{% block footer %}
    <footer>
        <a href="#" class="'home"></a>
    <dl>    {# 自定义列表 #}
        <dt>
            <span></span>
        </dt>
        <dd>首页</dd>
    </dl>
    </footer>

{% endblock %}

接下来我们需要测试一下：
修改url如下：

urlpatterns = [
    url(r'^home/', views.home, name='home')
]

views:

def home(request):
    return render(request, 'main/home.html')

我们查看网页

可以看到出现了图标，不过这里我们是引用的本地资源图标，在实际场景中，更推荐调用CDN库中的图标

最后修改：2024 年 03 月 13 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

Django学习[30] 首页面资源储备，前端基础框架搭建

静态基本页面搭建

导入前端样式文件

bootstrap

样式

字体

bootstrap的js

jquery

轮拨框架

reset.css

在base中导入css，jquery，reset.css

viewport简介

前端适配

实际导入viewport操作

简单的写一写页面

主页

Babel相关依赖介绍/ES新特性升级经验

Django学习[0] 简介Hellodjango

Django学习[1] MTV简单流程

Django学习[2] 和model的简单对接，实现数据增删改查

Django学习[3] 数据库常规操作，级联数据（最后有坑）

[VUE3]一、vue3概述/双向绑定/vdom

Django学习[63] REST中状态码、视图函数包装、填61坑

[VUE2]一、Vue介绍以及环境配置

[VUE2]十八、全局组件特性及组件模板的抽离

Django学习[69] 节流控制，自定义节流

Django学习[30] 首页面资源储备，前端基础框架搭建