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介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。