发表于: 2020-04-18 21:52:52

1 1314


今天完成的事情:

了解了语义化组成的大概,完成任务4的布局,

<header> 是页面头部,通常介绍页面用的,可以多个定义header

<nav> 是超链接部分,一个文档可以定义多个nav

<main>是文档中独一无二的,不能多个定义,但是不影响其中内容的多个定义

<article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

<aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。


<footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

<section>表示文档中的一个区域(或节),比如,内容中的一个专题组  如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。

不要把 <section> 元素作为一个普通的容器来使用,特别是当<section>仅仅是为了美化样式或方便脚本使用的时候,应使用<div>。

position定义和用法

 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。




明天计划的事情:任务5前进

遇到的问题:

因设定了font-size=625%,导致行高过高脱离了应在的盒子模型。在需要处理的盒子模型css加上字体大小,不知道如何外联css样式到input上,还是像以前套用父级div class=,导致生成一个新盒子,后面知道直接把class加进input就好了,在布局的时候,输入框搞完了图片背景。发现没有那个竖杠,以及输入框中设置了背景图片后字体与图片重叠,需要其他办法加入或者切图,后续改用div装图片,然后把div转换成行内块元素,但是产生了基线对不齐的问题,学会一个新的属性vertical-align,可以对齐基线。遇到输入框边框想去除的时候,学到新的属性outline:mediu,以及文字下划线属性text-decoration:underline

在查看深度思考的时候,去掉头部三个词的一两个的时候,除了中间的登录会产生变动,其他的没有变动。因为中间的登录属性使用的是父级盒子textaline-centen来居中,因为两边设置的模型是一样大的,所以在左右边文字删除的时候,使中间的字变成了剩余空间居中,偏离了绝对居中,后面改用position:absolute相对于父级宽高定位,设定了left 50%和right 50%,但是因为是两个字,居中的点是这个文字的左边,尝试在这个文字的CSS加入textaline-centen,但是无效,后面查到了这个left50%是根据模型的左上角原点计算的,所以需要插入负的margin-left一半的宽度值,就能使文字居中了。输入框的竖杠颜色问题,调了多次没什么改变,后面才知道需要赋予border-left-color属性才生效。


收获:写border之类的可以直接类似border-left:5px solid black  这样设定,其他收获基本写在遇见问题的时候了,磕磕绊绊写完了任务4,也熟悉了多一些熟悉。


返回列表 返回列表
评论

    分享到