今天完成的事情,任务5已完成,更新wiki和深度思考。
把昨天存在的问题找出来更改一下就好了,师兄让我在页面的两个按钮上面加入超链接。让这个页面与
雇护工那张图连接在一起,点击跳转。
找了一下关于超链接的资料。

<a href="https://puam.github.io/QAQ/task5/task5.html">电话联系</a>
但是,文字上有下划线
text-decoration: none;(没有文本样式)消除掉下划线,
然后师兄让我在两个按钮周围做一个模拟光标。
cursor: pointer; (cursor光标)(pointer光标的样式)
文本的字变成了蓝色,
所以就在span设置为选择器,重新设置一下颜色。
任务5总结
任务5,真的浪费了太多的时间就一直没有做好,感觉没做任务之前自身对盒子模型,以及padding内边距的理解,有点过于肤浅了,导致在做内容部分得时候浪费了太多的时间,明明内容部分的布局是一致的,我却这个用margin,那个就心血来潮的使用了padding来布局,布局不一致非常浪费时间也不利于网页的维护与修改。做完任务5之后,自身对盒子模型的理解显然上了一个台阶。
也学到了不少新得知识,
background-image: ;
background-repeat: ;
background-size: ;
background-position:
关于背景图片的知识,以及背景图片大小的x轴与y轴,
flax的项目布局。
以及文本不换行啊,字体粗细。
超链接。
深度思考
深度思考
css可以绘制那些特殊的形状?
我们可以通过改变css的边框样式,圆角属性去得到特别多的特殊形状。
简简单单的html盒子
<div class="ellipse"></div>
就拿我做得这个圆形来说吧
css部分如下
.ellipse{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #5fc0cd;
margin-left: 20px;
}
长宽一致的正方形,我们把圆角属性设定为50%
我们就会得到一个圆形。设置高度与宽度不一样,我们也可以设置出来更多的形状。
请解释一下CSS3的Flexbox(弹性盒布局模型)以及适用场景?
首先什么是flex布局,传统的布局解决方案过于以来display属性和postion与浮动float属性,它对于那些特殊布局 非常不方便。
flex是弹性布局,用来为盒模型提供最大的灵活性。
采用flax布局的元素,称为flex容器,他所有子元素都自动成为容器成员,称为falx项目。 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。 项目默认沿主轴排列。
flex适用于那些场景呢?
比如有一个文本需要居中对齐,且垂直居中,,display: flex;
align-items: center;
justify-content: center;
就可以完成居中了。
又比如一个文本需要两端对齐,且中间内容要居中。
或者遇到了,容器内的项目空间不足。
flex-shrink: 1;flax,flax项目属性,
若项目空间不足,设定为1,便自动缩小。
给项目的值越大,被分配的空间也就越大。
flax大法好,基本上没有flax搞不定的布局。
title与h1、b与strong、i与em、img的alt与title、src与href有什么区别?
1,title与h1的区别在于,title是网站的标题,只能出现一次,而h1则是一篇文章的标题,此后还会有h2,h3之类的小标题。
2,b与strong之间没什么太大的区别,两者表现一致,b标签的意思是粗体,则strong表示的是强调,强调可以有不同的样式,设置下划线,粗体,上划线都是强调。
为了符合w3c标准,我们通常还是使用强调。
3,i与em的区别在于,em表示的是强调,表现方式是斜体加黑体,<i></i>表示的是斜体字,视觉上无法看出差距,但是浏览器会感受到语义,一些语音阅读器会根据阅读加强em的语气。i浏览器阅读的时候,则不会加重语气。
4,title与ait的区别在于,title标签是html标签页是html的属性,如把超链接添加了title属性之后,鼠标移过去就会看到显示的title内容。
而ait属性则是用来替代文字的,只能用在img,area,input元素中,给网页无法正常显示的图片提供文字说明。
5, href与link的区别在于, href是Hypertext Reference的缩写表示的是超文本的引用,建立当前元素与文档之间的链接,常用的如link,a。
则src是source的缩写,src的内容是页面必不可少的一部分,是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe。
怎么使用IconFont?
首先我们需要知道 IconFont是什么?
IconFont是阿里的矢量图标库,目前我任务中用到的ui图的图标应该就是矢量图标库里面的。
首先在 IconFont里面加入购物车,
点击购物车,出现下载代码,点击下载保存到本地。
把下载好的文件解压出来,放到项目的css文件夹里面 ,在html里面引用就行了。
HTML中dl、ul、ol用哪个比较好?
1,dl标签就是定义列表,dt与dd必须要在dl里面,dd的列表的列表项如果不需要他,可以不加dd。
definition list定义列表
definition term定义项
definition description定义描述
2,ui是无序列表, 全称unordered list,无序列表的每一项都是li标签。
有序列表ol 英文单词:Ordered List。
里面的每一项都是li标签。
3,di标签,定义列表达的语义有两层,
1.是一个列表,列出几个dd项目
2.每个词都有自己的描述项。
- ui标签指的是无序列表,下面只能放li,ui的作用也不只是给无序列表增加小圆点的,是为了增加无序列表的语义。
ol标签与无序列表一样,但是有序列表可以被嵌套,
ol标签与ui标签除了语义使用方法基本上都是一样的。ol标签里面只能用li,li必须被容器包裹。li是容器级。
我们在html中 首要选择标签是符合语义化,虽然div也能做、但是使用相对应的标签便于代码的理解和维护。 使用列表标签,大多数在需要显示一个系列的内容的时候采取选择。
评论