HTML+CSS简单的登陆+注册界面仿照案例（一）

是新手在练习html+css，所以里面的很多代码会比较冗杂，不是很简洁，会慢慢提高水平的。

1.整体界面分为三大部分：导航、主要内容、尾部信息内容；主要内容细分为：左侧栏（页面信息部分）、右侧栏（登陆板块）

2.导航：里面有四个li标签,每个li标签里面都有一个a标签，让其右浮在边上，对其的样式】格局进行css美化

3. 主要内容：左侧栏（页面信息部分）、右侧栏（登陆板块）

    （1）左侧栏（页面信息部分），然后css美化

            一个h1大标签、一个h4小标签·、4个p标签

    （2）右侧栏（登陆板块）

            该部分用表格

            登陆信息有：登陆板块标题、用户名栏、密码栏、登录按钮、信息提示部分

4. 尾部信息内容

    就是几个li标签没有太大意义

HTML代码：

	
	
	


	

		
		

			

				
链接三
				
链接二
				
链接一
				
首页
			
		

		
		

			
			

				
海量品牌    信息共享
				
数据结合商业  让大数据发挥大价值
				



				
精准营销、数据化管理，提升管理水平。
				
打造线上线下数字一体化。
				
双选平台，建立工厂与经销商双向选择平台。
				
服务市场，塑造经销商信用等级，为其提供相应的金融服务。

			
			
			

				

					

						
用户登陆
						
用户名：
						
						
密码：
						
						
						

						
  记住密码
						
忘记密码
						


						
没有账号？立即注册
					

				
			
		

		
		

				

					
关于我们
					
诚聘人才
					
联系商家
					
广告服务
					
浙江省宁波市鄞州区xx路666号xxx公司 Camping 2018-2010
				

		

	

CSS代码：

*{margin: 0;padding: 0;list-style: none;}
body{
	background: url('bg.jpg') ;
    background-size: 100%; 
}
.container{
	width: 1200px;
	height: 870px;
	margin: 0 auto;
/* 	background: #ccc; */
}
/* 导航 */
.nav{
	margin-top: 10px;
	height: 50px;
	line-height: 50px;
}
.nav ul li{
	float: right;
	font-size: 15px;
}
.nav ul li a{
	text-decoration: none;
	color: #152b3c;
	padding:15px 30px;
}
.nav ul li a:hover{
	border: 1px solid white;
	border-radius:5%;
	color: white;
} 
/* 主题内容 */
.main{
	width:1200px;
	height: 450px;
}
.sideleft{
	width:460px;
	height: 250px;
	float: left;
	padding:85px 130px
}
.sideleft p{
	padding: 8px 0;
	font-size: 16px;
}
.sideright{
	width: 480px;
	height: 450px;
	float: right;
}
.sideright .index{
	width: 330px;
	height: 350px;
	background-color:rgba(255,255,255,0.75);
	margin: 50px 90px;
}
.headline{
	font-size: 22px;
	text-align: center;
	padding: 20px;
}
input[type="text"],
input[type="submit"]{
	-web-kit-appearance:none;
  	-moz-appearance: none;
  	display: block;
  	margin: 0 auto;
  	font-size:15px;
  	width: 240px;
}
input[type="text"]{
	height:35px;
	border-radius:3px;
	border:1px solid #c8cccf;
	color:#6a6f77;
	outline:0;
}
input[type="submit"]{
	margin-top: 25px;
	height: 35px;
	background: #357eb8;
	color: #bcedff;
	font-weight: bold;
	font-size: 16px;
}
input[type="submit"]:hover{
	background: #0e62a3;
	cursor: pointer;
}
.astyle{
	margin: 5px 0 5px 42px;
	font-size:17px; 
	color: #6a6f77;
}
.bstyle{
	display: block;
	float: left;
	margin-left: 46px;
	font-size: 15px;
}
.cstyle{
	display: block;
	float: right;
	margin-right: 46px;
	font-size: 15px;
}
.cstyle a{
	text-decoration: none;
}
.footer{
	width: 1000px;
	margin:60px auto;
}
.footer ul{
	margin-left: 100px;
}
.footer ul li{
	float: left;

}
.footer ul li a{
	text-decoration: none;
	color: black;
	border-left: 2px solid black;
	padding:0 10px;
}

界面展示：