今天在学习How2j上的项目仿写天猫前端时,遇到的一些问题特此记录下来。
今天主要学习了如何写上图的置顶栏,用css和html写的。天猫首页和购物车前面图标用的是以及最右边 的用的是BootStrap框架。因为用这个框架图标丰富,不用自己去找。
开始没看答案时,把购物车移到最右边,我想的是用css的 text-align:rigth; .但不成功,想了很久都 不知道错在哪。后来用了浮动样式
float: right !impotyant
移动弄成功,但去掉!import就失败,这句代码的意思是优先级最高。
后来我想,都是移动的代码。为什么上面不行,下面就行呢。 text-align:right; 只对块级元素起作用,对内联元素不支持。
这是实验出来的,不太严谨。
还可以用BootStrap框架,用class = "pull-rigth" 达到一样的效果。
用一个nav列表包裹这些链接.我还不知道nav标签。百度后,就是链接总标签。单链接很多时,就可以用这个标签,告诉浏览器这个标签的具体意义。
5 27日更新
做一个简单的搜索框,如下图
这个搜索栏实现思路如下:
天猫图片设置为绝对定位,放到最左边。输入搜索栏和下面的文字用div包裹,下面的文字又用一小div包裹。
首先把一个大div背景色填充为天猫红,颜色十六进制为#40000。
再分别设置输入框和按钮框样式。首先把他们边框设置为透明,再用
outline:none; 设置边框轮廓为隐藏,不用这句代码,当鼠标点击输入框时会有别的颜色和红色重合。
再把按钮背景色改为天猫红,颜色改为白色。字体加粗,增大为20px.
在设置下面小div上面外边距为5px,左边外边距为-20px。设左外边距是等会下面的文字设外边距时能让
首文字链接和输入框左边框对其。在设置每个链接左右外边距为20px.
然后把整个div使用 margin: 50px auto 居中,并且上外边距为50px, auto数据中的意思.只有图片设置了绝对定位,才会生效。
23:20更新 页脚上半部
思路还是上面图片套div,下面每个购物指南,天猫保障等分别套div。再用div把这两个套进去。
主要对购物指南,天猫保障平衡排列以及和他们下面文字排列卡着了。
把他们每个都用浮动 float: left 就能实现平衡排列了,因为使用浮动会先把他们转换为
display: inline-block 内联元素,内联元素是不换行的,在之后使 line boxes高度坍塌,也就是没有高度,就实现水平排列了。
下面的文字链接使用的是<a>标签,是内联元素,不换行。就需要用 display: block 转换为块级元素可。
5.28 11:38更新
页脚下半部
这个制作没什么难度,但还是被我大意单词写错一些小毛病。找了半天才找出来,以后要注意了!
不过还是对margin 和padding 内边距和外边距理解加深乐意一些。外边距下面是对他底下的元素而言,而内边距下面是对自己而言