好,接着昨天的任务,现在我要把整个导航栏文字往下挪些,不要它顶到最上面,试下,做这个之前需要去查下div盒子模型内边距和外边距以及边框宽的表示方式,网上查了分别是:外:margin   内:padding  边:border

试下我们要的效果应该是内边距,而且是对上的内边距,代码写成(只需要改zai.css文件就ok):

结果是

文字已经往下走了,说明有效果,但是发现昨天忽略的一个问题图片与浏览器边框的左端和顶端都有缝隙,这个要怎么解决?我把外div的外边距margin设置成零试下:

效果没有发生任何变化。那只能再想办法,上百度查。弄了半天没找到原因,但是有印象就是说body也相当于一个盒子,那就是也可以通过css来设置它的外边距和内边距,试下:

写了一个*来设置body的内外边距。

OK,解决了!!!

现在想要做的效果是每个文字都是一个按钮,鼠标移上去就变色,点击的话还是跳转到本页面:

试了下这样写 完全不起作用。网上查了下,网上用到了

标签的组合,自己想了下,觉得这样做应该是为了居中排列方便,另外用到了 标签来做链接,这个应该是 html 固定的链接方式,记下就 ok 。那就按网上的来试下:

查了半天,写了这些在zai.css文件中,显示的效果如下:

有了按钮的效果,但是导航栏不居中了,这个是因为li这个地方用了float浮动,导致a里面的元素从左边往右边依次浮动。这个要查下看怎么解决:找了很长时间找到个解决办法,代码如下:

要特别注意的是这个:.div1 ul{}里面加了居中对齐,另外把.div1 li{}里面的改成了display:inline-block;有去掉点同时有成为块级元素的效果,同时把float:left去掉了,另外加了个每个li的宽度width,这个还是比较实用于网页设计导航条的这块。

效果如下:

今天就先分享到这,挺晚了,各位晚安!

爱分享,爱学习!找回本心,坚持自己,佐切一路每天为大家分享学习过程!

佐切的第三天学习分享相关推荐

  1. 佐切的第四天学习分享

    挺奇怪的昨天的页面没有问题,今天打开就变成了: 按钮全部跑到左边了,什么情况,调换了下li中几行代码先后顺序: 之前是这样: 调换下第二和第三行的位置,顺便把div1 a中display:block: ...

  2. 佐切的第二天学习分享

    找到一个自己想学习模仿的网站进行制作,好开始,我之前找了挺长时间,很多网站文字太多而且也不好看,没有模仿的冲动.终于找到一个还是比较好看些的网站,而且也算是目前比较流行的O2O类型的网站,名字我就不说 ...

  3. 佐切的第一天学习分享

    从哪学呢?这对于我来说也是个很大的问题. 由于之前有看过一点php的视频教程,就从基础的html开始对之前看点那点视频教程的回顾. ①首先自己的一个认识,网页通过www.^^^^^来访问,这个协议是美 ...

  4. 学习分享——基于深度学习的NILM负荷分解(三)深度学习处理,基础思路

    我来继续填坑了~~ 给大家两周时间自习深度学习(磨蹭了两周) 不知道同学们的基础打得如何了哈 QQ群1070535031 我分两篇写网络训练的相关,本文介绍整个思路流程,下一篇提供实操代码和相关注释讲 ...

  5. 二元学习法3.0:三把学习大剑,打通学习的底层密码_学习方法

    单纯靠机会赚钱的时代已经过去,未来是认知赚钱的时代. 前两天还跟朋友聊到这个话题,未来的机会将会不断涌现,人工智能.5G.万物互联.虚拟现实-- 而这些东西,都跟知识挂钩.以前那种胆大就能挣钱,站在风 ...

  6. 深度学习未来发展的三种学习范式:混合学习,成分学习和简化学习

    深度学习是一个很大的领域,其核心是一个神经网络的算法,神经网络的尺寸由数百万甚至数十亿个不断改变的参数决定.似乎每隔几天就有大量的新方法提出. 然而,一般来说,现在的深度学习算法可以分为三个基础的学习 ...

  7. 【杂谈】从学员到参与书籍写作,我在有三AI学习与成长的故事

    初识有三 认识言有三大人物,是在苏州的某分享会上,在深圳这头的我通过直播窗口第一次知道"言有三"及有三AI公众号,加了有三的微信,当时忙于写毕业论文,并没有主动接触这位大佬,但是在 ...

  8. python anylogic_分享 | IE工具与仿真软件学习分享会

    原标题:分享 | IE工具与仿真软件学习分享会 6月18日晚,IE工具与仿真软件学习分享会在经济与管理学院704教室顺利举行,此次分享会,有幸邀请到了欧阳林寒老师.大三学长张宇航和葛胜贤为大家讲解相关 ...

  9. datatable的数据进行组内排序_排序算法学习分享(四)希尔排序

    排序,也称为排序算法,可以说是我们学习算法的过程中遇到的第一个门槛,也是实际应用中使用得较为频繁的算法,我将自己对所学的排序算法进行一个归纳总结与分享,如有错误,欢迎指正! 排序算法学习分享(一)选择 ...

最新文章

  1. 当RxJava遇到AOP
  2. Unity Time的使用
  3. C语言指针(个人的认识)
  4. TypeScript Downleveling - 什么是 TypeScript 的降级行为
  5. 拥有属于你的“尬聊”机器人
  6. 依附B2B平台照样做搜索营销
  7. 史迪仔的原型_星际宝贝三个版本对比,莉罗抛弃史迪仔,童年真的回不去了
  8. Redis(十二):Redis事务的基本操作
  9. php正则匹配js中变量_Postgresql 中的 正则表达式 模式匹配
  10. 【南邮操作系统实验】银行家算法Java版
  11. CentOS下安装svn,添加新用户,重启svn服务
  12. python3.5------用户的三次验证
  13. 程序员须学计算机语言,IT程序员入门必须要学会的是什么?
  14. Rhino显示左边的工具栏
  15. VR全景:三维电商势不可挡
  16. k8s-liveness和readness详解
  17. python实现语音信号的分帧、加窗、预处理
  18. 一周热图|杨紫韩国艺匠婚纱大片出炉;易烊千玺代言麦当劳;洛天依音乐综艺节目首秀...
  19. Unity制作简单的精灵图动画(新手向)
  20. Delphi FastReport4.5安装说明

热门文章

  1. 单点登录SSO----JSON Web Token(JWT)机制
  2. springboot实现微信小程序二维码生成
  3. Vue - 前段框架
  4. 如何在Ubuntu系统下挂载新硬盘(win10+Ubuntu双系统单硬盘挂载新硬盘)
  5. 如何制作生成GIF?手把手教你生成GIF动态图
  6. 【计算机组成原理】冯诺伊曼结构和计算机性能指标
  7. [NOIP模拟16]题解
  8. 【Opencv小项目 1】Opencv实现简单颜色识别
  9. 全球芯片短缺可能很快变成供过于求的危机
  10. 彩色图片如何转为单色位图bmp :用window画板