扁平化设计，博客网站（六）

敢跟头像对视三秒吗？

于 2021-07-16 15:59:44 发布

阅读量98

点赞数

分类专栏： web开发练习

本文链接：https://blog.csdn.net/weixin_45769564/article/details/118802620

版权

web开发练习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

网站结构修改

具体操作：增加新的目录upload用来储存上传上传的文件的图片
目的：为了能狗适应以后的上传图片，不要和开发的素材图片混淆
在这里插入图片描述

图片自动轮播

时钟控件
时间单位为毫秒

//解百纳的时钟控件，用来空中图片轮播
setInterval(function(){
	console.log("ddd")
},2000)

自带标签并不允许连续的选择器来进行查询，通常需要一级一级的来获取，但是这造成了冗余和复杂

元素获取的注意点

var container = document.getElementById("container");

这里返回一个html元素节点

数组形式获取

var content = container.getElementsByClassName("content");

这里返回一个数组，数组的第一个索引为0

图片轮回切换的判断

var imgIndex=1;//表示当前图片是第几张
	var imgCount=4;//表示图片的个数
imgIndex++; //imgIndex=imgIndex+1
		if(imgIndex>imgCount) imgIndex=1;
img[0].src="upload/pics/a"+imgIndex+".jpeg"

使用js来控制html节点的功能，一定要注意放回的是一个元素还是多个元素，还是没有返回元素

代码

window.onload = function() {
	// alert("sdfsdfsdf")   用来测试连接是否成功
	//解百纳的时钟控件，用来空中图片轮播
	var imgIndex=1;//表示当前图片是第几张
	var imgCount=3;//表示图片的个数
	setInterval(function() {
		
		imgIndex++; //imgIndex=imgIndex+1
		if(imgIndex>imgCount) imgIndex=1;
		// console.log("ddd") 测试时钟控件是否有效
		//var imgs=document.getElementsByTagName("#wrapper>#container>.content>section>.pics img");
		//document.querySelectorAll("#wrapper>#container>.content>section>.pics img");
		// var pics = document.getElementsByClassName("#wrapper>#container>.content>section>.pics");
		// //console.log(imgs.src)
		// console.log(pics.src)
		//document.getElementById("pics");  普通方式
		var container = document.getElementById("container");
		// console.log(container)
		//document.getElementsByClassName("pics");
		var content = container.getElementsByClassName("content");
		var pics = content[0].getElementsByClassName("pics");
		var a =pics[0].getElementsByTagName("a");
		//console.log(a[0].href)
		//console.log(pics)
		if(imgIndex==1) a[0].href="http://baidu.com";
		else if(imgIndex==3){ 
		a[0].href="http://aiqiyi.com";
		}
		var img=a[0].getElementsByTagName("img");
		console.log(img[0].src);
		img[0].src="upload/pics/a"+imgIndex+".jpeg"
		
		
		
		
	}, 3000)

}

可以让logo一直悬挂的css
使得header部分的hi用position：fixed；
但这个方法并不好
换一个

修改了头部固定部分的布局

<div id="toper">


				<header>
					<h1>香江小汉堡<br><span class="logo">x i a n g j i a n g</span></h1>
				</header>
				<!-- <div style="height: 120px;">
				
			</div> -->

				<nav>
					<ul>
						<li class="item_active"><a href="#">首页</a></li>
						<li><a href="#">奥里给</a></li>
						<li><a href="#">撤硕</a></li>
						<li><a href="#">配料</a></li>
						<li><a href="#">想你的液</a></li>
						<li><a href="#">关于老八</a></li>
						<button type="button"></button>

					</ul>

				</nav>
			</div>

外面套了个div

固定部分的框架横向全屏显示

#wrapper>#toper {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
}

目的;固定悬浮代码
这个div的层像是优先级数字越大优先级越高
当左右的值都是零的时候，将横向全屏显示

代码

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>香江小海涛</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/mian.css" />
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="wrapper">
			<div id="toper">


				<header>
					<h1>香江小汉堡<br><span class="logo">x i a n g j i a n g</span></h1>
				</header>
				<!-- <div style="height: 120px;">
				
			</div> -->

				<nav>
					<ul>
						<li class="item_active"><a href="#">首页</a></li>
						<li><a href="#">奥里给</a></li>
						<li><a href="#">撤硕</a></li>
						<li><a href="#">配料</a></li>
						<li><a href="#">想你的液</a></li>
						<li><a href="#">关于老八</a></li>
						<button type="button"></button>

					</ul>

				</nav>
			</div>
			<div id="container">


				<div class="ad">
					<img src="img/guangbo.png">
					<marquee behavior="" direction="">欢迎来到香江小汉堡美食网站 今天起的有点早 / 闲着没事做个汉堡 / 汉堡味道好不好 / 配料你得要选好 / 面包片 老干妈 /
						放点生菜合上它 / 大白豆腐 韭菜花 / 今天早餐就吃它 / 灯红酒绿迷人醉 / 老八教你做美味 / 千军万马来相见 / 首先来碗大桶面 / 大声呐喊奥利给 / 所有东西都下胃 /
						不管是腥还是臭 / 到我嘴里是块肉 奥里给 干了兄弟们!!!!</marquee>
				</div>
				<div class="content">
					<section>
						<div id="pics" class="pics">
							<a
								href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E8%80%81%E5%85%AB&hs=0&pn=1&spn=0&di=151360&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2516937770%2C245388711&os=1453583172%2C743231865&simid=0%2C0&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E8%80%81%E5%85%AB&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F4c64d7a9ef8670086f0474493a3ab42aaf0dc9f6.jpg%26refer%3Dhttp%3A%2F%2Fi0.hdslb.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1627603955%26t%3Dd449c683195eb3cf63b840b1da2b2ec9&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bktstktst_z%26e3Bv54AzdH3F6jw1AzdH3Fve90989ma&gsm=2&islist=&querylist=">
								<img src="upload/pics/a1.jpeg" alt="Grapefruit slice atop a pile of other slices">
							</a>
						</div>
						<div class="weekrank">
							周排行
						</div>

					</section>
					<aside>
						侧标看
					</aside>
				</div>


			</div>
			<footer>
				<section>&copy;2021 | 香江小海涛</section>
			</footer>
		</div>
	</body>
</html>
<a href="#">

css

* {
	margin: 0;
	padding: 0;
	color: #696969;
}

#wrapper {
	background-color: #CCCCCC;
}

#wrapper>#toper {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
}

#wrapper>#toper>header {
	background-color: #86c3db;
	/* background-color: #87c0ca; */
	/* background-color: hsl(215, 100%, 55%); */
	width: 100%;
	height: 120px;

	display: -webkit-box;
	display: -moz-box;
	/* -moz-box-pack: center;
	-webkit-box-pack: center; */
	/* position: relative; */

}

#wrapper>#toper>header .logo {
	font-family: "db";
	color: white;
	font-size: 20px;
}

#wrapper>#toper>header>h1 {
	color: white;
	/* 
	 */
	margin: auto;
	display: -webkit-box;
	display: -moz-box;
	-moz-box-align: center;
	-webkit-box-align: center;
	transition-duration: 3s;
	cursor: pointer;

	text-shadow: purple 5px 3px 1px;

}

#wrapper>#toper>header>h1:hover {
	left: 10px;
	transform: translateX(50px);

	text-shadow: blueviolet 14px 7px 10px;



}

/* 导航栏 */
#wrapper>#toper>nav {

	/* background-color: dimgrey; */
	background-color: #1587ac;
	height: 50px;
	/*在手机情况下可以华东*/
	/* position: fixed; */
	z-index: 10;
	top: 120px;
	/* margin-top: 80px; */
}

@media (max-width:600px) {
	#wrapper>#toper>nav {

		overflow: scroll;
		/* top: 101px; */

	}

	/* #wrapper>#toper{
		position: fixed;
		z-index: 10;
	} */
}

#wrapper>#toper>nav ul {
	/* border: 1px solid forestgreen;
	max-width: 960px;
	margin: auto;
	/* display: inline-block; */

	/* height: 65px; */
	max-width: 960px;
	position: relative;
	min-width: 600px;

}

#wrapper>#toper>nav li {
	display: inline-block;
	height: 50px;
	line-height: 50px;
	padding-right: 10px;
	/* padding-top: 10px; */
	max-width: 80px;
	/* border: 1px solid forestgreen; */
	text-align: center;


}

#wrapper>#toper>nav li:hover,
.item_active {
	/* background-color: cadetblue; */
	background-color: #de8d41;
	text-shadow: black 2px 2px 5px;
}

#wrapper>#toper>nav>ul a {
	color: white;
	text-decoration: none;
	font-size: 20px;





}

/* 查找按钮 */
#wrapper>#toper>nav>ul button {

	border-width: 0;
	background-color: transparent;
	position: absolute;
	/* padding-top: 20px; */
	background-image: url(../img/lookup3.png);
	width: 32px;
	height: 32px;
	top: 10px;
	cursor: pointer;
}

#wrapper>#toper>nav>ul button:hover {
	/* background-color: #8A2BE2; */
	background-image: url(../img/lookup4.png);
	text-shadow: black 2px 2px 5px;
}


/* 开始正文模块 */

#wrapper>#container {
	max-width: 960px;
	/* height: 100%; */
	/* background-color: #ccc; */
	/* margin: auto; */
	/* border: 1px solid red; */
	position: relative;
	overflow: auto;
	display: -moz-box;
	display: -webkit-box;
	/* height: 100%; */
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	/* -moz-box-pack: center;
	-webkit-box-pack: center; */
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	margin: auto;
	height: 600px;
	/* scroll-behavior: auto; */
	margin-top: 170px;
}


/* 广告栏 */

#wrapper>#container>.ad {
	background-color: #FFFFFF;
	box-shadow: gray 3px 3px 10px;
	padding: 5px;
	position: relative;
	display: -moz-box;
	display: -webkit-box;

}

/* #wrapper>nav button>img{
	width: 30px;
	height: 30px;
	/* padding-top: 5px; */


#wrapper>#container>.ad img {
	margin-right: 10px;
	/* margin-top: 3px; */
	position: absolute;
	margin-top: 5px;

}

#wrapper>#container>.ad>marquee {
	max-width: 900px;
	margin-left: 20px;
	display: -moz-box;
	display: -webkit-box;
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
}

/* 主要内容部分 */
#wrapper>#container>.content {
	display: -moz-box;
	display: -webkit-box;
	margin-top: 10px;

}

#wrapper>#container>.content::-webkit-scrollbar {
	display: none;



}

#wrapper>#container::-webkit-scrollbar {
	display: none;



}

#wrapper>#container>.content>section {
	max-width: 655px;
	height: 400px;
	/* border: 1px solid red; */
	/* float: left; */
	-moz-box-flex: 5;
	-webkit-box-flex: 5;

}

/* 图片轮播模块 */
#wrapper>#container>.content>section>.pics {
	/* height: 300px; */
	background-color: mintcream;
	width: 100%;
	/* border: 1px solid #8A2BE2; */



}

#wrapper>#container>.content>section>.pics img {
	width: 100%;
}

#wrapper>#container>.content>section>.pics:hover {
	box-shadow: cadetblue 3px 3px 10px;
	transition-duration: 1s;
}

/* 周排行 */
#wrapper>#container>.content>section>.weekrank {
	height: 150px;
	background-color: mintcream;
	/* width: 100%; */
	/* border: 1px solid gold; */
	margin-top: 10px;

}

#wrapper>#container>.content>section>.weekrank:hover {
	box-shadow: cadetblue 3px 3px 10px;
	transition-duration: 1s;
}

#wrapper>#container>.content>aside {
	max-width: 300px;
	height: 400px;
	border: 1px solid blue;
	/* float: right; */
	-moz-box-flex: 2;
	-webkit-box-flex: 2;
}

/* 移动端处理 */
@media (max-width:420px) {
	#wrapper>#container>.content>aside {
		display: none;
	}

	#wrapper>header {
		height: 100px;
	}
}

/* #wrapper>nav>a{
	text-decoration: none;
	color: white;
	font-size: 30px;
	margin: auto;
	text-align: center;
	padding: 10px;
	
}
#wrapper>nav>a:hover{
	text-shadow: brown 2px 2px 5px;
	background-color:hsl(225,100%,55%);
} */
/* 版权模块 */
#wrapper>footer {


	background-color: #595959;
	width: 100%;
	color: white;
	height: 50px;
	font-weight: bold;


}

#wrapper>footer>section {
	color: white;
	margin: auto;
	max-width: 960px;
	line-height: 50px;

}

效果

在这里插入图片描述

敢跟头像对视三秒吗？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
扁平化设计，博客网站（六）

网站结构修改具体操作：增加新的目录upload用来储存上传上传的文件的图片目的：为了能狗适应以后的上传图片，不要和开发的素材图片混淆图片自动轮播时钟控件时间单位为毫秒//解百纳的时钟控件，用来空中图片轮播setInterval(function(){ console.log("ddd")},2000)自带标签并不允许连续的选择器来进行查询，通常需要一级一级的来获取，但是这造成了冗余和复杂元素获取的注意点var container = document.getElementById
复制链接

扫一扫