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。