<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- 可選的 Bootstrap 主題文件（一般不用引入） --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <style> body{ border: 0; margin: 0; padding: 0; } #myheader{ height: 10vh; background-color: black; } #mycontent{ height: 90vh; background-color: blue; } #myfooter{ height: 10vh; background-color: yellow; } #content-left{ background-color: gold; height: 90vh; } #content-right{ background-color: red; height: 90vh; } #content-left1{ background-color: rebeccapurple; height: 45vh; } #content-left2{ background-color: rosybrown; height: 45vh; } </style> </head> <body> <div id="myheader"> </div> <div id="mycontent"> <div class="row"> <div id="content-left" class="col-md-9"> <div id="content-left1" class="row"> <div id="left1-top1" class="col-md-12"> </div> </div> <div id="content-left2" class="row"> <div id="left2-bottom1" class="col-md-9">.col-md-8</div> <div id="left2-bottom2" class="col-md-3">.col-md-8</div> </div> </div> <div id="content-right" class="col-md-3">.col-md-4</div> </div> </div> <div id="myfooter"> </div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<style>
body{
border: 0;
margin: 0;
padding: 0;
color: #333;
/*background-image: url("static/img/mycontent.png") ;*/
/*background-repeat: no-repeat;*/
/*background-size: cover;*/
}
#myheader{
height: 15vh;
background-color: black;
background-image: url("static/img/header.png") ;
background-repeat: no-repeat;
background-size: cover;
}
#mycontent{
height: 90vh;
background-color: #15213D;
}
#myfooter{
height: 10vh;
background-color: yellow;
}
#content-left{
background-color: gold;
height: 90vh;
}
#content-right{
background-color: red;
height: 90vh;
}
#content-left1{
background-color: rebeccapurple;
height: 45vh;
/*background-image: url("static/img/kuang1.png") ;*/
/*background-repeat: no-repeat;*/
/*background-size: cover;*/
/*padding: 20px 5px 5px 10px;*/
/*border-bottom: royalblue 1px;*/
}
#content-left2{
background-color: rosybrown;
height: 45vh;
padding: 0px 10px 0px 50px;
}
#content-left1-1{
background-color: brown;
margin: 20px 10px 0px 50px;
height: 40vh;
}
#content-left2-1{
background-color: firebrick;
margin: 0px 0px 0px 0px;
height: 45vh;
}
#content-left2-2{
background-color: coral;
margin: 0px 0px 0px 0px;
height: 45vh;
}
#content-right-in{
background-color: lawngreen;
height: 87vh;
margin: 20px 50px 0px 5px;
}
</style>
</head>
<body>
<div id="myheader">
</div>
<div id="mycontent">
<div class="row">
<div id="content-left" class="col-md-9">
<div id="content-left1" class="row">
<div id="content-left1-1" class="col-mid-12">
xxx
</div>
</div>
<div id="content-left2" class="row">
<div id="content-left2-1" class="col-md-9">.col-md-8</div>
<div id="content-left2-2" class="col-md-3">.col-md-8</div>
</div>
</div>
<div id="content-right" class="col-md-3">
<div id="content-right-in"></div>
</div>
</div>
</div>
<div id="myfooter">
</div>
</body>
</html>
背景圖片大小
圖片太小或 太大
#content-left2-1{ /*background-color: firebrick;*/ margin: 0px 0px 0px 0px; height: 45vh; background-image: url("static/img/kuang1.png") ; background-repeat: no-repeat; background-size:100% 100%; -moz-background-size:100% 100%; }