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

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

是新手在练习html+css,所以里面的很多代码会比较冗杂,不是很简洁,会慢慢提高水平的。1.整体界面分为三大部分:导航、主要内容、尾部信息内容;主要内容细分为:左侧栏(页面信息部分)、右侧栏(登陆板块)2.导航:里面有四个li标签,每个li标签里面都有一个a标签,让其右浮在边上,对其的样式】格局进行css美化3.主要内容:左侧栏(页面信息部分)、右侧栏(登陆板块)    (1)左侧栏(页面信息部分),然后css美化            一个h1大标签、一个h4小标签·、4个p标签    (2)右侧栏(登陆板块)            该部分用表格            登陆信息有:登陆板块标题、用户名栏、密码栏、登录按钮、信息提示部分4.尾部信息内容    就是几个li标签没有太大意义HTML代码:

<!doctype html><html lang="en"><head>	<meta charset="UTF-8">	<title>登陆界面1</title>	<link rel="stylesheet" href="index.css"></head><body>	<div class="container">		<!-- 导航 -->		<div class="nav">			<ul>				<li><a href="#">链接三</a></li>				<li><a href="#">链接二</a></li>				<li><a href="#">链接一</a></li>				<li><a href="#">首页</a></li>			</ul>		</div> 		<!-- 主体内容 (登陆界面)-->		<div class="main">			<!-- 左侧信息栏 -->			<div class="sideleft">				<h1>海量品牌    信息共享</h1>				<h4>数据结合商业  让大数据发挥大价值</h4>				</br></br></br>				<p>精准营销、数据化管理,提升管理水平。</p>				<p>打造线上线下数字一体化。</p>				<p>双选平台,建立工厂与经销商双向选择平台。</p>				<p>服务市场,塑造经销商信用等级,为其提供相应的金融服务。</p> 			</div>			<!-- 右侧登陆界面 -->			<div class="sideright">				<div class="index">					<form action="#" method="get">						<p class="headline">用户登陆</p>						<p class="astyle">用户名:</p>						<input type="text" value="请输入您的手机号">						<p class="astyle">密码:</p>						<input type="text" value="请输入密码">						<input type="submit" value="登陆" name="login" >						</br>						<p class="bstyle"><input type="checkbox" name="rempas" />  记住密码</p>						<p class="cstyle">忘记密码</p>						</br></br>						<p class="cstyle">没有账号?<a href="zhuce.html">立即注册</a></p>					</form> 				</div>			</div>		</div> 		<!-- 尾部 -->		<div class="footer">				<ul>					<li><a href="#">关于我们</a></li>					<li><a href="#">诚聘人才</a></li>					<li><a href="#">联系商家</a></li>					<li><a href="#">广告服务</a></li>					<li><a href="#">浙江省宁波市鄞州区xx路666号xxx公司 Camping 2018-2010</a></li>				</ul> 		</div> 	</div></body></html>

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;}  

界面展示:

点这里可以跳转到人工智能网站