Python Web开发：社团概况

页面设计

主体部分分为4行

• “企业概况”和“新闻动态占1行，分别占4和8个格子；

• 通知公告、科研基地、联系我们占1行，所占格子数为4

• 产品中心占一整行，

• 友情链接占一整行

实训步骤

主干设计代码

  <!-- 主体内容 -->
<div class="container">
  <div class="row row-3">

    <div class="col-md-4">
      <!-- 社团概况 -->      
    </div>

    <div class="col-md-8">
      <!-- 新闻动态 -->
    </div>

  </div>

  <div class="row row-3">

    <div class="col-md-4">
      <!-- 通知公告 -->
    </div>

    <div class="col-md-4">
      <!-- 科研基地 -->     
    </div>

    <div class="col-md-4">
      <!-- 联系我们 -->      
    </div>

  </div>

  <div class="row row-3">
    <!-- 作品中心 -->
    <div class="col-md-12 col-pro">
    </div>
  </div>

  <div class="row row-3">
    <!-- 友情链接 -->
    <div class="col-md-12">
    </div>
  </div>
</div>

社团概况 html代码

  <!-- 社团概况 --> 
      <span class="part1">
        <a href="{% url 'aboutApp:survey' %}">社团概况</a>
      </span>
      <span class="part1 en">
          / About Us
      </span>
      <div class="line1">
        <div class="line2 theme"></div>
      </div>
      <div style="margin-top:20px;">
        <img class="img-responsive" src="{% static 'img/cloud.jpg' %}">
        <p class="text1">
          云计算科技与艺术协会，是经校社联备案的学生科技社团，
          下辖云计算实践部，UI新媒体部，大数据实践部，互联网+实践部四个。
        </p>
      </div>     

社团概况 css代码

在home.html{% block content %}下面第一行添加代码：

<link href="{% static 'css/home.css' %}" rel="stylesheet">

在static/css下新建home.css：

.part1{
	font-size:22px;
}
.part1 a{
	text-decoration:none;
	color:#666;
}
.en{	
	color:#828282;
	font-size:15px;
}
.line1{
	height:3px;
	background:#d0d0d0;
	width:100%;
	margin-bottom:8px
}
.line2{
	height:3px;
	background: #005197;
	width:94px;
}
.text1{
	text-align:justify;
	font-size:13px;
	line-height:25px;
	color:#505050;
	margin-top:5px;
}

效果图