发表于： 2019-09-10 19:17:35
1 882
今日完成的事
继续昨天的任务5
.header用图片作为背景色然后插入需要的图片和文字
background:url(4.png);
遇到问题
图片尺寸问题导致不能填满布局
解决
background-size: 100%;
代码
.header{
display: flex;
align-items:center;
height: 240px;
background:url(4.png);
background-size: 100%;
}
运用学到的flex知识，
为.header声明flex，把.header作为弹性容器
示例项目由左到右
与默认一致
align-items属性定义项目在交叉轴上如何对齐
align-items:center实现居中效果
.header{
display: flex;
align-items:center;
height: 300px;
background:url(4.png);
background-size: 100%;
}
遇到问题
然后发现<br />标签不能使文本换行
解决
在文本外设置一个块级元素包裹，取消文本弹性元素属性
<div class="header_txt">
<P>徐士林 55岁</P><br />
<P>京城*四方*报纸林</P>
</div>
遇到问题
小图标和文本会自动换行
解决
在小图标和文本之外加上一个块级元素，display：flex，使之成为弹性容器
利用flex容器的基本属性，使其子元素在同一列
接下来是main主体部分，需要用到css边框
CSS 边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度、样式，以及颜色。
边框与背景
CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
边框的样式
样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。
定义多种样式
可以为一个边框定义多个样式，例如：
p.aside {border-style: solid dotted dashed double;}
上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
这里的值采用了 top-right-bottom-left 的顺序，讨论用多个值设置不同内边距时也见过这个顺序。
定义单边样式
如果希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
* border-top-style
* border-right-style
* border-bottom-style
* border-left-style
因此这两种方法是等价的：
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。
边框的宽度
可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
注释：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。
所以，我们可以这样设置边框的宽度：
p {border-style: solid; border-width: 5px;}
或者：
p {border-style: solid; border-width: thick;}
定义单边宽度
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以简写为（这样写法称为值复制）：
p {border-style: solid; border-width: 15px 5px;}
您也可以通过下列属性分别设置边框各边的宽度：
* border-top-width
* border-right-width
* border-bottom-width
* border-left-width
因此，下面的规则与上面的例子是等价的：
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
没有边框
在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。
那么如果把 border-style 设置为 none 会出现什么情况：
p {border-style: none; border-width: 50px;}
尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？
这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。
记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。根据以下规则，所有 h1 元素都不会有任何边框，更不用说 20 像素宽了：
h1 {border-width: 20px;}
由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。
边框的颜色
设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。
可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：
p {
border-style: solid;
border-color: blue red;
}
注释：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
* border-top-color
* border-right-color
* border-bottom-color
* border-left-color
要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：
h1 {
border-style: solid;
border-color: black;
border-right-color: red;
}
根据范例每行设置一个块级元素，用flex布局，使每个块级元素内的文本沿主轴
由左向右（默认）居中显示
代码
display:flex;
height: 50px;
align-items:center;
运用刚学到的知识给每个块级元素设置边框，并且上左右无边框，并且设置颜色
代码
border-style: none none solid none;
border-width: 1px;
border-color:rgb(239,240,244);
然后根据范例为文本设置不同的样式
字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
实例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小
font-size 属性设置文本的大小。
有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值：
* 将文本设置为指定的大小
* 不允许用户在所有浏览器中改变文本大小（不利于可用性）
* 绝对大小在确定了输出的物理尺寸时很有用
相对大小：
* 相对于周围的元素来设置大小
* 允许用户在浏览器改变文本大小
注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
通过像素设置文本大小，可以对文本大小进行完全控制：
实例
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。
虽然可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。
使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。
W3C 推荐使用 em 尺寸单位。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em：pixels/16=em
以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
font-weight
字体粗细
实例
设置三个段落的字体的粗细：
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
定义和用法
font-weight 属性设置文本的粗细。
说明
该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。
可能的值
值 | 描述 |
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
| 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
代码如下
.m_txt1{
font-weight: bold;
margin-left:20px;
font-size: 20px;
}
.ioc_3{
width:15px;
height: 15px;
margin-left: 20px;
}
.m_txt2{
font-weight: bolder;
font-size: 20px;
margin-left:10px;
}
.m_txt3{
font-weight:bold;
font-size: 20px;
margin-left:20px;
color:rgb(153,153,153);
}
.m_txt4{
font-weight:bold;
font-size: 30px;
margin-left:20px;
color:rgb(153,153,153);
}
.m_txt5{
font-weight: bold;
margin-left:20px;
font-size: 20px;
color:rgb(226,97,99);
}
.m_txt6{
font-weight: 500;
margin-left:20px;
font-size: 15px;
}
footer部分，跟住之前学到的知识没什么难点
然后开始微调，使代码与psd显示一致
遇到问题
1.foot部分怎么保持，两个块级元素之间的距离与两侧外边距的距离都相等，并且距离固定，块级元素自适应
方法1，为两个块级元素的父级元素设置flex属性，
.footer{
display:flex;
justify-content: center;}
两个子元素居中，但没有拉开
设置并设置width：100%，无效
方法2
设置外边距为10px，让元素自动撑开margin-right显示效果，margin-left无效
设置内边距，无效
方法3
运用 <button> 标签，来写footer，精简代码
标签定义及使用说明
<button> 标签定义一个按钮。
在 <button> 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
例如
<button type="button" onclick="alert('你好，世界!')">点我!</button>
给DIV元素添加圆角的边框：
div { border：2 px solid ; border-radius：25 px; }
25px圆角半径
.圆 border-radius:50%;
属性定义及使用说明
border-radius属性是一个最多可指定四个border - * - radius属性的复合属性
提示：这个属性允许你为元素添加圆角边框！
给DIV元素添加圆角的边框：
div { border：2 px solid ; border-radius：25 px; }
语法
border-radius：1-4长度 | ％ / 1-4长度 | ％ ;
注意：每个半径的四个值的顺序是：。左上角，右上角，右下角，左下角如果省略左下角，右上角是相同的如果省略右下角，左上角是相同的如果省略右上角，左上角是相同的。
未解决
最后决定先用ustify-content: space-around;凑合用
遇到问题
顶部和底部独立与文档流之外
方法1，绝对定位position: absolute;失败，并使flex属性失效
方法2，固定定位position:fixed;失败，并使flex失效
询问师兄，知道错误的地方，
在设置了position:fixed之后，我是用margin-bottom设置下方外边距
正确的为bottom
之后，footer脱离文档流之后，就没有默认宽度，要设置width：100%
需要思考的地方：为什么用bottom而不是margin-bottom
更加深刻的理解了margin-bottom属性
bottom是在position:fixed生效后，脱离文档流，以整个页面为基准
所以也要加上width:100%
bottom:10px;从下往上增加10px
方法3，固定定位position:fixed，
.footer{
display:flex;
justify-content: space-around;
position:fixed;
bottom: 10px;
width:100%;
}
.top{
background-color:rgb(95,192,205);
height: 78px;
display: flex;
position:fixed;
width:100%;
top:0;
}
解决
遇到问题
固定定位之后，块级元素相互重叠，
解决
重叠是因为设置position:fixed之后，块级元素脱离文档流，
使用一个块级元素包裹main，用margin-top脱离
无法滚动是因为main整体长度不够，为包裹它的块级元素赋予足够的长度
解决设一个足够的长度，没有解决
收获同上
明天的计划
找个切图软件，更好的记录任务
继续完善任务5，如果有时间尝试任务6
返回列表
评论