bootstrap仿婚纱摄影网站首页

news/2024/5/10 11:37:29/文章来源:https://blog.csdn.net/Irving_zhang/article/details/42213723

效果图如下：

代码如下：

html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content="凤凰社是一个分享感动的地方">
<title>婚纱摄影网站制作</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="js/fenikso.js"></script>
</head>
<body>
<header><div class="container"><div class="row"><div class="span6"> <a href="#" title="回到首页"> <img id="logo" src="images/logo.png" alt="凤凰社"> </a> </div><div class="span6"><div class="input-append pull-right" id="search"><input class="span3" id="appendedInputButton" type="text"><button class="btn" type="button">搜索</button></div></div></div></div>
</header>
<nav id="navigation"><div class="container"><div class="navbar"><ul class="nav"><li class="active"><a href="#">首页</a></li><li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 真实婚礼 <b class="caret"></b> </a><ul class="dropdown-menu"><li><a href="#">后院婚礼</a></li><li><a href="#">复古婚礼</a></li><li><a href="#">农场婚礼</a></li></ul></li><li><a href="#">活动</a></li></ul></div></div>
</nav>
<!-- end #navigation -->
<div class="mid"><div class="container"><ul class="thumbnails"><li class="span6"><div class="thumbnail"> <img src="content/1.jpg" alt=""><h5>缩略项标签</h5><p>缩略项标题介绍</p></div></li><li class="span6"><div class="thumbnail"> <img src="content/2.jpg" alt=""><h5>缩略项标签</h5><p>缩略项标题介绍</p></div></li><li class="span6"><div class="thumbnail"> <img src="content/3.jpg" alt=""><h5>缩略项标签</h5><p>缩略项标题介绍</p></div></li><li class="span6"><div class="thumbnail"> <img src="content/4.jpg" alt=""><h5>缩略项标签</h5><p>缩略项标题介绍</p></div></li><li class="span6"><div class="thumbnail"> <img src="content/5.jpg" alt=""><h5>缩略项标签</h5><p>缩略项标题介绍</p></div></li></li><li class="span6"><div class="thumbnail"> <img src="content/6.jpg" alt=""><h5>缩略项标签</h5><p>缩略项标题介绍</p></div></li></ul></div>
</div><!-- end mid-->
<div id="bottom" ><div class="container" id="bottom_text"><div  class="row"><div id="text1" class="span4"><h4>底部内容区块一</h4><p class="p_div">这里是底部内容区块文字，每个区块都是新的内容区域，使用bootstrap布局很容易。</p></div><div id="text2" class="span4"><h4>底部内容区块二</h4><p class="p_div">这里是底部内容区块文字，每个区块都是新的内容区域，使用bootstrap布局很容易。</p></div><div id="text3" class="span4"><h4>底部内容区块三</h4><p class="p_div">这里是底部内容区块文字，每个区块都是新的内容区域，使用bootstrap布局很容易。</p></div></div></div>
</div>
<div id="footer"></div>
</body>
</html>

css：

/** 页头部分的样式*/
#logo{padding-top:30px;
}
#search{padding-top:50px;
}
/*
*	导航菜单的样式
*/.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
color: #444444;
text-decoration: none;
background-color: #fff;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: none;
border-bottom:3px solid #009571;
}
#navigation{border-bottom:#CCC 1px solid;
}
.thumbnail {
display: block;
padding: 4px;
line-height: 20px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/*
*底部样式
*/
#bottom{height:271px;background:url(../images/images/bottom_02.png) repeat-x;
}
#bottom_text{margin-top:20px 0 0 0;
}
#text1{margin-top:45px;
}
#text2{margin-top:45px;
}
#text3{margin-top:45px;
}
.p_div{width:250px;color:#FFF;margin-top:30px;font-family:宋体;line-height:25px;font-size:18px;
}
#footer{height:70px;background:url(../images/images/bottom_03.png);
}

文件目录：