作者:糖果

因为这个个人网站的前端,没有过于复杂的元素 ,所以,想使用纯Div+css+js的方式实现,这个可以对很细微的元素进行调整。

这次主要是说,网页中Div嵌套的布局处理方式。而应用的场合是,网站的登录框。下面,就分别给出了,网站元素的样式和Html标签代码。

CSS样式代码,如下:

 <style>
.outside{
    float: left;
    padding: 0;
    margin: 1px 0 0 1px;
	width: 230px;
	height:320px;
	border:1px solid #F00;
	background-image:url(/static/yqfy/img/login_background.png)
}

.inside {
    float: left;
    padding: 0;
    margin: 30px 0px 0px 40px;
	width:150px;
	height:130px;
	border:1px solid #F00;
}


.login_username {
    float: right;
    padding: 0;
    margin: 0 0 0 1px;
    background : none ;
    font-size: .8em;
    text-align:center;
    background-color: black;     
    border-spacing: 1px;
    border: 1px;
    border-radius: 1px;
    color:cornsilk
}
    
.login_password {
    float: right;
    padding: 0;
    margin: 1px 0 0 1px;
    background : none ;
    font-size: .8em;
    text-align:center;
    background-color: black;     
    border-spacing: 1px;
    border: 1px;
    border-radius: 1px;
    color:cornsilk
}
 </style>

Html代码如下:

<div class="outside">
	outside
	<div class="inside">
		inside
       <form action="" method='post' >
           <div class="login_box">
           	<div class="div_input">
               	<img src="/static/yqfy/img/login.jpg" alt="login" />
               </div>                           
               <div class="div_input">
               	<input class="login_username" name='username' type="text"  width="75px" height="50px" placeholder="用户名" >          
               </div>
               <div class="div_input">
               	<input class="login_password" name='password' type="password"  width="75px" height="50px" placeholder="密码" >
               </div>		
           </div>
                           
        	<div class="div_input">
           	<button class="login_btn" type="submit">登录</button>
        	</div>
        </form>
</div>
</div>

实际效果,如下:
点击查看效果

总结:
css+html标签,本质上还是“设定”,这种设定主要集中在,样式颜色,位置,等。而以上的例子,关键的属性设定是margin属性。div中设定div好理解,关键点在于,如何设定嵌套在一起啊的div彼此位置关系的设定,所以,div的css的关键是:margin。