html5页头代码，页头部分的代码《HTML5与Bootstrap应⽤实
例》
下⾯我们可以编辑⽹页的内容的代码 ... 在⽹页代码模式后⾯是这个⽹页的视图模式，它可以实时预览⽹页的变化 ... 相当于我们⽤浏览器打开了这张⽹页 。
在⽹页的主体部分，先输⼊⼀组
标签 ...
在这组标签⾥，我们再去实施页头部分和其它部分的设计。在前⾯我们看到了，页头这排内容分成两块，左边是标志，右边是搜索栏 ...
对于⼀个区域的头部内容，我们可以使⽤ 标签来标记。先输⼊⼀组 标签 ...
然后我们可以设计这部分内容的布局，这⾥我们可以使⽤ Bootstrap 架构设计好的布局形式 ...
先输⼊⼀组
标签 ... 然后在这组标签上添加⼀个 .container 类 ... bootstrap 定义了这个类的样式 ...
在它的⾥⾯再输⼊⼀组
标签 ... 在这组标签上，添加⼀个 .row 类。然后在这组标签⾥我们可以再添加两组
标签 ...
如何查看html代码
在第⼀组
标签⾥添加 标志 内容，第⼆组
标签⾥添加搜索框 ...
Bootstrap 把⼀排内容的宽度分成了12份，这⾥我们让这两组
标签各占⼀半的宽度。
12 除以 2 等于 6，在第⼀组
标签⾥，添加⼀个 span6 的类 ... 这样这组
标签会占⽤12份宽度的6份，也就是占⽤⼀半的宽度。
同样在第⼆组
标签⾥，也添加⼀个 span6 类 ...
在第⼀组
标签⾥，我们添加标志的图像 ...
在⽹页中插⼊图像，可以使⽤ 标签，输⼊
src 属性的值就是l图像的位置 ... 我们的l标志图像相对于这个⽹页来说是在 images ⽬录下⾯ ...
后⾯ alt 属性是图像的替代⽂字，为 标签添加⼀个 alt 属性，简单的描述⼀个图像的内容 ...
如果你想让⽤户点击这个图像链接到某个位置，可以在它的周围添加⼀组 标签 ...
标签的 href 属性可以定义链接到的位置，这⾥我们先⽤⼀个 # 号代替，你可以把 # 号替换成任何位置 ... 在 标签⾥，我们还可以添加⼀个title 属性，描述⼀下这个链接会把⽤户带到哪⾥去 ...
输⼊ title="回到⾸页" ...
搜索框
下⾯我们来设计⼀下搜索框，Bootstrap 框架设计了⼀些很漂亮的表单元素， 我们可以先去看⼀下 ....
打开 twitter.github/bootstrap ... 打开 Base CSS ... 然后点击 Forms ... 在这⾥你可以查看 Bootstrap 为表单相关的设计 ...
开⼀个合适的设计 ...
⽐如这个 ... ⼀个简单的⽂本框，加上⼀个漂亮的按钮 ... 想要同样的效果，我们可以复制⼀下这个设计的代码结构 ...
回到我们的⽹页 ...
到 部分⾥⾯的第⼆组
标签 ... 把刚才复制的代码粘贴过来 ...
修改⼀下按钮⽂字 ... 输⼊ 搜索 ，在这个 元素上使⽤了⼀个 span2 的类，这个类决定了⽂本框的长度，这⾥我们改成 span3 ...现在，页⾯中会显⽰⼀个标志，还有⼀个搜索框 ... 下⾯视频我们修改下这页头部分的样式 ...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。