Web网页布局示例：原神小设计

最新推荐文章于 2024-06-08 09:33:22 发布

细雨狂流

最新推荐文章于 2024-06-08 09:33:22 发布

阅读量467

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/m0_67577550/article/details/139250474

版权

网站概况

针对最近网络火热的单机养成游戏《原神》进行的网页新版本设计，旨在展示前端开发页面设计的学习成果，以及展示了页面的部分内容。

一、网站功能

1.搜索框

2.导航书签目录

3.链接功能

4.轮播图运转

5焦点切换实现图片热点切换功能

6.无缝滚动实现图片滚动

7.单击页脚“后台登录”，转入二级页面。

二、网站架构

网站由主页和二级页面构成,页面设计采用CSS+DIV技术，实现内容和表现的分离。利用JavaScript实现网页动态交互功能。

主页包含logo（徽标）、nav（导航）、banner（横幅）、content（内容）和footer（页脚）区、漂浮元素等区域

三、网站页面布局和样式设计

主页包含logo（徽标）、nav（导航）、banner（横幅）、content（内容）和footer（页脚）区、漂浮元素等区域。

四、网站实现

1.放置搜索框

通过div将搜索框右置，实现搜索框布局紧凑，格式搭配；

 <div class="search">
        <form>
          <input name="search" type="text" class="intxt">
          <input name="searchAction" type="button" class="inbtn" value="搜索" >
        </form>
       </div>

2.导航书签目录

表格实现目录导入，通过div style对表格格式的调整将目录横放

通过点击目录可以实现相应内容的切换。

#nav {
		height: 35px;
	
		margin: 0 auto;
	}

	#nav li{
		margin-right: 20px;
		float: left;
		list-style: none;
		width:6.08%
		}
	#nav li a{
		text-align:center;
		font-size:15px;
		line-height: 35px;
		
		margin: 0 auto;
	}
	#nav a:hover{
	background-color: #700005;
	color: white;}

	#banner{
		width: 1000px;
		height: 270px;
		
		margin: 0 auto;
	}

<div id="nav">
	<ul>
        <li class="on"><a href="https://lewan.baidu.com/lewanhome?idfrom=5056">首页</a></li>
        <li><a href="#" target="_blank">商城</a></li>
        <li><a href="#" target="_blank">页游</a></li>
        <li><a href="#" target="_blank">排行榜</a></li>
        <li><a href="#" target="_blank">攻略</a></li>
        <li><a href="#" target="_blank">奇书计划</a></li>
        <li><a href="#" target="_blank">繁星计划</a></li>
        <li><a href="#" target="_blank">版本更新</a></li>
        <li><a href="#"  target="_blank">版本活动</a></li>
        <li><a href="#"target="_blank">米游社</a></li>
        <li><a href="#" target="_blank">咨询简介</a></li>
      </ul>
  </div>

3.书签超链接

将书签导入相应链接实现网页切换到功能，点击想看到内容即可转喻

<div id="tapbar">
	<div id="left">
      <ul>
 	<li><a href="https://ys.mihoyo.com/?utm_source=adbdpz&from_channel=adbdpz#/" target="_blank">版本详情</a></li>
     <li><a href="https://ys.mihoyo.com/?utm_source=adbdpz&from_channel=adbdpz#/" target="_blank">游戏下载</a></li>
     <li><a href="https://ys.mihoyo.com/main/news" target="_blank">新闻动态</a></li>
      <li><a href="https~~~ target="_blank">官方微博</a></li>
       <li> <a href="https://www.miyoushe.com/ys/" target="_blank">官方社区</a></li>
      </ul>
  </div>

4轮播图运转

通过定时器控制自动切换的时间间隔，还可以通过鼠标单击按钮手动切换图片，

		function $(id){
	return document.getElementById(id);
		}
		function change(path){
			$("banner").style.backgroundImage="url("+path+")";
		}
	var imgs=["images/1.jpg","images/2.jpg","images/3.jpg"];
	var count=1;
	function switch1(){    		   		
    $("banner").style.backgroundImage="url("+imgs[count]+")";
    count+=1;
    if(count>2){count=0;}
}
	setInterval("switch1()",2000);
	function changeback(i){
	$("show").style.backgroundImage="url(images/"+(i)+".jpg)";
}

通过Js控制轮播时间切换图片路径，达到图片数目后重置图片路径继续轮播；

<div id="banner" style="background-image: url(images/1.jpg);">
				<ul>
					<li><a href="#" onclick="change('images/1.jpg');">o</a></li>
					<li><a href="#" onclick="change('images/2.jpg');">o</a></li>
					<li><a href="#" onclick="change('images/3.jpg');">o</a></li>	
				</ul>
			</div>

5.焦点切换

焦点切换实现图片热点切换功能，当鼠标移动到右侧某个小图上时，左侧显示相应的大图；

在一个框架里显示背景，在通过onmousemove改变图片路径达到切换功能

	<div id="B">
	<img src="images/a1.jpg" style="width: 120px;height: 400px ;margin-right : 0px;" onmousemove="$('A').style.backgroundImage='url(images/a1.jpg)'">
	<img src="images/a2.jpg" style="width: 120px;height: 400px ;margin-right: 0px;" onmousemove="$('A').style.backgroundImage='url(images/a2.jpg)'">
	<img src="images/a3.jpg" style="width: 120px;height: 400px ;margin-right: 0px;" onmousemove="$('A').style.backgroundImage='url(images/a3.jpg)'">
	<img src="images/a4.jpg" style="width: 120px;height: 400px; margin-right:  0px;" onmousemove="$('A').style.backgroundImage='url(images/a4.jpg)'">
	</div>

6.无缝画廊

无缝滚动实现图片滚动，并定义图片的滚动速度以及滚动方向；鼠标悬停在图片上停止滚动，移开恢复滚动；通过js实现复制图片及改变屏幕图片刷新位置达到滚动效果

	<div id="picture">

				<div id="gundong" onmousemove="stop();" onmouseout="run();">
					<span id="span1" class="pics">				
						<a href="#"><img src="images/8.jpg" style="width: 400px; height: 250px;"></a>
							<img src="images/9.jpg" style="width: 400px; height: 250px;">
							<img src="images/10.jpg" style="width: 400px; height: 250px;">
							<img src="images/11.jpg" style="width: 400px; height: 250px;">
							<img src="images/12.jpg" style="width: 400px; height: 250px;">
							<img src="images/13.jpg" style="width: 400px; height: 250px;">
							<img src="images/14.jpg" style="width: 400px; height: 250px;">
							<img src="images/15.jpg" style="width: 400px; height: 250px;">
							<img src="images/16.jpg" style="width: 400px; height: 250px;">
							<img src="images/8.jpg" style="width: 400px; height: 250px;"></a>
							<img src="images/9.jpg" style="width: 400px; height: 250px;">
							<img src="images/10.jpg" style="width: 400px; height: 250px;">
							<img src="images/11.jpg" style="width: 400px; height: 250px;">
							<img src="images/12.jpg" style="width: 400px; height: 250px;">
							<img src="images/13.jpg" style="width: 400px; height: 250px;">
							<img src="images/14.jpg" style="width: 400px; height: 250px;">
							<img src="images/15.jpg" style="width: 400px; height: 250px;">
							<img src="images/16.jpg" style="width: 400px; height: 250px;">		
						</span>				
				</div>
			</div>

var left1=0;    	
	function hMove(id,speed){    		
	    var w=$(id).parentNode.offsetWidth;
	    if(2760+left1<=w){
	    	left1=w-1380;
	    }
	    left1+=speed;
	    $(id).style.left=left1+"px";
	}    	
	//开始移动
	var timer=window.setInterval("hMove('gundong',-1)",20);	
	function run(){
		timer=window.setInterval("hMove('gundong',-1)",20);
	}
	function stop(){
		window.clearInterval(timer);
	}