网页设计经典案例（Web）

网页设计经典案例一、实现效果（一）源代码（二）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style tyle="html">img{width: 300px;height: 200px;}#t

木头科技㉿

27432人浏览 · 2021-02-21 21:06:44

木头科技㉿ · 2021-02-21 21:06:44 发布

网页设计经典案例

在这里插入图片描述

一、实现效果（一）

在这里插入图片描述

源代码（二）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style tyle="html">
		img{
			width: 300px;
			height: 200px;
		}
		#test{
			letter-spacing: 2px;
			line-height:1.5em;
		}
		a{
			text-decoration:none;
		}
		*{
			 text-align:center;
		}

	</style>
</head>
<body>
	<h1>梦一场</h1>
	<h2>梦醒了的bai姊妹</h2>
	<p  id="test">
		我们都曾经寂寞 <br/>
		而给对方承诺<br />
		我们都因为折磨<br />
		而厌倦了生活<br />
		只是这样的日子<br />
		同样的方式还要多久<br />
		我们改变了态度<br />
		而接纳了对方<br />
		我们委屈了自己<br />
		成全谁的梦想<br />
		只是这样的日子<br />
		还剩下多少已不重要<br />
		时常想起过去的温存<br />
		让我在夜里不会冷<br />
		你说一个人的美丽是认真<br />
		两个人能在一起是缘份<br />
		早知道是这样像梦一场<br />
		我才不会把爱都放在同一个地方</p>
	<div>
	<img src="6666.jpg" alt="">
	</div>
	<br>
	<a href="#">点赞</a>
	<a href="#">评论</a>
	<a href="#">转发</a>

</body>
</html>

二、实现效果（一）

在这里插入图片描述

源代码（二）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
	body{
		font-size:14px;
	}
	#contalner{
        margin:0 auto; 
        width:1000px;
		height:500px;
		/*background-color: #6cf;*/
	}
	#header{
		height:100px;
		background-color: #6cf;
		margin-bottom:5px;
	}
	#main{
		height:500px;
		/*width:800px;*/
		/*background-color: #cff;*/
		margin-bottom:5px;
	}
	#aside{
		float:left;
		width:300px;
		height:500px;
		background-color: #6cf;
	}
	#content{
		float:left;
		width:695px;
		height:500px;
		background-color: #cff;
		margin-left:5px;
	}
	#footer{
		height:60px;
		background-color: #6cf;
	}
	</style>
</head>
<body>
	<div id="contalner">
		<div id="header"></div>
		<div id="main">
			<div id="aside"></div>
			<div id="content"></div>
		</div>
		<div id="footer"></div>
	</div>
</body>
</html>

三、实现效果（一）

在这里插入图片描述

源代码（二）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#imglist{
			width: 130px;
			margin:0 auto;
		}
		.pol{
			width: 132px;
			padding: 10px;
			background-color: #eee;
			border: 1px solid #dfdfdf;
			box-shadow: 10px 10px 5px #aaa;
			border-radius:10px;

		}
		#imglist img{
			height: 150px;
			width: 132px;
			margin: 0 auto;

		}
		.rotate-left{
			-webkit-transform: rotate(7deg);
			-ms-transform: rotate(7deg);
			-o-transform: rotate(7deg);
			transform: rotate(7deg);
			
		}
		.rotate-right{
			-webkit-transform: rotate(-7deg);
			-ms-transform: rotate(-7deg);
			-o-transform: rotate(-7deg);
			transform: rotate(-7deg);
			
		}
		 div img:hover{  
                transform: scale(1.4);  
            }  
	</style>
</head>
	<div id="imglist">
		<div class="pol rotate-left"><img src="1111.jpg" alt=""></div>
		<div class="pol rotate-right"><img src="2222.jpg" alt=""></div>
		<div class="pol rotate-left"><img src="3333.jpg" alt=""></div>
		<div class="pol rotate-right"><img src="4444.jpg" alt=""></div>
	</div>
	
</body>
</html>

四、实现效果（一）

在这里插入图片描述

源代码（二）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>                             
		*{
			padding:0;                  
			margin:0;
		}
		#nav{                           
			margin:50px auto;           
			width:300px;
			font-size:0;                


		}
		a{                               
			display:inline-block;        
			width:80px;
			height:30px;
			border-bottom:1px solid #ccc;   
			font-size:14px;
			text-align:center;
			line-height:30px;
			text-decoration: none;       
		}
		a:hover{                         
			color:white;                 
			background-color:#ccc;       
			border:1px solid;            
			border-left-color:orange;    
			border-top-color:orange;
			border-right-color:orange;

		}
		
	</style>
</head>
<body>
<div id="nav">                          
	<a href="#">链接1</a>
	<a href="#">链接2</a>
	<a href="#">链接3</a>

</div>
</body>
</html>

五、实现效果（一）

在这里插入图片描述

源代码（二）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding:0;
		margin:0;

	}
	body{
		font-size:14px;
	}
	#container{
		margin:0 auto;
		width:1000px;
		height:500px;
		/*background-color:blue;*/
	}
	#header{
		height:100px;
		background-color:blue;
		margin-bottom:5px;

	}
	#main{
		height:500px;
		/*background-color:#cff;*/ 
		margin-bottom:5px;
	}
	#aside{
		float:left;
		width:300px;
		height:500px;
		background-color:blue;
		margin-right:5px;

	}
	#content{
		float:left;
		width:695px;
		height:500px;
		background-color:#cff;

	}
	#footer{
		height:60px;
		background-color:blue; 
		
	}
	</style>
</head>
<body>
	<div id="container">
	<div id="header"></div>
	<div id="main">
		<div id="aside"></div>
		<div id="content"></div>
	</div>
	<div id="footer"></div>
	</div>

	
</body>
</html>

六、实现效果（一）

在这里插入图片描述

源代码（二）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>web前端开发</title>
</head>
<body>
	<a href="http://www.w3c.org">w3c组织</a><br />
	<a href="www.w3school.com.cn">w3school学习网站</a><br />
	<a href="vv.html">前端与后端</a>
	<h1>WEB前端开发</h1>
	<h5>web front-end development</h5>
	<hr />
	<h2>基本概念</h2>
	<p>发到公司的法国雷诺胜利的凯歌凡是看过了士大夫看见关键看是否的是否广泛豆腐干士大夫；高考结束 技术的飞机公司 是技术</p>
	<h2>技术构成</h2>
	<p>HTML</p>
	<p>CSS</p>
	<p>JS</p>
	<hr />
	<h6>copyright</h6>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>前端与后端</title>
</head>
<body>
	<a href="http://www.w3c.org">w3c组织</a><br />
	<a href="www.w3school.com.cn">w3school学习网站</a><br />
	<a href="vv.html">前端</a>
	<h1>前端与后端</h1>
	<h5>front-end development</h5>
	<hr />
	<h2>区别</h2>
	<p>发到公司的法国雷诺胜利的凯歌凡是看过了士大夫看见关键看是否的是否广泛豆腐干士大夫；高考结束 技术的飞机公司 是技术的发生范德萨的客户发噶客户给达拉斯官方啊但是经过发送旅客发爱丽丝的进攻乏力 </p>
	
	<hr />
	<h6>copyright</h6>
</body>
</html>

七、实现效果（一）

在这里插入图片描述

源代码（二）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	table{
		border:2px solid white;
		width:300px;
	}
	th{
		background-color:#3cc;
		text-align:center;
		font-size:18px;
		line-height:3em;
	}
	td{
		color:white;
		background-color:rgb(0,0,0);
		font-size:12px;
	}
	a:link{
		text-decoration: none;
		color:rgb(255,255,255);
	}
	a:hover{
		background-color: white;
		color:rgb(0,0,0);
	}
	</style>
</head>
<body>
<table>

<tr>
<th>外国最经典的文学名著</th>
</tr>
<tr>
<td>
<ul>
<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>
<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>
</ul>
</td>
</tr>
</table>	
</body>
</html>

八、实现效果（一）

在这里插入图片描述

源代码（二）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<body>
	<form action="">
	账户：<input type="text">
	<br />                                                       
	密码：<input type="password">
	<br />
	爱好：<input type="text">
	<input type="submit" value="确定">
	<input type="reset" value="重置">
	<br />
	性别：
	男<input type="radio" name="gender">
	女<input type="radio" name="gender">
	<br />
	爱好：
	<input type="checkbox">音乐
	<input type="checkbox">体育
	<input type="checkbox">阅读
	<br />
	
	爱好：<select>
	<option value="">看书</option>
	<option value="" selected="selected">旅游</option>
	<option value="">运动</option>
	<option value="">购物</option>
	</select>
	<h5>个人简历：</h5>
	<textarea name="" id="" cols="30" rows="10"></textarea>
	<br />
	<br />
    <input type="submit" value="确定">  <input type="reset" value="重置">
	

	</form>
	
</body>
</html>