Проблема со статикой и фотками

Question

Проблема со статикой и фотками

Рейтинг: -1Ответов: 2Опубликовано: 16.08.2023

Я скачал бесплатный html-шаблон для тренировки, проблема следующая:

Пытаясь открыть страницу index через python manage.py runserver, мне почему-то выдаётся обычный текст без стилей и тд.
Но если я открываю всё тот же файл, в той же папке, простым двойным нажатием, то все стили открываются, я не понимаю, почему так.

Могу скинуть и код.

/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{  vertical-align:top;}/* vertical align top */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{   display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
@font-face {
      font-family: 'caviar_dreamsregular';
      src: url(../fonts/CaviarDreams-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'bebas_neueregular';
    src:url(../fonts/BebasNeue-webfont.ttf) format('truetype');
}
body{
    font-family:Arial, Helvetica, sans-serif;
    background:#fff;
}
.wrap{
    width:80%;
    margin:0 auto;
    -moz-transition:all .2s linear;
    -webkit-transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -ms-transition:all .2s linear;
}
.header{
    background:#FAA685;
}
.logo {
    float: left;
    padding:23px 20px;
}
.logo h1 a{
    color:#fff;
    text-transform:uppercase;
    font-size:5em;
    font-family: 'bebas_neueregular';
}
.menu {
    float: right;
    width: 65%;
}
/*--menu--*/
.cssmenu{
    text-align:center;
}
.cssmenu > ul > li {
    display: inline-block;
    position: relative;
}
.cssmenu > ul > li.active a, .cssmenu > ul > li a:hover {
    color: #000;
    background:#fff;
}
.cssmenu > ul > li > a {
    text-transform: uppercase;
    font-family: 'caviar_dreamsregular';
    color: #FFF;
    display: block;
    line-height: 4.8em;
    padding: 35px 46px;
    letter-spacing: 1px;
    font-size: 0.89em;
}
/*--content--*/
.content-top{
    background:#252425;
    padding:4% 0;
}
.caption p{
    font-size:0.8125em;
    color:#999;
    line-height:1.5em;
    padding-top: 2%;
}
/*  GRID OF THREE   ============================================================================= */
.col_1_of_3{
    display: block;
    float:left;
    margin:0% 0 0% 3.6%;
}
.col_1_of_3:first-child { margin-left: 0; }
.span_1_of_3 {
    width:30.2%;
}
.span_1_of_3  h3{
    color:#C94848;
    margin-bottom:0.5em;
    font-size:1.5em;
    line-height: 1.2;
    font-weight : normal;
    margin-top: 0px;
    letter-spacing: -1px;
}
/***** Media Quries *****/
@media only screen and (max-width: 1024px) {
    .wrap{
        width:95%;
    }   
}
/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) and (min-width: 480px) {
    .wrap{
        width:95%;
    }
    .col_1_of_3{ 
        margin: 1% 0 1% 0%;
    }
    .span_1_of_3 {
        width:94%;
        padding:3%;  
    }
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
     
     .wrap{
        width:95%;
    }       
    .col_1_of_3{ 
        margin: 1% 0 1% 0%;
    }
    .span_1_of_3 {
        width:92%;
        padding:4%;
    }
}
.thumbnail h4{
    color: #FFF;
    font-family: 'caviar_dreamsregular';
    font-size: 1.6em;
    margin-bottom: 4%;
    text-transform: uppercase;
}
.btn1 {
    box-shadow: none;
    position: relative;
    text-decoration: none;
    padding: 0;
    font-family: 'caviar_dreamsregular';
    margin: 0;
    text-transform: none;
    text-shadow: none;
    color: #FFF;
    border: none;
    background: none;
    display: inline-block;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    font-size:0.8125em;
    margin-top: 5%;
    text-transform: uppercase;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.thumb-pad2 .thumbnail .caption {
    color: #989A96;
}
.btn1:hover {
    color:#FAA685;
}
/*  GRID OF TWO   ============================================================================= */
.col_1_of_2{
    display: block;
    float:left;
    margin:0% 0 0% 3.6%;
}
.col_1_of_2:first-child { margin-left: 0; }
.span_1_of_2 {
    width: 48.2%;
}
.span_1_of_2  h3{
    color:#C94848;
    margin-bottom:0.5em;
    font-size:1.5em;
    line-height: 1.2;
    font-weight : normal;
    margin-top: 0px;
    letter-spacing: -1px;
}
/***** Media Quries *****/
@media only screen and (max-width: 1024px) {
    .wrap{
        width:95%;
    }   
}
/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) and (min-width: 480px) {
    .wrap{
        width:95%;
    }
    .col_1_of_2{ 
        margin: 1% 0 1% 0%;
    }
    .span_1_of_2 {
        width:94%;
        padding:3%; 
    }
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
    .wrap{
        width:95%;
    }
    .span_2_of_2 {
        width: 100%; 
    }
    .col_1_of_2{ 
        margin: 2% 0 2% 0%;
    }
    .span_1_of_2 {
        width:92%;
        padding:4%;
    }
}
.content-middle{
    padding:4% 0;
    background:#FAA685;
}
.btn {
    box-shadow: none;
    position: relative;
    text-decoration: none !important;
    padding: 10px 20px 10px 20px;
    font-family: 'caviar_dreamsregular';
    margin: 0;
    text-shadow: none;
    color: #FFF;
    border: none;
    text-transform: none;
    background: #FAA685;
    display: inline-block;
    text-transform: uppercase;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    font-size: 1.1em;
}
.btn:hover {
    color: #FFF;
    text-decoration: none;
    background: #2C2D2B !important;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
/*  GRID OF Content and sidebar   ============================================================================= */
.cont{
    display: block;
    float:left;
}
.lsidebar{
    display: block;
    float:left;
    margin:0% 3.6% 0% 0;
}   
.span_2_of_bottom {
    width:  67.1%;
}
.span_1_of_bottom {
    width: 29.2%;
}
.span_2_of_bottom  h2,
.span_1_of_bottom  h2 {
    color:#C94848;
    margin-bottom:0.5em;
    font-size:1.5em;
    line-height: 1.2;
    font-weight : normal;
    margin-top: 0px;
    letter-spacing: -1px;
}
.span_2_of_bottom p,
.span_1_of_bottom  p  {
    font-size:0.8125em;
    padding:0.5em 0;
    color: #fff;
    line-height: 1.5em;
}
/***** Media Quries *****/
@media only screen and (max-width: 1024px) {
    .wrap{
        width:95%;
    }   
}
/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */

@media only screen and (max-width: 640px) {
    .wrap{
        width:95%;
    }
    .cont{ 
        margin: 1% 0 1% 0%;
    }
    .lsidebar{
        margin:0;
    }
    .span_2_of_bottom {
        width:94%;
        padding:3%;  
    }
    .span_1_of_bottom {
        width:94%;
        padding:3%; 
    }
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
    .wrap{
        width:95%;
    }
    .cont{ 
        margin: 1% 0 1% 0%;
    }
    .lsidebar{
        margin:0;
    }
    .span_2_of_bottom {
        width:92%;
        padding:4%;
    }
    .span_1_of_bottom {
        width:92%;
        padding:4%;
    }
}
.content-bottom{
    background:#fff;
}
.listview_1_of_2:first-child {
    margin-left: 0;
}
.images_1_of_2 {
    width:49.96%;
}
.grid2{
    padding-bottom:4%;
}
.listview_1_of_2 {
    display: block;
    float: left;
    margin: 0% 0 0% 0%;
}
.listimg_2_of_1 {
    width: 18.2%;
}
.listimg {
    display: block;
    float: left;
}
.list_2_of_1 {
    width: 78.2%;
}
.text {
    display: block;
    float: left;
    margin: 0% 0 0% 3.6%;
}
.list_2_of_1 h3 {
    font-family: 'caviar_dreamsregular';
    color: #fff;
    text-align: left;
    text-transform: none;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
}
.list_2_of_1 h3 span {
    color:#fff;
}
.list_2_of_1 h4 {
    color: #fff;
    padding: 15px 0px 5px;
    font-size: 0.8125em;
    text-transform: uppercase;
}
.list_2_of_1 p {
    color: #fff;
    margin: 0px 0px 16px 0px;
    font-size: 0.8125em;
    line-height: 1.5em;
}
.list_2_of_1 .button a {
    font: 400 12px/1.2em Arial;
    color:#fff;
    padding:8px 10px;
    background:none;
    text-decoration: none;
    text-shadow: none;
    border: 1px solid #fff;
}
.list_2_of_1 .button a:hover{
    background:#252425;
}
/*--footer--*/
.col_1_of_4 {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}
.span_1_of_4 {
    width: 23.8%;
}
.col_1_of_4:first-child {
    margin-left: 0;
}
ul.first li {
    background:url(../images/marker.png) no-repeat 0 3px;
    line-height: 0.8em;
    padding: 0 0 15px 13px;
}
ul.first li a {
    color: #A0A0A0;
    font-size: 13px;
    -moz-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
    -webkit-transition: background 0.5s ease;
}
.span_1_of_4 ul li a:hover {
    color:#fff;
}
.span_1_of_4 h3 {
    margin-bottom: 20px;
    font-weight: 600;
    font-family: 'caviar_dreamsregular';
    font-size: 1.3em;
    line-height: 1.2;
    margin-top: 0px;
    letter-spacing: -1px;
    color:#fff;
}
ul.last li span {
    font-size: 1em;
    color:#A0A0A0;
    cursor: pointer;
    margin: 10px 0;
    display: block;
}
ul.last li span:hover {
    color:#fff;
}
ul.last li span {
    background:none;
}
.copy {
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    padding:2% 0;
}
.copy p{
    color:#fff;
    font-size: 0.89em;
}
.copy p a {
    color:#FAA685;
}
.copy p a:hover {
    color:#fff;
}
.footer-top {
    padding-top: 3%;
    border-bottom: 1px solid #363636;
}
.footer{
    background:#252425;
}
/*--about--*/
.col:first-child {
    margin-left: 0;
}
.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}
.span_1_of_about {
    width: 73.2%;
    margin-right: 3%;
}
.span_1_of_about h3 {
    color: #333;
    font-size:2em;
    margin-bottom:20px;
    font-family: 'caviar_dreamsregular';
}
.about-img {
    width: 29%;
    float: left;
    margin-right: 3%;
}
.about-desc {
    width: 68%;
    float: left;
    margin-right: 0;
}
.about-desc p {
    color:#999;
    font-size: 13px;
    line-height: 1.8em;
}
.span_1_of_about1 {
    width: 23.2%;
}
.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}
.span_1_of_about1 h3 {
    color: #333;
    font-size:2em;
    margin-bottom:20px;
    font-family: 'caviar_dreamsregular';
}
.comments-custom li {
    overflow: hidden;
    margin: 0;
    padding: 0px 0 25px 0;
    border-bottom: none;
    background: none;
}
.comments-custom.unstyled .icon {
    background: url(../images/comment.png) no-repeat 0 50%;
    width: 37px;
    height: 70px;
    float: left;
    border-right: 1px solid #EBEBEB;
    padding: 0 8px 0 0;
    margin: 0 10px 0 0;
}
.right-text {
    width: 82%;
    float: left;
}
.comments-custom.unstyled .comments-custom_h {
    color: #888;
    font-size: 0.8125em;
    text-transform: uppercase;
}
.comments-custom.unstyled .comments-custom_txt {
    padding: 2px 0 0 0;
    font-size: 13px;
    line-height: 1.5em;
}
.comments-custom.unstyled .comments-custom_txt a {
    color:#999;
}
.about-top{
    margin-bottom:1%;
}
.about-bottom{
    margin-bottom:2%;
}
.comments-custom.unstyled .comments-custom_txt a:hover{
    color:#FAA685;
}
.comments-custom time {
    font-size: 11px;
    color:#888;
}
.about-topgrid1 {
    width: 29%;
    float: left;
    margin-right: 5%;
}
.about-topgrid1 h3 {
    color: #333;
    font-size:2em;
    margin-bottom:20px;
    font-family: 'caviar_dreamsregular';
}
.about-topgrid1 img {
    margin-bottom:10px;
}
.about-topgrid1 h5 {
    color: #888;
    font-size: 13px;
    line-height: 1.5em;
    padding-bottom: 15px;
}
.about-topgrid1 p {
    font-size: 0.8125em;
    color:#999;
    line-height: 1.5em;
    padding: 4px 0px 8px 0px;
}
.about-histore {
    float: left;
    width: 30%;
}
.about-histore h3 {
    color: #333;
    font-size:2em;
    margin-bottom:20px;
    font-family: 'caviar_dreamsregular';
}
.about-histore ul li span {
    color: #333;
    font-size: 14px;
    padding: 15px 0px 15px 0px;
    margin-bottom: 13px;
    float: left;
    width: 15%;
}
.about-histore ul li p {
    font-size: 0.8125em;
    color:#999;
    line-height: 1.5em;
    padding: 4px 0px 8px 0px;
    float: right;
    width: 83%;
}
.about-services {
    width: 30%;
    float: left;
    margin-left: 5%;
}
.about-services h3 {
    color: #333;
    font-size:2em;
    margin-bottom:20px;
    font-family: 'caviar_dreamsregular';
}
.questions {
    margin: 10px 0 3px 0;
}
.questions h4 {
    color: #888;
    font-size: 15px;
    margin-bottom: 5px;
    font-weight: normal;
}
.questions p {
    font-size: 0.8125em;
    color: #999;
    line-height: 1.5em;
    padding: 4px 0px 8px 0px;
}
.about{
    padding:3% 0 1%;
}
/*--gallery--**/
.grid_1_of_4:first-child {
    margin-left: 0;
}
.images_1_of_4 {
    width: 23.8%;
    position: relative;
}
.grid_1_of_4 {
    display: block;
    float: left;
    margin: 2% 0 2% 1.6%;
}
.images_1_of_4 img {
    max-width: 100%;
    display: block;
}
.zoom-icon {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
    background: rgba(64, 72, 109, 0.61);
    display: block;
    left: 0;
    top: -152px;
    width: 290px;
    height: 219px;
    background: url(../images/zoom.png) center center no-repeat;
    cursor: pointer;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}
.images_1_of_4 .zoom-icon {
    top: -50px;
    width:100%;
    height: 182px;

<!DOCTYPE HTML>
<html>
<head>
<title>Free Finance Website Template | Home :: w3layouts</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--slider-->
<link href="css/slider.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</head>
<body>
<div class="header">    
  <div class="wrap"> 
    <div class="header-top">
         <div class="logo">
            <h1><a href="index.html">Finance</a></h1>
         </div>
         <div class="menu">
            <div class="cssmenu">
                <ul>
                   <li class="active"><a href="index.html"><span>Home</span></a></li>
                   <li><a href="about.html"><span>About us</span></a></li>
                   <li><a href="projects.html"><span>Projects</span></a></li>
                   <li class="has-sub"><a href="services.html"><span>Services</span></a></li>
                   <li class="last"><a href="contact.html"><span>Contact</span></a></li>
                    <div class="clear"></div>
                 </ul>
              </div>
          </div>    
          <div class="clear"></div> 
       </div>
   </div>   
</div>
      <!------ Slider ------------>
          <div class="slider">
            <div class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">
                    <img src="images/banner1.jpg" alt="" />
                    <img src="images/banner2.jpg" alt="" />
                    <img src="images/banner3.jpg" alt="" />
                    <img src="images/banner4.jpg" alt="" />
                    <img src="images/banner5.jpg" alt="" />
                </div>
            </div>
        </div>
        <!------End Slider ------------>
    <div class="main">
        <div class="content-top">
            <div class="wrap">
                <div class="section group">
                <div class="col_1_of_3 span_1_of_3">
                    <div class="thumb-pad2">
                        <div class="thumbnail">
                            <h4>Lorem ipsum dolor sit</h4>
                            <figure><img src="images/pic.jpg" alt=""><em class="sp1"></em></figure>
                            <div class="caption">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud</p>
                                <a href="#" class="btn-default btn1">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col_1_of_3 span_1_of_3">
                    <div class="thumb-pad2">
                        <div class="thumbnail">
                           <h4>Lorem ipsum dolor sit</h4>
                            <figure><img src="images/pic1.jpg" alt=""><em class="sp1"></em></figure>
                            <div class="caption">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud</p>
                                <a href="#" class="btn-default btn1">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col_1_of_3 span_1_of_3">
                    <div class="thumb-pad2">
                        <div class="thumbnail">
                          <h4>Lorem ipsum dolor sit</h4>
                            <figure><img src="images/pic2.jpg" alt=""><em class="sp1"></em></figure>
                            <div class="caption">
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud</p>
                                <a href="#" class="btn-default btn1">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div> 
            </div>
            </div>
        </div>
        <div class="content-middle">
            <div class="wrap">
                <div class="section group group1">
                    <div class="section group grid2">
                            <div class="listview_1_of_2 images_1_of_2">
                                <div class="listimg listimg_2_of_1">
                                      <img src="images/chart.png">
                                </div>
                                <div class="text list_2_of_1">
                                    <h3><span>Consectetur</span>  adipisicing elit</h3>
                                    <h4>Sed ut perspiciatis undeaccusantium .</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt  ut labore et dolore.</p>
                                    <div class="button"><span><a href="blog.html">LEARN MORE</a></span></div>
                               </div>
                           </div>           
                            <div class="listview_1_of_2 images_1_of_2">
                                <div class="listimg listimg_2_of_1">
                                      <img src="images/hand.png">
                                </div>
                                <div class="text list_2_of_1">
                                      <h3><span>Consectetur</span>  adipisicing elit</h3>
                                      <h4>Sed ut perspiciatis undeaccusantium .</h4>
                                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt  ut labore et dolore.</p>
                                      <div class="button"><span><a href="blog.html">LEARN MORE</a></span></div>
                                </div>
                            </div>
                            <div class="clear"></div> 
                        </div>
                                <div class="section group grid2">
                                    <div class="listview_1_of_2 images_1_of_2">
                                        <div class="listimg listimg_2_of_1">
                                              <img src="images/bulb.png">
                                        </div>
                                        <div class="text list_2_of_1 ">
                                            <h3><span>Consectetur</span>  adipisicing elit</h3>
                                            <h4>Sed ut perspiciatis undeaccusantium .</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt  ut labore et dolore.</p>
                                            <div class="button"><span><a href="blog.html">LEARN MORE</a></span></div>
                                       </div>
                                   </div>           
                                    <div class="listview_1_of_2 images_1_of_2">
                                        <div class="listimg listimg_2_of_1">
                                              <img src="images/date.png">
                                        </div>
                                        <div class="text list_2_of_1">
                                              <h3><span>Consectetur</span>  adipisicing elit</h3>
                                              <h4>Sed ut perspiciatis undeaccusantium .</h4>
                                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt  ut labore et dolore.</p>
                                              <div class="button"><span><a href="blog.html">LEARN MORE</a></span></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div> 
                            </div>
                    </div>
          </div>
        <div class="content-bottom">
            <div class="map">
                <iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Lighthouse+Point,+FL,+United+States&amp;aq=4&amp;oq=light&amp;sll=26.275636,-80.087265&amp;sspn=0.04941,0.104628&amp;ie=UTF8&amp;hq=&amp;hnear=Lighthouse+Point,+Broward,+Florida,+United+States&amp;t=m&amp;z=14&amp;ll=26.275636,-80.087265&amp;output=embed"></iframe><br><small><a href="https://maps.google.co.in/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Lighthouse+Point,+FL,+United+States&amp;aq=4&amp;oq=light&amp;sll=26.275636,-80.087265&amp;sspn=0.04941,0.104628&amp;ie=UTF8&amp;hq=&amp;hnear=Lighthouse+Point,+Broward,+Florida,+United+States&amp;t=m&amp;z=14&amp;ll=26.275636,-80.087265" style="color:#666;text-align:left;font-size:12px"></a></small>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="wrap">
        <div class="footer-top">
                <div class="col_1_of_4 span_1_of_4">
                    <h3>INFORMATION</h3>
                    <ul class="first">
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Terms and conditions</a></li>
                        <li><a href="#">Legal Notice</a></li>
                    </ul>
                </div>
                <div class="col_1_of_4 span_1_of_4">
                    <h3>CATEGORIES</h3>
                    <ul class="first">
                        <li><a href="#">New products</a></li>
                        <li><a href="#">top sellers</a></li>
                        <li><a href="#">Specials</a></li>
                    </ul>
                </div>
                <div class="col_1_of_4 span_1_of_4">
                    <h3>My ACCOUNT</h3>
                    <ul class="first">
                        <li><a href="#">Your Account</a></li>
                        <li><a href="#">Personal info</a></li>
                        <li><a href="#">Prices</a></li>
                    </ul>
                </div>
                <div class="col_1_of_4 span_1_of_4 footer-lastgrid">
                    <h3>CONTACT US</h3>
                    <ul class="last">
                            <li><span>+91-123-456789</span></li>
                            <li><span>+00-123-000000</span></li>
                        </ul>
                </div>
                <div class="clear"></div> 
        </div>
        <div class="copy">
            <p>Design by <a href="http://w3layouts.com">W3layouts</a></p>
        </div>
    </div>
</div>
</body>
</html>

python css django html static

Источник: Stack Overflow на русском

Answer 1

▲ 0

Я думаю нужно подключить статику в html шаблоне и по аналогии с url обратиться к статическим файлам. Сейчас джанго не понимает от куда ему брать стили и шрифты.

{% load static %}

Answer 2

▲ 0

<link href="{% static 'имя_дериктории/имя_файла.css' %}">

Проблема со статикой и фотками

Ответы