发表于： 2018-04-28 22:36:01
2 401
今天做的事：
1.继续任务10
明天计划的事：
1.继续任务10
2.继续为小课堂准备
遇到的困难：
1.任务10的radio和select的样式修改，以及bootstrap中的表单元素的应用不熟练。很慢
2.在任务的头部，套用之前任务的html，CSS改的有点错乱，也不知道自己是怎么做出来的。
收获：
1.学习了radio和input样式修改的方法。
input设置步骤：
1.在input后面添加一个兄弟元素span，设置span样式
如：span {
display：inline-block；
width：30px；
height：30px；
background：#00f；
border：1px solid #000；
}
2.设置input本身display：none；
3.利用伪类选择器：input：checked+span{
border：10px solid #0f0;
backgroud: #534578;
}
这里的+代表选择相邻的兄弟元素，若为不相邻的兄弟元素请使用 input：checked~span{}
select设置步骤：
1.先清除原来的格式：
-moz-appearance: none;
-webkit-appearance: none;
2.设置样式。
background: url("../img/task10/select-shape.png") no-repeat 100% center;
-webkit-background-size: 24px 28px;
background-size: 24px 28px;
其中上文的蓝色数值代表了下拉符号所在的位置，即水平最右，垂直居中。
2.学习了bootstrap中的表单：
Bootstrap 提供了下列类型的表单布局：
- 垂直表单（默认）
- 内联表单
- 水平表单
1.基本的表单结构（垂直表单）是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。
下面列出了创建基本表单的步骤：
- (1)向父 <form> 元素添加 role="form"。
- (2)把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
- (3)向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
2.内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，
请向 <form> 标签添加 class .form-inline。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
3.水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。
如需创建一个水平布局的表单，请按下面的几个步骤进行：
- (1)向父 <form> 元素添加 class .form-horizontal。
- (2)把标签和控件放在一个带有 class .form-group 的 <div> 中。
- (3)向标签添加 class .control-label。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
</form>
进度：任务10
开始时间：2018.04.28
预计结束时间：2018.04.29
有无延期风险： 无
禅道：http://task.ptteng.com/zentao/my-task.html
返回列表
评论