div中嵌套div的网页布局

作者:糖果

因为这个个人网站的前端,没有过于复杂的元素 ,所以,想使用纯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。

糖果

糖果
LUA从入门到放弃

Moonscript如何显示复选框

Moonscript如何显示复选框 Continue reading

Lapis框架的常用处理方法

Published on March 02, 2017