入门前端之后的第一个简单的项目

最新推荐文章于 2024-08-25 22:37:28 发布

逸然丶诺

最新推荐文章于 2024-08-25 22:37:28 发布

阅读量2.1k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/KevinSilent/article/details/95342302

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目的效果如下：
在这里插入图片描述
实现模块主要分三部分：
第一部分是上边的部分是通过图片以及一个ul列表来实现的，margin的设置以及无序列表（ul）中去除掉每一个li前边的对应的小黑点，用的是list-style：none即可。
第二部分是中间的实现：图片的轮流播放以及通过点击按钮来实现上一张和下一张的图片转换。
第三部分是剩下的部分是对于图片和文字的简单布局。
实现的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个项目（整合前边的小例子）</title>
		<style type="text/css">
			*{
				margin:0;
				padding: 0;
			}
			
			.top{
				width:1500px;
				height: 100px;
				margin:auto;
				margin-top: 30px;;
				/*background-color: antiquewhite;*/
			}
			.top img{
				float:left;
				margin-top: 30px;
				margin-left:20px;
				margin-right:60px;
			}
			.topul{
				float: left;
				list-style: none;
			}
			.topul li{
				/*width:70px;
				height:10px;*/
				float:left;
				border-radius: 2px;
				/*padding: 35px;*/
				width: 100px;
				height:30px;
				text-align: center;
				margin-top:64px;
				cursor: pointer;
				/*background-color: blue;*/
				margin-right:44px;
				border: 3px solid white;
			}
			.topul li:hover{
				background-color: red;
				color: white;
				border-radius: 5px;
			}
			#lunbo{
				width:1500px;
				height: 600px;
				/*background-color: blueviolet;*/
				margin: auto;
				/*background-image: url(../0709/imgs/1.jpg);*/
				/*background-size: cover;*/
			}
			#lunbo img{
				width: 1500px;
				height:600px;
				background-size: cover;
				margin-top: 20px;
				/*float:left;*/
			}
			/*.pic{
				float:left;
			}*/
			.input{
				width:150px;
				height:40px;
				margin-top:10px;
				/*margin-left: 200px;*/
				/*margin-right:20px;*/
				/*margin-left: 200px;*/
				/*padding: 100px;*/
				/*margin-bottom: 20px;*/
				/*float: left;*/
			}
			.inputDiv{
				width:1000px;
				height:30px;
				text-align: center;
				float:left;
			}
			.inputDiv input:nth-child(1)
			{
				margin-left: 60px;
				/*margin-right: 600px;*/
				//background: url(imgs/W6`K1CUGZU[OMN)2FHM(FLQ.png);
				/*background-image:  url(imgs/W6`K1CUGZU[OMN)2FHM(FLQ.png);*/
			}
			.inputDiv input:nth-child(2)
			{
				margin-left: 50px;
				/*background-color: red;*/	
				margin-right: 50px;
			}
			.fuwu{
				margin:auto;
				/*width: 500px;*/
				/*height:300px;*/
				margin-top:90px;
				text-align: center;
				font-size: 26px;
				color: blue;
				margin-bottom: 10px;
			}
			.three{
				/*background-color: aqua;*/
				width:200px;
				/*height: 60px;*/
				margin:auto;
				text-align: center;
			}
			.three p{
				float: left;
			}
			.three div{
				width:60px;
				height:1px;
				background-color: black;
				margin-top:10px;
				float: left;
				text-align: center;
			}
			.final{
				width:1400px;
				height:300px;
				/*background-color: aqua;*/
				margin:auto;
				margin-top:50px;
				text-align: center;
			}
			.fina{
				margin-left: 75px;
				margin-right: 75px;
				float: left;
			}
			.fina img{
				width:200px;
				height:200px;
				margin-top:10px;
				margin-bottom: 10px;
			}
			.fina p{
				margin-top:10px;
				font-size: 16px;
				/*float: left;*/
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
				<img src="img/logon.png" />
				<ul class="topul">
					<li>首页</li>
					<li>关于我们</li>
					<li>专利业务</li>
					<li>商标服务</li>
					<li>成功案例</li>
					<li>新闻动态</li>
					<li>联系我们</li>
				</ul>
			</div>
			<div id="lunbo">
				<div class="pic"><img id="pic" src="imgs/1.jpg"/></div>
				<div class="inputDiv">
					<input class="input" value="上一张" type="button" />
					<input class="input" value="下一张" type="button" />
				</div>
				
				
	
			</div>
			<p class="fuwu">服务项目</p>
			<div class="three">
				<div></div>
				<p>服务项目</p>
				<div></div>
			</div>
			<div class="final">
				<div class="fina">
					<img src="img/tu4.png"/>
					<h3>国内商标</h3>
					<p>国内商标注册</p>
				</div>
				<div class="fina">
					<img src="img/tu2.png"/>
					<h3>国内商标</h3>
					<p>加拿大欧盟商标注册</p>
				</div>
				<div class="fina">
					<img src="img/tu3.png"/>
					<h3>专利服务</h3>
					<p>申请专利、专利办理</p>
				</div>
				<div class="fina">
					<img src="img/tu4.png"/>
					<h3>版权服务</h3>
					<p>作者版权登记、著作者登记</p>
				</div>
				
				
			</div>
			
		</div>
	
		
		<script>
			var pic=document.getElementById("pic");
			var prePic=document.getElementsByClassName("input")[0];
			var nextPic=document.getElementsByClassName("input")[1];
			var n=1;
			nextPic.onclick=function(){
				nextPic1()
				};
			prePic.onclick=function(){
				n--;
				if(n==0)
				{
					n=6;
				}
				pic.src="imgs/"+n+".jpg";
			};
			function nextPic1()
			{
				n++;
				if(n==7)
				{
					n=1;
				}
				pic.src="imgs/"+n+".jpg";
			}
			setInterval(nextPic1,1000)
			
		</script>
	</body>
</html>

代码中使用的图片的连接如下：
链接：https://pan.baidu.com/s/1Hr-7-xHDbJ_YFDyEEk8P8A
提取码：u13i