从零开始——博客网站搭建（二）

敢跟头像对视三秒吗？

于 2021-04-30 21:29:16 发布

阅读量58

点赞数

分类专栏： web开发练习

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

版权

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

16 篇文章 0 订阅

订阅专栏

这一次我要将网站的logo做好，期望达到大目标就是动态，可交互，外管美观

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>香江小海涛</title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/mian.css"/>
		
	</head>
	<body>
		<div id="wrapper">
			<header><h1>香江小海涛<br><span class="logo" >x i  a  n  g j i a n g</span></h1></header>
			<nav>
				<a href="#">新闻</a>
				<a href="#">要情</a>
				<a href="#">国际</a>
				<a href="#">国内</a>
				<a href="#">风云</a>
			</nav>
			<div id="container">
				主要内容
			</div>
			<footer>&copy;2021 | 香江小海涛</footer>
		</div>
	</body>
</html>

对于动态可交互的要求，我选择使用css3动画效果＋锚点伪类来实现

#wrapper>header {
	background-color:hsl(215,100%,55%);
	width: 100%;
	height: 150px;
	
	display: -webkit-box;
	display: -moz-box;
	/* -moz-box-pack: center;
	-webkit-box-pack: center; */
	position: relative;
}
#wrapper>header .logo{
	font-family: "db";
	color: white;
	font-size: 20px;
}
#wrapper>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>header>h1:hover{
	left: 10px;
	transform: translateX(50px);
	
	text-shadow: blueviolet 14px 7px 10px;
	
	
}
#wrapper>nav{
	
	background-color: lightcoral;
	height: 45px;
}
#wrapper>nav>a{
	text-decoration: none;
	color: gold;
	font-size: 30px;
	margin: auto;
	text-align: center;
	padding: 10px;
	
}
#wrapper>nav>a:hover{
	text-shadow: brown 2px 2px 5px;
}

这里出现了个问题，需要将html中的标签，这个下期再说

敢跟头像对视三秒吗？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
10
评论
从零开始——博客网站搭建（二）

这一次我要将网站的logo做好，期望达到大目标就是动态，可交互，外管美观<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>香江小海涛</title> <link rel="stylesheet" type="text/css" href="css/common.css"/> <link rel="stylesheet" typ
复制链接

扫一扫