html简单代码模板（帮我制作一个这样的html代码模板，做好框架就行）

本文目录

• 帮我制作一个这样的html代码模板，做好框架就行
• Python大神教你300行代码搞定HTML模板渲染「附源码」

帮我制作一个这样的html代码模板，做好框架就行

这样的不晓得行不，你看看

《!DOCTYPE html》
《html lang="en"》
《head》
 《meta charset="UTF-8"》
 《title》Document《/title》
 《style type="text/css"》
  *{
   margin: 0;padding: 0;
  }
  body{
   background: #E3D6D6; 
  }
  ul,li,ol{
   list-style: none;
  }
  #box{
   width: 560px; height: 480px;
   margin: 100px auto;
   position: relative;
   border:5px solid #ADA4A4;
   box-shadow: 0px 0px 20px red;
   overflow: hidden;
  }
  .left_top_01{
   width: 210px;height: 170px;
   margin-left: 17px;
  }
  .left_top_01 li{
   
   float: left;
   
  }
  .left_top_01 li span{
   display: block;width: 20px;
   font-size: 18px;font-weight: bolder;
   padding: 15px;
  }
  .left_top_02{
   width: 210px;height: 170px;
   margin-left: 17px;
  }
  .left_top_02 li{ 
   width: 20px;
   padding: 15px;
   float: left;
   position: relative;
   margin-bottom: -10px;
  }
  .left_top_02 li span{
   display: block;
   font-size: 14px;
   line-height: 30px;
   height: 30px;width: 170px; 
   transform: rotate(270deg);
   position: absolute;
   left:-55px;top: 50px;
   /*margin-right: -50px;*/
  }
  .left_top_02+img{
   position: absolute;
   top: 0px; left: 246px;
  }
  .left_bottom{
   width: 210px;height: 140px;margin: 15px 0 0 20px;
  }
  .left_bottom li{
   border-top: 2px solid #DCD2D2;
   line-height: 38px;height: 38px;
   font-size: 16px;font-weight: bold;font-family: "黑体";
  }
  .right_bottom{
   width: 350px;height: 140px;
   position: absolute;
   right: 0;bottom: 18px;
  }
  .right_bottom li{
   float: right;
   width: 95px;
   margin: 0 6px;
  }
  .right_bottom li p{
   font-size: 12px;font-weight: bold;font-family: "黑体";
  }
 《/style》
《/head》
《body》
《div id="box"》
 《ul class="left_top_01"》
  《li》
   《span》首页《/span》
  《/li》
  《li》
   《span》关于我《/span》
  《/li》
  《li》
   《span》作品展示《/span》
  《/li》
  《li》
   《span》联系我《/span》
  《/li》
 《/ul》
 《ul class="left_top_02"》
  《li》
   《span》HOME《/span》
  《/li》
  《li》
   《span》ABOUT ME《/span》
  《/li》
  《li》
   《span》WORKS SHOW《/span》
  《/li》
  《li》
   《span》CONTACT ME《/span》
  《/li》
 《/ul》
 《img src="#" alt="#" width="300px" height="320px" /》
 《ul class="left_bottom"》
  《li》教育背景《/li》
  《li》在校经历《/li》
  《li》语言及计算机能力《/li》
 《/ul》
 《ul class="right_bottom"》
  《li》
    《img src="#" alt="#" width="95px" height="85px"/》
    《p》喜欢简单纯粹的生活方式，待人待事细致沉稳，喜欢简单纯粹的生活方式，待人待事细致沉稳《/p》
  《/li》
  《li》
    《img src="#" alt="#" width="95px" height="85px"/》
    《p》喜欢简单纯粹的生活方式，待人待事细致沉稳，喜欢简单纯粹的生活方式，待人待事细致沉稳《/p》
  《/li》
  《li》
    《img src="#" alt="#" width="95px" height="85px"/》
    《p》喜欢简单纯粹的生活方式，待人待事细致沉稳，喜欢简单纯粹的生活方式，待人待事细致沉稳《/p》
  《/li》
 《/ul》
《/div》
《/body》
《/html》

Python大神教你300行代码搞定HTML模板渲染「附源码」

模板语言由HTML代码和逻辑控制代码组成，此处 @PHP 。通过模板语言可以快速的生成预想的HTML页面。应该算是后端渲染不可缺少的组成部分。

通过使用学习 tornado 、 bottle 的模板语言，我也效仿着实现可以独立使用的模板渲染的代码模块，模板语法来自 tornado 和 bottle 的语法。可以用来做一些简单的事情 网页渲染 ， 邮件内容生成 等HTML显示方面。以下就是简单的语法使用介绍。

1. 变量。使用 {{ }} 包裹起来，里面的变量为Python传入。模板渲染时会将传入的变量转换成字符串并填入对应位置。

2. 转义。默认传入的数据都会进行HTML转义，可以使用 {% raw value %} 来将value的内容按原始字符串输出。

3. 条件控制。支持Python的 if，elif，else 。条件代码需要放在 {% %} 内部，并且在条件结束后需要额外增加 {% end %} ，用于标识条件控制语句块范围。

4. 循环控制。支持Python的 for 和 while 。与条件控制一样也需要放在 {% %} 内部，并且结束处需要额外增加 {% end %} ，用于标识循环控制语句块的范围。

这个模板语言模块是在 Python2.7 上面开发使用的，如果要在 Python3+ 上使用需要对 str 和 bytes 进行一些处理即可，由于没有引用任何其他模块，可以很好地独立使用。

原文链接：
http://www.cnblogs.com/jeffxun/p/15585073.html