HTML写尝试
小芳向前冲
向大佬学习 每天进步一点 加油
展开
-
小米主页编写
昨天把顶部导航栏和头部整体结构和样式写出来了。没有太大问题。今天写的是APP下拉层和购物车下拉层,二者结构是一样的。两个下拉框写出来后,写了transition语句,但是没有效果。百度这个属性的使用方法。他不能单独使长度或宽度进行过度(根据网上用JS写,不太对)然后折回看视频,发现要使高度有变化才能实现过度效果。把这两句改成而且在hover添加高度这样就OK了。两个都有过度效果还有就是APP下的小三角 添加hover时注意前面路径元素...原创 2021-11-19 13:31:00 · 68 阅读 · 0 评论 -
电影卡片的制作
首先还是确定框架。图片超过范围无法完全显示,可以设置图片的大小。中间没必要弄三个框,三个li里填写文字就OK。最后一栏评价时候,星星左浮,微博右浮,要是微博左浮就没法设定margine和padding去调整位置。效果如图...原创 2021-11-15 13:34:02 · 2565 阅读 · 0 评论 -
京东顶部导航栏(代码不规范,小芳泪两行)
第一遍写,结构有些错误,缺少一个层次,影响下拉框的样式设置,中间的小竖没有显现出来,检查环境也在,第二次写的时候,发现是颜色color->backgroundcolor。下拉框没有做出来第二遍跟着视频修改了框架,自己添加样式。在下拉框的样式设置时,移入范围时,范围比想象的要大,后来检查环境,现在城市宽度跟下拉框一样宽,反应过来是被撑开了,于是添加了绝对定位。(写文章时候试了下相对定位,移入框时,右边元素会被挤下去)【突然感觉看视频都看懂了,自己实践起来不会用,呜呜呜,还是要多练】还有就是下拉框原创 2021-11-14 20:12:30 · 271 阅读 · 0 评论 -
轮播图(定位的应用)
一开始大体写出来了,但是图片并没有全部显示这个要再设置下图片的大小关于红点,用三个a并设置大小形状颜色,移入的效果,还要设置他的层级,比图片高。一开始我是设了三个li,每个li包含一个a,后面显示就如上图,一个红点。也不要设置红点盒子的大小,不然在设置margin-right时候第三个点会被挤下去。这个实验本以为很简单。但是出现了不少问题,图片位置,被li往右或往下挤了,感觉还是布局的问题。。。还好最后算磨出来了,希望下次完成时间可以短些。效果图如下。...原创 2021-11-14 10:21:27 · 419 阅读 · 0 评论 -
W3C导航条
这次写就遇到一个问题,就是鼠标移入那个范围能点击超链接,(可能还有些模糊,后续有机会在体验下)原创 2021-11-14 08:51:44 · 358 阅读 · 0 评论 -
网易新闻一个小块
这次自己写没有成功,中间遇到好几个问题 也没法解决,最后还是看了视频,把网页写出来了。我是在li前面的圆点出现问题,查看原来代码发现层级少了,所以整体向左移,把下面单独写块,及能出现圆点还能调整位置。解决这个问题过程中,我想到了用before去添加符号,但是网上大家并不建议这样做,因为没法设置符号的样式,而且我也没有搜到符号的添加办法。视频里是通过before加的文字符号(输入法带的)可以调样式,之前没有想到,这也是解决方法之一。这次最大的收获就是一定要分好层次!多写几个块也没问题,以后好设置样式。原创 2021-11-13 19:43:33 · 39 阅读 · 0 评论 -
京东左侧导航条
首先确定框架,ul为大盒子,li里写分类,一行的超链接有多个。/就直接打设置box的宽度、背景颜色,高度由内容撑开。上下都有一块不可选中的区域,用padding设置,margin就会在box的上面有空隙。设置li之间的距离,要注意margin和padding对li的影响。然后设置a的字体。鼠标移入超链接字体时会变红。移入li时,一行的背景颜色会变灰,所以给li的hover设置背景颜色,达到一行变色的效果。...原创 2021-11-13 16:33:04 · 85 阅读 · 0 评论 -
三张图片垂直排列
首先确定框架,ul是最大的盒子,类名为box1,盒子里用li存放图片,并且图片带有超链接添加样式,设置盒子宽度,才能用margin的auto,之前在Li,a,img都尝试过margin,无法设置。居中效果是对于整个盒子来说的,所以设置box1。添加背景颜色有利于观察盒子的大小。由于图片不一定是我们需要的大小,对溢出的部分进行裁剪。然后观察页面结果发现图片中间有红色边框,检查环境,发现a的行高14这时候要删除a的行高这时候在看页面效果,符合要求。...原创 2021-11-13 14:58:16 · 490 阅读 · 0 评论