发表于: 2018-07-13 22:46:29
1 699
今天完成的事情:
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,带加号+)
评论