发表于： 2019-09-09 11:46:30
1 869
今日完成的事
提交任务4，没通过，师兄指出了一些还不够完善的地方
遇到的问题
任务4，没有完成，需要改善的地方，
1.按键，鼠标悬浮的地方要修改样式，
解决方法,百度改变鼠标指针样式，在类标签中添加cursor:pointer样式，实现
改变鼠标箭头样式，使鼠标箭头在按钮处移动显示为手掌
(在f12开发者调试中不能显示，要关掉f12正常页面才能显示）
2.密码输入框，要把输入的密码显示不可见
解决方法，百度input密码可见与不可见，
<input type="password"></input>用password代替text完成
3.完善任务4，使显示与示例一致
任务5
1.学习使用flex来做任务5
2.首先开始学习.flex布局语法教程，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;}
基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器属性
* flex-flow
* flex-direction
* flex-wrap
* justify-content
* align-items
* align-content
元素属性
* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self
根据学到flex布局，首先body{display: flex;
flex-direction:column;
}
使主体变成flex容器，然后用flex-direction:column;容器属性，写4个div让他们由上至下排列
并命名top，header，main，footer
对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性
弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素
对于某个元素只要声明了display: flex，这个元素即是弹性容器，也是弹性元素，容器包含的元素也是弹性元素，但其包含的弹性元素本身却不能对它的子元素赋予弹性元素属性，需要从新声明display: flex。
inline-flex标签属性;
.box{
display: inline-flex;}
.box对于它的父级元素来说行内元素，对于它的子元素来说，它是弹性容器
3.设置一个盒子声明弹性布局，根据任务选择从上到下布局
.box{
.box{
display: flex;
flex-direction:column;
}
分四部分：top，header,main，footer
top，声明display: flex，使<div>成为弹性容器，赋予子元素<P>弹性元素属性，用margin：auto使“登录”居中
.top{
background-color:rgb(95,192,205);
height: 78px;
display: flex;}
<div class="top">
<p class="txt-1">登录</p>
</div>
header，由范例psd显示要在图片上插入图片和文字
百度html+css怎么在图片上添加文字和图片
给div设置宽度和高度，保证文字有一个范围
然后通过background给div添加一张图片作为它的背景。
通过url()来连接图片，url里面放置的就是背景图片的路径。
这样，保存之后文字就会覆盖在图片的上面了，而如果使用img标签，则没有这种效果
.header{
height: 330px;
background:url(4.png);
}
发现背景图片不够长，用background-size: 100%;填充
明天计划
继续任务5
收获同上
返回列表
评论