盒子模型之免费体验登录页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>免费体验登录页面</title>
<link href="css/Page_215_5.css" rel="stylesheet" type="text/css"  />
</head>
<body>
<div id="login">
<ul>
<li>
<span class="list">*</span>
<span>姓名:</span>
<input type="text" name="username"  />
</li>
<li>
<span class="list">*</span>
<span>邮箱:</span>
<input type="email" name="email"  />
</li>
<li>
<span class="list">*</span>
<span>电话:</span>
<input type="text" name="telphone"  />
</li>
<li>
<span>性别:</span>
<select >
<option selected="selected"><span>请选择</span></option>
<option>男</option>
<option>女</option>
</select>
</li>
<li>
<span>年龄:</span>
<select>
<option selected="selected"><span>请选择</span></option>
<option>20</option>
<option>21</option>
</select>
</li>
</ul>
<div id="button"></div>
</div>
</body>
</html>//cssy样式
#login{
width:300px;
background: url(../img1/bg.jpg) 0px 0px no-repeat;;
margin: 0px auto;
border-radius: 5px;
}
ul{
list-style: none;
padding-top: 80px;
}
li{
height: 30px;
line-height: 30px;
}
span{color: white;
font-size: 12px;
}
.list{color: red;
}
ul li input,select{
border-radius: 5px;
}select{
border-radius: 5px;
}#button{
height: 40px;
width: 150px;
background: url(../img1/btn.jpg) 0px 0px no-repeat;
margin: 0px auto;
padding-bottom: 50px;
}
//效果图

盒子模型之免费体验登录页面相关推荐

使用盒子模型仿照优酷的页面片段
我们经常能看到优酷页面上整齐的摆放着各个视频,每个视频加下面的文字都像是放在一个固定大小的盒子里,看起来很整齐,正是使用盒子模型弄出来这样的效果.使用一个大的div,里面嵌套无序列表,在无序列表中摆放 ...
【web前端开发 | CSS】页面布局之盒子模型
思维导图文章目录思维导图 1:边框 2:内边距 3:外边距外边距合并 1. 相邻块元素垂直外边距的合并 2. 嵌套块元素垂直外边距的塌陷所谓盒子模型:就是把 HTML 页面中的布局元素看作是 ...
CSS盒子模型/页面布局
1.盒子模型页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子利用CSS设置 ...
CSS页面布局之盒子模型
目录 1 盒子模型 1.1 看透网页布局的本质 1.2 盒子模型组成 1.3 边框(border) 1.4 表格的细线边框 1.5 边框会影响盒子实际大小 1.6 内边距(padding) 案例:新浪 ...
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...
CSS基础——盒子模型【学习笔记】
盒子模型(Box Model) 所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 盒子模型有元素的内容.边框(border).内边距(padding).和 ...
CSS学习笔记7—盒子模型
盒子模型(CSS重点) 学习目标理解: 能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能 ...
七天学会h5和css3之盒子模型内边距和外边距（27）
先来练习一个题目:做一个新浪体育文本页面.,可能你现在并不能很好的做出这个效果,但是学习了本节后,你将很快的做出这个页面,具体代码和效果如下: <!DOCTYPE html PUBLIC &qu ...
Web前端学习笔记05：CSS_盒子模型_复合选择器_标签显示模式_三大特性_书写规范
文章目录 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. ...

盒子模型之免费体验登录页面

盒子模型之免费体验登录页面相关推荐

最新文章

热门文章