书店的前端网页

最新推荐文章于 2024-06-23 23:55:32 发布

江西师范大学-20届-吴悠

最新推荐文章于 2024-06-23 23:55:32 发布

阅读量440

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_39905917/article/details/85211529

版权

本文介绍了西西弗书店的前端网页设计，包括网页内容展示及其对应的代码实现。通过阅读，可以了解到书店网页的基本结构和功能。

摘要由CSDN通过智能技术生成

书店的前端网页

网页内容是西西弗书店
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>书店主题</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
		<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link href="css/font-awesome.min.css" rel="stylesheet" />
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
		<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
		<style type="text/css">
			body{  background-color: #B45B3E;	}
			h2{ color: white; font-family: "黑体","宋体";	}
			h3{	color: white; }
			h4{	color: white; }
		  .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
		  .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
			.logo{  color: #4b5cc4;  font-size: 80px;}
			 #myCarousel  .carousel-inner > .item > img { display: block;  width:100%;  height:650px; }
			.carousel-control.left {
				background-image:none;
				background-repeat: repeat-x;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
			}
			.carousel-control.right {
				left: auto; right: 0;
				background-image:none;
				background-repeat: repeat-x;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
			} 
			.nav { border: 0; margin-bottom: 0; border-radius: 0; }
			.nav li a:hover { background-color: #FF7500; } 
			.navbar-brand:hover { background-color: #FF7500;}
			.navbar li a:visited { background-color: #FFA400; }
	    .panel-heading { background-color: #FF7500;  }
			.panel:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); }
			.panel {
				border: 0px solid #f4511e;
				border-radius:0;
				transition: box-shadow 0.5s;
			}
			.panel-heading {
				color: #fff !important;
				background-color: #f4511e !important;
				border-bottom: 1px solid transparent;
				border-top-left-radius: 0px;
				border-top-right-radius: 0px;
				border-bottom-left-radius: 0px;
				border-bottom-right-radius: 0px;
			}
			.panel-footer {
				background-color: #fff !important;
			}
			#vtab { background-color: #FFA631; }
			#mytab { background-color: #ff8c31; }
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
	</head>
	<body>
		<!--导航栏-->
		<ul class="nav nav-justified" id="daohang" style="border:0px;">
			<li class="navbar-brand"><img src="img/shudian.jpg" style="width: 30px;height: 30px;"></img></li>
            <li><a href="#shouye"><h3>首页</h3></a></li>
            <li><a href="#aboutme"><h3>关于我们</h3></a></li>
            <li role="presentation" class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                   <h3>销售书籍</h3><span class="caret"></span>
                </a>
                <ul class="dropdown-menu" style="background-color: #FFA400;">
                    <li><a href="#book"><h4>教育</h4></a></li>
                    <li><a href="#book"><h4>小说</h4></a></li>
                    <li><a href="#book"><h4>文艺</h4></a></li>
                    <li><a href="#book"><h4>动漫</h4></a></li>
                    <li><a href="#book"><h4>童书</h4></a></li>
                    <li><a href="#book"><h4>人文社科</h4></a></li>
                    <li><a href="#book"><h4>自然科学</h4></a></li>
                </ul>
            </li>
			<li><a href="#fazhan"><h3>发展版图</h3></a></li>
			<li><a href="#wenhua"><h3>文化沙龙</h3></a></li>
			<li><a href="#kaidian"><h3>开店&商务</h3></a></li>
			<li><a href="#zhaopin"><h3>招聘</h3></a></li>
			<li><a href="#guanzhu"><h3>关注我们</h3></a></li>
  </ul>
		
		<!--轮播图-->
		<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 730px; position: relative;">
			<h2 id="shouye">首页</h2>
					<!--轮播区域-->
					<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
						<!--轮播指标-->
						<ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1" ></li>
							<li data-target="#myCarousel" data-slide-to="2" ></li>
							<li data-target="#myCarousel" data-slide-to="3" ></li>
						</ol>
						<!--轮播指标-->
						<!--轮播项目-->
						<div class="carousel-inner" style="height: 650px;">
							<div class="item active" >
								<img src="img/00.jpg" alt="First slide" >
								<div class="carousel-caption">书店</div>
							</div>
							<div class="item">
								<img src="img/01.jpg" alt="First slide" >
								<div class="carousel-caption">书店</div>
							</div>
							<div class="item">
								<img src="img/02.jpg" alt="First slide"  >