[散修弟子]CSS-7147|2018年10月18日的日报-技能树.IT修真院

发表于： 2018-10-18 23:57:34

2 836

任务步骤：

[] 1（环境搭建）下载任务资源——登录页.psd（0.5小时）

[] 2（知识学习）查看学习资料——《绝对——relative, absolute, fixed 的区别是什么》（1小时）

relative：相对定位，position的值。

参照物：相对定位，则有参照物来定位，其参照物即为在没有使用定位之前自身的初始位置。因此要使位置发生变化需要有偏移量。如果没有定位偏移量，对元素本身没有任何影响。

偏移量：位置通过left、right、top、buttom这四个属性来进行规定，比如：left:-20px;对于其自身初始位置向左移动

<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>这是位于自身初始位置的标题</h2>
<h2 class="pos_left">这个标题相对于其自身初始位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其自身初始位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>

absolute：绝对定位，生成绝对定位元素，使元素脱离文档流。

参照物：其有定位属性（position属性）的父级元素，并且是最近的那个有定位属性的父级元素。

查找参照物的顺序：先找父级元素，如果有定位属性（position）就以这个父级元素作为参照物发生偏移，如果没有找到就向外逐层查找，直到找到有position属性的元素，如果一直都没有，那么就以最外层的HTML元素作为参照物发生偏移。

元素原先在正常文档流中所占的空间会被后面元素占据。

元素定位后生成一个块级框，而不论它在正常流中生成何种类型的框。

绝对定位通常与相对定位配合使用

fixed：生成绝对定位元素，相对于浏览器窗口的定位。元素的位置相对于浏览器可视窗口是固定位置。

通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed。

参照物：浏览器可视区

注意要写偏移量属性：left、right、top、buttom

p.pos_fixed
{
position:fixed;
top:30px;
right:50px;
}

[] 3（编码实战）首先布局header，让header紧贴顶部（1小时）

<body>
    <div class="register_item">
        <div class="header">
        </div>
    </div>
</body>

CSS去除浏览器默认样式margin与pading：

*{
      margin: 0;
      padding: 0;
}

[] 4（编码实战）为header内部布局，保证3块文字分别居于header的左中右，并垂直居中（1小时）

需求：盒子内的三个块居中，并上下左右有边距

注意部分：

使用flex布局
使用justify-content:space-between;声明，作用是水平两端对齐
使用align-items:center;声明，作用是该块的子元素都垂直居中

html结构代码：

<div class="header">
    <div class="register">注册</div>
    <div class="login">登录</div>
    <div class="close">关闭</div>
</div>

css样式代码：

.header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #5fc0cd;
}
.header div{
      margin: .5rem .5rem;
}
.login{
      font-size: 1.5rem;
}

[] 5（知识学习）查看学习资料——《input——创造最新式表单》（1小时）

表单：

form：即HTML表单用于收集不同类型的用户输入（数据）。
form元素只是一个数据获取元素的容器，而容器内的数据获取元素称为表单控件。最常用的表单控件是input元素

input标签的属性：

input传统元素属性11个： accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性

input在HTML5新增的元素属性19个： autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性

传统属性：

name

name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过JavaScript引用表单数据。

【注意】只有设置了name属性的表单元素才能在提交表单时传递它们的值，通过action属性来指定传递的目标链接。

type

type属性用来规定input元素的类型

【注意】如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type="text"

文本字段text：<input type="text">，用户可以在文本域中写入文本

密码字段password：<input type="password">，在表单输入内容时不可见，密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮radio：<input type="radio" value="xx">，定义了表单单选框选项。即该表单下，所提供的input选项只能选择一个。

<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

复选框checkboxes：<input type="checkbox" value="xx">，定义了复选框，用户需要从若干的选择中选取一个或者若干个选项。

<form>
    <input type="checkbox" name="i_have" value="bike">I have a bike<br>
    <input type="checkbox" name="i_have" value="car">I have a car
</form>

提交按钮submi：<input type="submit" value="Submit">，定义了提交按钮，当用户单击确认时，表单的数据内容会被传送到form标签action属性定义的链接值。表单的动作属性（form标签的action属性的值）定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的数据进行相关的处理。

<body>
    <form name="input" action="/statics/demosource/html_form_action.php" method="get">
        Username: <input type="text" name="user"><br/>
        <input type="submit" value="Submit">
    </form>
</body>

假如你在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到form标签的action属性的值所指定的地址。该页面将处理输入的结果

[] 6（编码实战）布局表单内容，至少包含input和button（0.5小时）

html结构代码：

<div class="tel">
      <img src="task4/tel_log.png" alt="请输入手机号" />
      <input type="text" name="username" placeholder="请输入手机号"/>
</div>
<div class="pwd">
      <img src="task4/pwd_log.png" alt="请输入密码" />
      <input type="password" name="password" id="" placeholder="请输入密码" />
</div>
<button class="landed"><a href="#">登陆</a></button>
<div class="fogetpwd"><a href="#">忘记密码？</a></div>

[] 7（编码实战）为input旁边的小图标切图（1小时）

ps切图：

img标签引入：

<img src="task4/tel_log.png" alt="请输入手机号" />
<img src="task4/pwd_log.png" alt="请输入密码" />

[] 8（编码实战）为表单内容添加样式（1小时）

css样式代码：

.tel,
.pwd {
      /*border: 1px solid black;*/
      margin-top: .5rem;
      display: flex;
      align-items: center;
      background: #ffffff;
}
.tel img,
.pwd img {
      margin: 1rem;
      height: 2rem;
}
.tel input,
.pwd input {
      width: 100vw;
      font-size: 1rem;
      padding: .5rem 1rem;
      border: none;
      border-left: 0.3rem solid #eaedee;
}
.landed {
      width: 100vw;
      border: none;
      text-align: center;
      margin-top: .5rem;
      background-color: #5FC0CD;
      padding: 1rem 0;
      font-size: 1.5rem;
}
.landed a {
      text-decoration: none;
      color: white;
}
.fogetpwd {
      text-align: right;
      padding: .5rem .5rem 0 0;
}
.fogetpwd a {
      text-decoration: none;
      color: #5fc0cd;
      font-size: 1.1rem;
}