CSS中盒子模型
2024-09-04 20:38:08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*
盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。 盒子模型主要是用于操作内边距(padding)与外边距(margin) */
div{
border-style:solid;
width:100px;
height:100px;
/* 内边距 */
padding-left:10px;
padding-top:20px;
}
.one{
margin-bottom:30px;
} .two{
margin-left:700px;
} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="one">
这个是一个div
</div> <div class="two">
这个是二个div
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.outer{
border-style:solid;
width:370px;
height:200px;
margin-top:250px;
margin-left:420px;
background-image:url(../1.jpg);
background-repeat:no-repeat;
background-position:center;
} .userName{
margin-top:60px;
margin-left:80px;
} .password{
margin-left:80px;
margin-top:20px;
} input{
border-color:#000;
border-width:3px;
} #button{
margin-left:120px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="outer" >
<div class="userName">
用户名 <input type="text"/>
</div>
<div class="password">
密 码 <input type="password"/>
</div>
<input id="button" type="submit" value="登陆"/>
</div> </body>
</html>
最新文章
- AngularJS动画
- C#解决验证码问题
- VS2010编译Qt4.8.2的64版本库
- SharpDX之Direct2D教程II——加载位图文件和保存位图文件
- RPC介绍
- 02-自定义CALayer
- android的布局管理器
- Apache环境.htaccess伪静态301跳转(www与不带www)
- How Tomcat Works(十三)
- 转: 跨终端Web之Hybrid App
- Cocos2D-X v3.0 alpha1环境搭建
- 使用Keil软件编写汇编源程序应注意事项
- 关于负数的isdigit()判断
- 在Installshield的安装进度中显示自己设置的信息
- 自定义组件-BreadcrumbTreeView 的使用
- trs.getElementsByTagName is not a function 出现原因及解决办法
- EM vs REM vs PX,为什么你不应该”只用px“”
- int 和 Integer
- 动态SQL1
- Android ProgressDialog 简单实用