做个网页玩玩

叶子陪你玩

发布于 2021-11-18 10:15:32

47500

代码可运行

文章被收录于专栏：叶子陪你玩编程叶子陪你玩编程

运行总次数：0

代码可运行

网站分为前端和后端，前端主要是将后端的信息展示给用户看的。网上你看到的所有内容，都是前端展示出来的。

如果自己想要做一个稍微好看点的网页，你得了解点HTML，CSS和JS，曾几何时，我花了大量时间在那调整网站的配色，做各种装饰。

尝试各种HTML标签和CSS样式属性，做了很多酷炫的效果。

现在回想起来，还是浪费了很多没有必要的时间，因为我其实只是想要用网页展现内容，结果却陷入了很多细节之中。

如果你也和我一样，只是想用网页展示一个信息，那么就没有必要花大量的时间去学前端的知识，只要稍微了解HTML，CSS，JS的原理和作用，就可以直接奔向目标开干了；

做两个小demo，基本上就知道怎么回事，其它就边用边查手册，因为前端除去JS外，HTML和CSS都是一些事实性知识，没有什么逻辑。

这两天指导一个同学用django建一个网站，网页之前大概和他讲了一下，做了几个小demo基本上就算了解完了，至少一般的网页源代码都可以看懂，或者通过查手册可以看懂。

（偷偷告诉你，以上网页demo代码，之前也有分享过。）

但是之前都是通过自己手写所有原生的代码实现的，还是比较麻烦的。现在做网站，就没必要全部写了，毕竟已经了解原理的，既然python有很多库可以使用，那么前端做网页，同样也可以使用库，做网页就像拼积木一样，找代码段拼接到一起即可。

比如下面两个页面，十几分钟就搞定了。

我用的是bootstrap前端框架，里面提供了各种组件，我只要到里面找到组件，copy代码，改个颜色，就可以了。

比如搞个菜单导航栏，我在里面找到一个我觉得还不错的，直接就复制代码放到我的网页中，这样就做出一个导航栏了。

我的文章列表，想要左边图片，右边文字，

找到对应的代码，复制即可。

这不就是和拼积木一样嘛，非常快速，核心时间花在后端的逻辑功能上，前端先搭个框架，颜色什么的以后看到好的慢慢调整。

我的网页代码，基本上都是参考（抄袭）的，非常香。感兴趣的可以自己看看：https://v4.bootcss.com/docs/getting-started/introduction/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="fontawesome/css/all.css">
    <script src="jquery/jquery-3.6.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
     <style>
      /* Make the image fully responsive */
      .carousel-inner img {
          width: 100%;
          height: 100%;
      }
</style>
</head>
<body>


<!-- 菜单栏导航 -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark" style="padding:0px 50px">
  <a class="navbar-brand" href="#">
    <img src="images/logo.jpg" alt="logo" style="width:40px;" class="rounded">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-home"></i> 首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-feather-alt"></i> 博客</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-book"></i> 教程</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-anchor"></i> 资源</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-user-circle"></i> 关于</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0 nav-item">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<!-- 文章列表 -->
<div class="container-flu" style="margin:20px 0 100px 0">
  <div class="row">
    <div class="col-sm-12 col-md-8 offset-md-2 alert alert-success">
      <a href="#" class="">最新</a>/<a href="#" class="">最热</a>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-8 offset-md-2 media border p-3">
      <img src="images/logo.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:80px;">
      <div class="card-body media-body">
        <h4 class="card-title">第一篇博客</h4>
        <p class="card-text">Hello World，创建一篇文章。</p>
        <a href="#" class="btn btn-primary text-right">批阅奏折>></a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-8 offset-md-2 media border p-3">
      <img src="images/logo.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:80px;">
      <div class="card-body media-body">
        <h4 class="card-title">第一篇博客</h4>
        <p class="card-text">Hello World，创建一篇文章。</p>
        <a href="#" class="btn btn-primary text-right">批阅奏折>></a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-8 offset-md-2 media border p-3">
      <img src="images/logo.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:80px;">
      <div class="card-body media-body">
        <h4 class="card-title">第一篇博客</h4>
        <p class="card-text">Hello World，创建一篇文章。</p>
        <a href="#" class="btn btn-primary text-right">批阅奏折>></a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-8 offset-md-2 media border p-3">
      <img src="images/logo.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:80px;">
      <div class="card-body media-body">
        <h4 class="card-title">第一篇博客</h4>
        <p class="card-text">Hello World，创建一篇文章。</p>
        <a href="#" class="btn btn-primary text-right">批阅奏折>></a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-8 offset-md-2 media border p-3">
      <img src="images/logo.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:80px;">
      <div class="card-body media-body">
        <h4 class="card-title">第一篇博客</h4>
        <p class="card-text">Hello World，创建一篇文章。</p>
        <a href="#" class="btn btn-primary text-right">批阅奏折>></a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-8 offset-md-2 media border p-3">
      <img src="images/logo.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:80px;">
      <div class="card-body media-body">
        <h4 class="card-title">第一篇博客</h4>
        <p class="card-text">Hello World，创建一篇文章。</p>
        <a href="#" class="btn btn-primary text-right">批阅奏折>></a>
      </div>
    </div>
  </div>
</div>
<!-- 网页底部-->
<footer class="py-3 bg-dark fixed-bottom">
    <div class="container" >
        <p class="m-0 text-center text-white">Copyright &copy; 叶子 2021</p>
    </div>
</footer>
</body>
</html>

python知识库

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-11-14，如有侵权请联系 cloudcommunity@tencent.com 删除

css