H5+css从入门到精通

本文对比了使用ID选择器和元素标签进行网页布局的方法,并介绍了如何在HTML中引入外部CSS文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1

2

3

4

5

6

7

8

9

10

11

12

当然css代码很多,不可能这么快就精通的,我们只能慢慢来

css层叠样式表是嵌套在html代码内部的

 

一般格式都是<style> type="text/css"

                          #siderRight {

                             float:left;

                             width:200px;

                             height=300px;

                        }

 

 

                        </style>

 

这里有个老旧html  css代码的对比

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

#header,#siderLeft,#siderRight,#footer{

    border:solid 1px #666;

    padding:10px;

    margin:6px;

}

#header {width:500px}

#siderLeft{

    float:left;

    width:60px;

    height:100px;

}

#siderRight{

    float:left;

    width:406px;

    height:100px

}

#footer{

    clear:both;

    width:500px;

}

</style>

</head>

<body>

<div id="header">导航</div>

<div id="siderLeft">菜单</div>

<div id="siderRight">内容</div>

<div id="footer">底部说明</div>

</body>

</html>

这里是新的html  css代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

header,nav,article,footer{

    border:solid 1px #666;

    padding:10px;

    margin:6px;

}

header {width:500px}

nav{

    float:left;

    width:60px;

    height:100px;

}

article{

    float:left;

    width:406px;

    height:100px

}

footer{

    clear:both;

    width:500px;

}

</style>

</head>

<body>

<header>导航</header>

<nav>菜单</nav>

<article>内容</article>

<footer>底部说明</footer>

</body>

</html>

这里我们来发现一个超链接引用css文件的方式和h5里面引用css里面定义的类的一般格式

1

2

3

4

5

6

7

8

9

  <!-- Custom styles for this template -->

    <link href="/css/dashboard.css" rel="stylesheet">

  </head>

 

  <body>

    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">

      <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"></button>

      <div class="collapse navbar-toggleable-sm" id="navbar">

        <a class="navbar-brand" href="#">运维工具</a>

这里注意了h5 里面的引用超链接有相对路径和绝对路径的区别

1

2

3

4

5

6

7

<a href="url" 

title="">链接</a

其中,url可以是一个绝对网址,比如:http://www.xuexuexi.com;也可以是一个相对的网页。如:123.html;还可以是其它

文件。比如pdf,doc等等。还有一种是根目录的方式,根目录其实跟绝对路径有些相似,就是去掉前面的域名即可,比如:<a 

 

 

这个是相对路径href="/html/h1.html">链接</a>,

 

 

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信,还有更多惊喜哦~

转载于:https://my.oschina.net/learnbo/blog/866240

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值