今天完成的事情：

今天做完了任务10

主要用到的是input元素，使用到的类型包括button、radio和number

实现效果：

(PC端)

（移动端）

1、登陆注册和导航中的按钮<input type="button" name="home" value="首页">其中type说明表单类型，value表示表单中显示的值

在html5中input元素新增了很多类型

button：按钮，鼠标单击可激活javascript指令

checkbox：复选框（同一题目的选项name值要相同）

radio：单选（同一题目的选项name值要相同）

color：取色器

date：日期（相似的还有month、week、time）

email：邮箱（能够检测输入是否为正确的邮箱格式）

file：上传文件

number：用于输入数字，可限定范围

password：输入密码，将转换为*号显示

submit：提交按钮

url：输入链接

（b站av51518146 p5-p7 新增表单属性详解）

2、橙色进度条

思路是：画一个长条，在上面放一个圆

<div class="line"><div class="circle">1</div></div>

.line { /*圆在长条div的内部，将长条div定义为弹性盒子，使圆处于正中间*/

    display: flex;

    justify-content:center;

    align-items: center;

    height: 5px;

    background-color: #ccc;

}

.circle{

     width: 20px;

     height: 20px;

     text-align: center;

     color: #fff;

     font-size: 12px;

     line-height: 20px;

     border-radius: 50%;

     background-color: #ccc;

}

3、单选框样式的修改

<input type="radio" name="box" id="box1" checked>

<label for="box1">对口箱</label>

<.!--label表示单选框后的文字，for只想单选框的id，id唯一-->

input[type='radio'] {display: none;} /*隐藏原有单选框*/

input[type='radio'] + label::before{ /*修改的样式，加号表示兄弟元素*/

    display: inline-block;

    content: "";

    width: 15px;

    height: 15px;

    border-radius: 50%;

    border: 1px solid #e7e7e7;

    margin-right: 10px;

    vertical-align: bottom;

}

input[type="radio"]:checked + label::before{ /*单选框被选择的样式*/

    width: 5px;

    height: 5px;

    border: 6px solid #1d7ad9;

}

4、输入框前后有文字，可以把输入框置于label元素中

<label for="size2">长&nbsp;<input type="number" name="size" id="size2" min="0">&nbsp;mm</label><!--&nbsp;是一个空格-->

明天计划的事情：

1、学习JavaScript基础：理解变量，函数，对象，作用域，数组，IF ELSE，For 循环的含义

2、学习less和sass

遇到的问题：

没啥困难

收获：

熟悉了表单元素，学会了部分表单样式的修改