2016 - 1- 22 Build a Nav bar (intro to HTML&CSS)

一:Learn how to build a NavBar --- allow user navigate ur site

1. The hypetext refrence link

This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute.

2. Whitespace is empty space in the HTML.Since the browser ignores whitespace in an HTML document, you can clearly lay out the code without affecting how the web page will look.

The browers will ignore the space between tag, just like:

<a href = "aboutme.html"> <!--The ‘href‘ means hypertext refrence attribute-->
    Go to the about me page
</a>

<a href = "contact.html">
    Contact me
</a>

<a href = "untitled.html">
    Home
</a>

So the page will display like that : .

And when want have the gap bettwen the links , we can use the html feature called entity.

Like that :

<a href = "aboutme.html"> <!--The ‘href‘ means hypertext refrence attribute-->
    Go to the about me page
</a>
&nbsp
<a href = "contact.html">
    Contact me
</a>
&nbsp
<a href = "untitled.html">
    Home
</a>

Pay attention to the "&nbsp", it means no-breaking space! So the page would like that :

.

Does it  looks better?

3.And now we could make a relly "navbar" to allow user jump into other page ,and we just need to copy code in other document.And the page will looks like :

时间: 2024-11-08 18:20:23

2016 - 1- 22 Build a Nav bar (intro to HTML&CSS)的相关文章

2016 - 1- 22 img tag and the lists (intro to HMTL&amp;CSS)

1 :The img tag img tag allows put some img file into page. just like : <a href = "me.png"> <img src = "me.png" width = "50%" /> </a> And the  " src = "me.png" " lets brows knows where the

[官方软件] Easy Sysprep v4.3.29.602 【系统封装部署利器】(2016.01.22)--skyfree大神

[官方软件] Easy Sysprep v4.3.29.602 [系统封装部署利器](2016.01.22) Skyfree 发表于 2016-1-22 13:55:55 https://www.itsk.com/forum.php?mod=viewthread&tid=362766&highlight=Easy%2BSysprep [官方软件] Easy Sysprep v4.3.29.602 [系统封装部署利器](2016.01.22) [Easy Sysprep]概述:Easy Sy

“耐撕”团队 2016.3.22 站立会议

时间:2016.03.22 ① :18:00--18:25   ②18:40--19:00   总计45分钟. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:http://www.cnblogs.com/charliePU/), Q 齐嘉亮(博客:http://www.cnblogs.com/dendroaspis-polylepis/), L  刘伟硕(博客:http://www.cnblogs.com/We

2016.7.22.noip2012D2

mod: 扩展欧几里德算法,而我没有复习,暴力的60 事后后悔死 classroom: 线段树得90,T两个点.代码与问题如下: 1 #include<iostream> 2 #include<cstdio> 3 #include<cmath> 4 using namespace std; 5 int n,m,s,t; 6 long long r[1000005],d; 7 struct stu 8 { 9 int l,r; 10 long long mi,val; 1

2016/2/22 三级导航

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

2016.10.19 小米前端面试 vs 2016.10.22 华为web面试

这次面试还是很值得记录一下的~长了很多姿势. 一共三面,面试官都是MIUI的浏览器部门,感觉面试官都很厉害,知识点问的很细很深入. 一面面试官是个可爱的小姑娘,主要考察的就是常见的前端面试题,很基础,但是会在其上进行拓展和深入.就我记得的一些题做个总结: 1. 说一下CSS的盒模型?(这简直是我参加过的几乎所有前端面试岗必问的一道题目--不管是比较水的国企还是问基础的互联网... 想一想似乎只有只问项目不谈基础的京东没有问吧) 这里是答案 2. 常用的跨域方法:(之前小米一个面试官电话面试时候也

一个运维小白的成长日记(M20-1 2016.7.22)

screen命令: 打开新的screen:         screen -S [SESSION] 加入会话:                screen -x [SESSION] 退出并关闭screen:          exit 剥离当前screen:            Ctrl+a,d 显示所有已经打开的screen:       screen ls 恢复某screen:             screen -r [SESSION] 重点: (1)当使用系统时只有一个screen请

2016/1/22 codes

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="v

2016 - 1 - 22 HTTP(一)

一:通过URL找到服务器   1. URL的概念: 1.1 URL全称Uniform Resource Locatior 统一资源定位符 1.2 通过一个URL就可以找到互联网上的唯一的资源. 1.3 一个URL对应唯一的互联网资源. 2. URL的基本格式:   协议:// 主机地址/ 路径 如 :http://www.baidu.com/img/logo.png          http://202.108.22.5/img/logo.png 2.1 协议: 不同的协议,代表着不同的资源查