H5+css从入门到精通

时间 2019-11-09

标签 h5+css css 入门精通栏目 CSS 繁體版

原文原文链接

固然css代码不少，不可能这么快就精通的，咱们只能慢慢来
css层叠样式表是嵌套在html代码内部的

通常格式都是<style> type="text/css"
                          #siderRight {
                             float:left;
                             width:200px;
                             height=300px;
                        }


                        </style>

这里有个老旧html css代码的对比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代码html

<!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里面定义的类的通常格式运维

  <!-- 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 里面的引用超连接有相对路径和绝对路径的区别ide

<a href="url" 
title="">连接</a> 
其中，url能够是一个绝对网址，好比：http://www.xuexuexi.com;也能够是一个相对的网页。如：123.html；还能够是其它
文件。好比pdf，doc等等。还有一种是根目录的方式，根目录其实跟绝对路径有些类似，就是去掉前面的域名便可，好比：<a 


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

1. Hbase从入门到精通
2. Linux从入门到精通
3. docker从入门到精通
4. CUDA从入门到精通
5. RBAC从入门到精通
6. SAP从入门到精通
7. Fiddler从入门到精通
8. GOOGLE从入门到精通
9. Python从入门到精通
10. SpringBoot从入门到精通
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用