大学html设计1

最新推荐文章于 2023-01-07 21:11:02 发布

time-光

最新推荐文章于 2023-01-07 21:11:02 发布

阅读量630

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_57765483/article/details/125656601

版权

一、引言

第一次写博客，写的不好还请多包涵！
本文使用Adobe Dreamweaver 2021，用html5+css简易实现注册、信息、主页面。
当然其中的图片可以改，页面名称也可以改。

二、效果图

1.注册

在这里插入图片描述

2.信息

在这里插入图片描述

3.主页面

在这里插入图片描述

三、注册

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="注册界面.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
	<div class="background">
	<div class="box1"><font color="#36CB60">动漫时空，<font color="red">注册界面✦✦</font></font></div>
	<div class="box3">说明:加*者必填</div>
	<div class="box2">
		<form action="#" method="post">
			时空通讯:
			<input type="text" size="20" value="请输入手机号:"/> *<br/><br/>
			时空昵称:
			<input type="text" size="20" value="亲取个喜欢的昵称呦:"/> *<br/><br/>
			时空密码:
			<input type="password" size="20"/> *<br/><br/>
			再输入一遍密码:
			<input type="password" size="20"/> *<br/><br/>
			<input type="submit"/>
			<input type="reset"/>
		</form>
	</div>
	</div>
</body>
</html>

2.css

@charset "utf-8";
body{
	margin: 100px auto;
	background:#BEB0B0;
}
.box1{
	width: 200px;
	height: 20px;
	border-style: none;
	margin: 0 auto;
	padding: 5px 256px;
	background: grey;
}
.box2{
	width: 700px;
	height: 250px;
	border-style: solid;
	border-color: yellow blue green red;
	border-width: 3px;
	margin:  10px auto;
}
div form{
	padding: 25px 80px;
}
.box3{
	width: 390px;
	height: 25px;
	margin: 0 280px;
}
.background{
	background: #C2A78E;
	width: 716px;
	margin: 0 auto;
}

四、信息

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="我的时空.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="backgroud">
	<div class="box1"><strong>动漫时空,信息界面✦✦</strong></div>
	<div class="box3">说明:已注册，可点击修改信息</div>
	<div class="box2">
		<form>
			时空昵称:
			<input type="text" size="20" value=""/><br/><br/>
			时空密码:
			<input type="password" size="20"/><br/><br/>
			时空通讯:
			<input type="text" size="20" value=""/><br/><br/>
			人物出生日期:
			<input type="text" size="15" value="2001/10/18"/><br/><br/>
			人物性别:
			<input type="radio"/>男<input type="radio"/>女<br/><br/>
			人物学历:
			<select>
				<option>本科生</option>
				<option>专科生</option>
				<option>高中生</option>
				<option>初中生</option>
				<option>小学生</option>
			</select>方便我们推荐动漫<br/><br/>
			人物爱好:
			<input type="checkbox"/>小说<input type="checkbox"/>动漫<input type="checkbox"/>学习<br/><br/>
			<input type="submit"/>
			<input type="reset"/>
		</form>
	</div>
	</div>
</body>
</html>

2.css

@charset "utf-8";
body{
	margin: 100px auto;
	color: white;
	background:#1FD193;
}
.box1{
	width: 200px;
	height: 25px;
	font-size: 20px;
	color:aquamarine;
	border-style: none;
	margin: 0 auto;
	padding: 2px 256px;
	background:#5533B1;
}
.box2{
	width: 700px;
	height: 380px;
	border-style: solid;
	border-color: yellow blue green red;
	border-width: 3px;
	margin:  10px auto;
}
.box3{
	width: 390px;
	height: 25px;
	margin: 5px 225px;
}
div form{
	padding: 25px 80px;
}
.backgroud{
	
	width: 716px;
	margin: 0 auto;
	background-image: url("image/0378c1156713b016ac725ad9008c48c.jpg");
}

五、主页面

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="37.侯海鹏.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="container0">
	    <div class="flaot">	
		 
		       <span><a href="注册界面.html" target="_blank"><button><font size="+1">注册界面</font></button></a></span>
			   <span><a href="我的时空.html" target="_blank"><button><font size="+1">我的时空</font></button></a></span>
	    </div>
	    <div>
		   <p align="left"><font size="+1">首页&nbsp;&nbsp;|&nbsp;&nbsp;分类&nbsp;&nbsp;|&nbsp;&nbsp;常看</font></p>
	    </div>
	</div>
	<div class="container">
	    <ul>
			<li>
				<img class="img1" src="image/Screenshot_20211120_220821.jpg" alt=""/>
				<p><a href="https://v.qq.com/x/cover/mzc0020036ro0ux.html" target="_blank">斗破苍穹三年之约[更新]:惊艳！巨蛇化身绝世美女。</a></p>
		    </li>
			<li>
				<img class="img1" src="image/Screenshot_20211120_195708.jpg" alt=""/>
				<p><a href="https://v.qq.com/x/cover/mcv8hkc8zk8lnov.html" target="_blank">完美世界[更新]:惊悚！石昊独上幽灵船。</a></p>
		    </li>
			<li>
				<img class="img1" src="image/14132254.jpg" alt=""/>
				<p><a href="https://v.qq.com/x/cover/m441e3rjq9kwpsc.html" target="_blank">斗罗大陆[更新]:曾经那么甜,如今意难平。</a></p>
		    </li>
		 </ul>
		 <ol>
			<li></li>
			<li></li>
			<li></li>
		 </ol>
	</div>
	<div class="container1">
		<p class="flaot"><font size="+2"><a href="https://v.qq.com/channel/cartoon" target="_blank">更多</a></font></p>
		<p><font size="+3" color="#D6FF00">今日动漫</font></p>
		
		<ul>
			<li >
				<img class="img2" src="image/1625532ee2.jpg" alt=""/>
				<p><a href="https://v.qq.com/x/cover/mzc0020036ro0ux.html" target="_blank">斗破苍穹三年之约</a></p>
			</li>
			<li>
				<img class="img2" src="image/Screenshot_20211120_195843.jpg" alt=""/>
				<p><a href="https://v.qq.com/x/cover/m441e3rjq9kwpsc.html" target="_blank">斗罗大陆</a></p>
			</li>
			<li>
				<img class="img2" src="image/设计2Screenshot_20211121_101852.jpg" alt=""/>
				<p><a herf="https://v.qq.com/x/cover/mzc00200ni38yk3.html" target="_blank">一人之下4</a></p>
			</li>
			<li>
				<img class="img2" src="image/设计2Screenshot_20211121_102336.jpg"  alt=""/>
				<p><a href="https://v.qq.com/x/cover/2w2legt0g8z26al.html" target="_blank">灵剑尊</a></p>
			</li>
			<li>
				<img class="img2" src="image/Screenshot_20211121_110753.jpg"  alt=""/>
				<p><a href="https://v.qq.com/x/cover/mzc00200azkttu2.html" target="_blank">逆天至尊</a></p>
			</li>
		</ul>
	</div>
	<div class="container1">
		<p class="flaot"><font size="+2"><a href="https://v.qq.com/channel/cartoon" target="_blank">更多</a></font></p>
		<p><font size="+3" color="#07FEB7">完结动漫</font></p>
		<ul>
		   <li >
			  <img class="img2" src="image/Screenshot_20211121_114704.jpg" alt=""/>
	          <p><a href="https://v.qq.com/x/cover/mzc0020040co24e.html" target="_blank">英雄联盟：双城之战</a></p>
	       </li>
		   <li>
			  <img class="img2" src="image/Screenshot_20211121_114255.jpg" alt=""/>
			  <p><a href="https://v.qq.com/x/cover/mzc00200eacw05k.html" target="_blank">画江湖之不良人4</a></p>
	       </li>
		   <li>
			  <img class="img2" src="image/Screenshot_20211121_113924.jpg" alt=""/>
			  <p><a href="https://v.qq.com/x/cover/ww18u675tfmhas6.html" target="_blank">一念永恒</a></p>
	       </li>
		   <li>
			  <img class="img2" src="image/Screenshot_20211121_114519.jpg" alt=""/>
			  <p><a href="https://v.qq.com/x/cover/mzc00200siw6d9n.html" target="_blank">首席御灵师</a></p>
	       </li>
		   <li>
			  <img class="img2" src="image/Screenshot_20211121_114342.jpg" alt=""/>
			  <p><a href="https://v.qq.com/x/cover/mzc00200dpv18be.html" target="_blank">全职法师5</a></p>
	       </li>
        </ul>
	</div>
	<div class="container2">
		<table border="5px" cellpadding="2px" cellspacing="5px">
			<tr>
				<td colspan="2" align="center" bgcolor="#CD3535">动漫排行榜</td>
			</tr>
			<tr align="center" bgcolor="#25A529">
				<td>1.斗破苍穹三年之约</td>
				<td>2.斗罗大陆</td>
				
			</tr>
			<tr align="center" bgcolor="#25A529">
				<td>3.英雄联盟：双城之战</td>
				<td>4.一人之下4</td>
				
			</tr>
			<tr align="center" bgcolor="#25A529">
				<td>5.吞噬星空</td>
				<td>6.完美世界</td>
			</tr>
			    
		</table>
		
	</div>
	<div class="box6">
		<div class="box7">有问题可以联系我&nbsp;&nbsp;电话000000</div>
	</div>
</body>
</html>

2.css

@charset "utf-8";
a:link{
	color:black;
	text-decoration: none;
}
a:visite,a:hoverd{color: aqua;}
a:active{color: red;}



li{
	list-style: none;
	float: left;
}
.flaot{
	float: right;
}

.container0{
	height: 25px;
	
}
.container{
	width: 980px;
	border: 1px solid #8A8A8A;
	overflow: hidden;
	position: relative;
	background-color:aliceblue;
}
.img1{
	width: 980px;
	height: auto;
}
ol{
	position: absolute;
	bottom: 47px;
	left: 452px;
	padding: 10px;
}
ol li{
	width: 25px;
	height: 25px;
	background-color: grey;
	border: 1px solid grey;
	border-radius: 50%;
	margin: 0px 10px;
	
	 
}
.container ul{
       animation:Yui 3s cubic-bezier(0, 1, 0, 1) 1s infinite ;
       width: 400%;

}
@keyframes Yui{
      0% {
        transform: translateX(0px);
      }
      33% {
        transform: translateX(-960px);
      }
      66% {
        transform: translateX(-1920px);
      }
      100% {
        transform: translateX(0px);
      }
      
}
ol li {
  animation:focus 3s linear infinite ;
  }
  ol li:nth-child(1) {
    animation-delay: 0s;
  }
  ol li:nth-child(2) {
    animation-delay: 1s;
  }
  ol li:nth-child(3) {
    animation-delay: 2s;
  }
 
  @keyframes focus {
    0% { 
      background-color: #000;
    }
    20% {
      background-color: #000;
    }
    30% {
      background-color: #fff;
    }
  }
.container1{
	width: 980px;
	border: 1px solid #8A8A8A;
	overflow: hidden;
	position: relative;
	background-color:aliceblue;
	
}
.img2{
	width: 156px;
	border-style: solid;
	border-color: aliceblue;
	margin:0px 10px 0px 0px;
}
.container2{
	border-style: solid;
	border-color: gray;
	width: 250px;
	height: 600px;
	background-color: white;
	position:fixed;
	top: 80px;
	right: 10px;
	
}
.container3{
	font-size: 30px;
	padding: 100px 20px;
	color: red;
}
.box6{
	width: 980px;
	border-style: dotted;
	background-color:azure;
	height: 100px;
}
.box7{
	width: 300px;
	padding: 20px 400px;
}
table{
	width:250px;
	height: 500px;
	
}
table tr td{
	width: 80px;
	height: 50px;
	border-style: none;
}