开启代码之旅 Launch With Code
1336 浏览 6 years, 1 month
16 Update Front End Design with CSS
版权声明: 转载请注明出处 http://www.codingsoho.com/前端用css进行美化
将下面从base.html移到home.html
背景改成白色,与照片一致,不然会有色差
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" style="background-color:white">
<div class="container">
<div class="col-sm-6">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-success btn-lg" href="#" role="button">Learn more »</a></p>
</div>
<div class="col-sm-6">
<img src = "{% static 'img/iphone.png' %}" class = "img-responsive" />
</div>
</div>
</div>
share.html
{% include "navbar.html" %}
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6 pull-right" >
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-success btn-lg" href="#" role="button">Learn more »</a></p>
</div>
<div class="col-md-6 pull-left">
<img src = "{% static 'img/launch.jpg' %}" class = "img-responsive" />
</div>
</div>
</div>
</div>
navbar.html
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
</div>
</nav>
...
<style>
.navbar{
margin-bottom:0px:important;
border-radius:0px:important;
}
.navbar-inverse .navbar-brand, .navbar-brand:hover{
color:white;
}
</style>