Web网站开发技术笔记

图床选择

国内

微博图床

postimg,账号：4***@qq.com,密码：fly0411

Flask技术

最好的学习资料，github上的doc文档，直接是官方文档的翻译版本，md文件

遇到的问题

1.程序写完，运行flask run,然后127.0.0.1:5000可以访问，但远程ip无法访问

解决方案：（1）在主程序中加入if name == 'main': app.run(host='0.0.0.0', port=5000)

(2)直接运行python 主程序.py ，而不是flask run

2.

功能：给出文章标题列表

html代码

<div class="article-name-list">
    <h3>所有文章列表</h3>
    {% for article in articles %}
    <li>
    <a href="#">{{ article.name }}</a>
    </li>
    {% endfor %}
</div>

对应的数字序号css

.article-name-list>li{
    list-style-type: decimal;
    /*文章列表加数字*/
}

功能：列出文章正文

<section class="content">
    <ul>
    {% for article in articles %}
    <li>
    <i><a href="#"><img src="{{ article.img }}"></a> </i>
    <h3><a href="#" >{{ article.name }}</a></h3>
    <p>{{ article.content }}</p>
    </li>
    {% endfor %}

    </ul>
</section>

执行

个人博客信息

html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" initial-scale="1.0">
    <title>刘老师|IT笔记</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/blog.css') }}">
    <script type="text/javascript" src="css/blog.js"></script>
  </head>
  <body>
    <header>
      <h1>刘老师|IT笔记</h1>
      <nav>
        <ul>
          <li class="current"><a class="smoothscroll"  href="../index.html" title="">主页</a></li>
          <li><a class="smoothscroll"  href="#about" title="">介绍</a></li>
          <li><a class="smoothscroll"  href="itnotes.html" title="">IT笔记</a></li>
          <li><a class="smoothscroll"  href="read.html" title="">读书笔记</a></li>
          <li><a class="smoothscroll"  href="study.html" title="">其他学习</a></li>
          <li><a class="smoothscroll"  href="blog.html" title="">博客日志</a></li>
          <li><a class="smoothscroll"  href="report.html" title="">新闻报道</a></li>
          <li><a class="smoothscroll"  href="../index.html#contact" title="">与我联系</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="left-column">
        <div class="search">
                <form action="" method="post" name="searchform" id="searchform">
                    <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词"
                    onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
                    onblur="if(value==''){this.style.color='#999';value='请输入关键词'}"
                           type="text"   >
                    <input name="show" value="title" type="hidden">
                    <input name="tempid" value="1" type="hidden">
                    <input name="tbname" value="news" type="hidden">
                    <input name="Submit" class="input_submit" value="搜索" type="button">
                </form>
            </div>
            <div class="categories">
                <h2>文章分类</h2>
                <ul>
                    {% for category in categorys %}
                        <li><a href="#">{{ category.name }}</a> </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="article-name-list">
                {% for article in articles %}
                <li>
                    <p>{{ article.name }}</p>
                </li>
            {% endfor %}
            </div>
      </section>

      <section class="content">
        <ul>
            {% for article in articles %}
                <li>
                    <i><a href="#"><img src="{{ article.img }}"></a> </i>
                    <h3><a href="#" >{{ article.name }}</a></h3>
                    <p>{{ article.content }}</p>
                </li>
            {% endfor %}

        </ul>
      </section>

      <section class="right-column"></section>

    </main>

    <!-- footer
   ================================================== -->

   <footer>
    <div class="row">

        <div class="col-six tab-full">
            <div class="copyright">
               <span>© Copyright 刘飞生老师 </span>
               <span>  | 于2023.4 本人设计 </span>
            </div>
         </div>

         <div id="go-top">
            <a class="smoothscroll" title="Back to Top" href="#top"><i class="fa fa-long-arrow-up"></i></a>
         </div>
    </div> <!-- /row -->
    </footer>

  </body>
</html>

CSS代码

body {
    font-size: 16px;
    /* background-color: #ebebeb; */
}


main {
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.6rem;
    position: relative;
}

main h5 {
    color: #FF0077;
    font-size: 1.6rem;
    line-height: 1.875;
    margin-bottom: 0.3rem;
    letter-spacing: .4rem;
}



/* 顶部导航格式 */
main header {
    /* background-color: rgba(1, 100, 180, 0.3); */
    color: black;
    padding: 0.5em;
    border-bottom: black 1px solid;
}
nav{
    /* background-color: rgba(1, 1, 1, 0.4); */
    color:aliceblue;
    height: 2em;
    text-align: center;
    border-bottom: 1px dashed black;
}

header h1 {
    font-size: 1.5em;
    margin: 0;
    float:left;
}


nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline-block;

    margin-right: 1em;
}


nav a {
    /* color: #fff; */
    text-decoration: none;
    font-size: large;
}  

/*
正文内容调整
*/
main{
    padding-top:1em;
}
section.left-column{
    width: 30%;
    float:left;
    padding-right: 2em;
}
section.content{
    width:60%;
    float:left;
    padding-bottom: 1em;
}
section.right-column{
    width: 5%;
    float:right;
}
article{
    padding-bottom: 1em;
}

footer{
    clear:both;
    text-align: center;
    height: 1.5em;
    padding: 0.5em;
}

  /**
 * responsive:
 * common styles
 * ------------------------------------------------------------------- 
 */
@media all and (max-width:768px) {
    main {
        max-width: 650px;
        padding-top:0.8em;
    }
    main h1 {
        font-size: 2rem;
    }
    section.left-column{
        width: 98%;
        float:none;
        padding-right: 0em;
    }
    section.content{
        width: 98%;
        float:none;
        padding-bottom: 0em;
    }
    section.right-column{
        width: 98%;
        float:none;
    }
}