Question

使用Bootstrap。
我不知道该怎么做：

                    width 100%    
------------------------------------------------------------- 
!            !           header               !             !       
!   left.jpg !           center.jpg           !  right.jpg  !
!            !                                !             !
!  fluid     !      fixed - 960px             !    fluid    !
------------------------------------------------------------!
!            !                                !             !
!            !           text                 !             !
!            !                                !             !
!            !                                !             !
!-----------------------------------------------------------!

Answer 1

试试这个：

<table width="100%">
    <tbody>
        <tr>
            <td>left.jpg</td>
            <td width="960px">center</td>
            <td>right.jpg</td>
        </tr>
        <tr>
            <td></td>
            <td>text</td>
            <td></td>
        </tr>
    </tbody>
</table>

https://jsfiddle.net/xne1hzr7/

Answer 2

我不知道怎么做left.jpg ???

                      width 100%   
-------------------------------------------------------------  
!                        top.jpg                            !
------------------------------------------------------------- 
!            !           header               !             !       
!   left.jpg !           center.jpg           !  right.jpg  !
!            !                                !             !
!  fluid     !      fixed - 960px             !    fluid    !
------------------------------------------------------------!
!            !                                !             !
!            !           text                 !             !
!            !                                !             !
!            !                                !             !
!-----------------------------------------------------------!

html {
    width: 100%;
	height: 100%;
}

body{
    width: 100%;
	height: 100%;
    background-color: #E4E4E4;
}
.fon-top
{
background: url(../images/top.jpg) repeat-x; 
min-height:77px;
}
.fon-right
{
background: url(../images/right-1.jpg) repeat-x;  
min-height:290px;
}

.whight {
background-color: #FFF;
}
.text{
margin-top: 0px;
}
.header1{
position: relative;
margin-top: -200px;
}
.img1
{
position: absolute;
top:0px;
left:0px;

}
.img2
{
position: absolute;
top:0px;
right: 0px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
 
</head>
<body >  
<div class="container-fluid fon-top"  >
    <div class="row">
		<div class="col-xs-12 fon-right" >
        top
			 
		</div>
    </div>		
    </div>		
			
<div class="container cont1" >
    <div class="row">			
		<div class="col-xs-12">
			<div class="header1">
				<img class="img1"
				src="images/centr-1.jpg" /> 
				<img class="img2"
				src="images/centr-2.jpg" /> 
			</div>
		</div>
	</div>
</div>
<div class="container cont1"   >
	<div class="row">			
		<div class="col-xs-12">
			<div class="text whight">
				text <br>
				text <br>
				text <br>
				text <br>
 
			 </div>
		 </div>
	 </div>
 </div>   
    
</body>
</html>

只有标题 - 左流体 - 中心固定左流体

2 个答案: