当然css代码很多，不可能这么快就精通的，我们只能慢慢来
css层叠样式表是嵌套在html代码内部的
一般格式都是<style> type="text/css"
#siderRight {
float:left;
width:200px;
height=300px;
}
</style>这里有个老旧html css代码的对比
<!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代码
<!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文件的方式和h6里面引用css里面定义的类的一般格式
<!-- 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>
这里注意了h6 里面的引用超链接有相对路径和绝对路径的区别
<a href="url" title="">链接</a> 其中，url可以是一个绝对网址，比如：http://www.xuexuexi.com;也可以是一个相对的网页。如：123.html；还可以是其它 文件。比如pdf，doc等等。还有一种是根目录的方式，根目录其实跟绝对路径有些相似，就是去掉前面的域名即可，比如：<a 这个是相对路径href="/html/h2.html">链接</a>，
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
