发表于: 2018-07-13 22:46:29

1 694


    今天完成的事情:

1.写任务8,9;

2.学习了booststrap导航栏;

3.运用媒体查询;



    明天计划:

1.继续完成任务8,9

2.巩固前面的知识;



    遇到的问题:

写任务8,9的时候响应式媒体查询和主页面在一起写的,

导致调整了很久消耗了很多时间。


    收获总结:

1.bootstrap响应式的导航栏:


为了给导航栏添加响应式特性,要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。

折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。

第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。

三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。

引用bootstrap,再稍微改下样式

<nav class="navbar navbar-default" role="navigation">
   <div class="container-fluid">
       <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse"
                   data-target="#example-navbar-collapse">
               <span class="sr-only">切换导航</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>
           <div class="log " ></div>
       </div>
       <div class="collapse navbar-collapse" id="example-navbar-collapse">
           <ul class="nav navbar-nav">
               <li class="active"><a href="#">首页</a></li>
               <li class="active"><a href="#">职业</a></li>
               <li class="active"><a href="#">推荐</a></li>
               <li class="active"><a href="#">关于</a></li>
           </ul>

       </div>
   </div>

</nav>


         


 

2. 了解HTML相关编码规范:

语法

  • 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。
  • 嵌套元素应当缩进一次(即两个空格)。
  • 对于属性的定义,确保全部使用双引号,绝不要使用单引号。
  • 不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
  • 不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>)。

语言属性

根据 HTML5 规范:

强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。

这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。


属性顺序

HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,

应当谨慎使用(例如,页面内的书签),因此排在第二位


3.css选择符分类  


  1.标签选择器(如:body,div,p,ul,li)

  2.类选择器(如:class="head",class="head_logo")

  3.ID选择器(如:id="name",id="name_txt")

  4.全局选择器(如:*号)

  5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

  6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

  7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

  8.继承选择器(如:div p,注意两选择器用空格键分开)

  9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

  10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

  11.子选择器 (如:div>p ,带大于号>)

  12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)













返回列表 返回列表
评论

    分享到