尝试模仿别人的网站

tang_jun_yi

已于 2022-10-31 21:17:05 修改

阅读量533

点赞数

文章标签： css html css3

于 2022-10-31 21:14:04 首次发布

本文链接：https://blog.csdn.net/tang_jun_yi/article/details/127623295

版权

学了几天的HTML尝试写一下模仿一下网易云音乐的网站，

一、代码

<!DOCTYPE html>
<html>
<head>
	<title>DaoHang</title>
	<meta charset="utf-8">
	<style>
		* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}nav.menu {
				width: 100%;height: 50px;background-color: #7b7881;color: white;text-align: center;line-height: 50px;
			}
			
			nav.menu > ul {
				width: 1200px;
				height: 50px;
				/* border: 1px solid white; */
				margin: auto;
			}
			nav.menu > ul > li {
				width: 110px;
				height: 50px;
				
				float: left;
			}
			small{
				font-size: 130%;
			}
			.qq{
				width: 120px;
				border-radius: 25px;
			}
			.ss{
				border-radius: 25px;
				background-color: #7b7881;
			}
			.bb{
				width: 100%;
				height: 40px;
				clear:left ;
				background-color: #eb1111;
			}
			nav.menu1 {
				width: 50%;
				height: 40px;
				background-color: #eb1111;
				color: white;
				line-height: 50px;
				margin: auto;
				text-align: center;
			}
			nav.nav.menu1 > ul {
				width: 50%;
				height: 40px;
				/* border: 1px solid white; */
				margin: auto;
				
			}
			nav.menu1 > ul > li {
				width: 100px;
				height: 40px;
				float: left;
			}
			.box{
				width: 100%px;
				height: 700px;
			}
			.box1{
				width: 900px;
				height: 700px;
				margin:  auto;
			}
			.box2{
				width: 900px;
				height: 300px;
			}
			.box3{
				width: 660px;
				height: 290px;
				overflow: hidden;
				float: left;
				background-image: url(./109951168013888720.jpg);
			}
			.box4{
				width: 220px;
				height: 290px;
				overflow: hidden;
				float: left;
				background-color: #7b7881;
				background-image: url(./屏幕截图_20221030_211316.png);
			}
			.xd{
				width: 220px;
				height: 80px;
				margin: 200px auto;
				background-color: #1e4274;
				font-size: 200%;
			}
			.box5{
				width: 664px;
				height: 390px;
				
				clear:left ;
				float: left;
			}
			.box6{
				width: 660px;
				height: 60px;
				
			}
			nav.menu2 {
				width: 660px;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
			nav.nav.menu2 > ul {
				width: 660px;
				height: 50px;
				margin: auto;
				
			}
			nav.menu2 > ul > li {
				width: 60px;
				height: 40px;
				float: left;
			}
			nav.menu2 > ul > ol {
				width: 60px;
				height: 40px;
				float: right;
			}
			.box7{
				width: 660px;
				height: 320px;
				
			}
			.box8{
				width: 162px;
				height: 200px;
				
				float: left;
			}
			.box9{
				width: 130px;
				height: 130px;
				
				background-image: url(./5.jpg);
				background-position: center center;
			}
			.kk{
				width: 130px;
				height: 20px;
				margin: 110px auto;
				opacity: 0.5;
			}
			.box10{
				width:230px;
				height: 400px;
				float: left;
			}
			.box11{
				width:230px;
				height: 120px;
				text-align: center;
			}
			.oo{
				background-color: #cc1414;
			}
			nav.menu3 {
				width: 230px;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
			nav.nav.menu3> ul {
				width: 230px;
				height: 50px;
				margin: auto;
			}
			nav.menu3 > ul > li {
				width: 100px;
				height: 40px;
				float: left;
			}
			nav.menu3 > ul > ol {
				width: 100px;
				height: 40px;
				float: right;
			}
			.box13{
				width: 230px;
				height: 70px;
				
			}
			.box14{
				width: 60px;
				height: 60px;
				background-image: url(./6.jpg);
				float: left;
			}
	</style>
</head>
<body>
	<div class="aa">
		<nav class="menu">
			<ul>
				<li><small>网易云音乐</small></li>
				<li>网易云音乐</li>
				<li>网易云音乐</li>
				<li>网易云音乐</li>
				<li>网易云音乐</li>
				<li>网易云音乐</li>
				<li>网易云音乐</li>
				<li><input type="search" id="search" placeholder="音乐/视频/电台/用户" class="qq"></li>
				<li><button class="ss">创作者中心</button></li>
				<li>登录</li>
			</ul>
		</nav>
	</div>
	<div class="bb">
			<nav class="menu1">
				<ul>
					<li>推荐</li>
					<li>推荐</li>
					<li>推荐</li>
					<li>推荐</li>
					<li>推荐</li>
					<li>推荐</li>
					
				</ul>
			</nav>
	</div>
	<div class="box">
		<div class="box1">
			<div class="box2">
				<div class="box3"></div>
				<div class="box4">
					<input type="submit" value="下载客户端" class="xd">
				</div>
			</div>
			<div class="box5">
				<div class="box6">
					<nav class="menu2">
						<ul>
							<li><small>热门</small></li>
							<li>热门</li>
							<li>热门</li>
							<li>热门</li>
							<li>热门</li>
							<ol>更多—</ol>
						</ul>
					</nav>
				</div>
				<div class="box7">
					<div class="box8">
						<div class="box9">
							<input type="search" class="kk"value="200万" >
						</div>
						<p>非常好听的歌非常好听的歌非常好听的歌</p>
					</div>
					<div class="box8">
						<div class="box9">
							<input type="search" class="kk"value="200万" >
						</div>
						<p>非常好听的歌非常好听的歌非常好听的歌</p>
					</div>
					<div class="box8">
						<div class="box9">
							<input type="search" class="kk"value="200万" >
						</div>
						<p>非常好听的歌非常好听的歌非常好听的歌</p>
					</div>
					<div class="box8">
						<div class="box9">
							<input type="search" class="kk"value="200万" >
						</div>
						<p>非常好听的歌非常好听的歌非常好听的歌</p>
					</div>
				</div>
			</div>
			<div class="box10">
				<div class="box11">
					<p>登录网易云登录网易云登录网易云登录网易云</p>
					<input type="submit" value="登录网易云" class="oo">
				</div>
				<div class="box12">
					<nav class="menu3">
						<ul>
							<li>入住歌手</li>
							<ol>查看全部>></ol>
						</ul>
					</nav>
				</div>
				<div class="box13">
					<div class="box14">
					</div>
					<p><b>不知名歌手</b></p>
					<p>不知名歌手</p>
				</div>
				<div class="box13">
					<div class="box14">
					</div>
					<p><b>不知名歌手</b></p>
					<p>不知名歌手</p>
				</div>
				<div class="box13">
					<div class="box14">
					</div>
					<p><b>不知名歌手</b></p>
					<p>不知名歌手</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

二、结果