H5+css從入門到精通

發(fā)布時(shí)間：2020-06-21 10:58:25 來源：網(wǎng)絡(luò) 閱讀：1420 作者：sjfbjs 欄目：開發(fā)技術(shù)

當(dāng)然css代碼很多，不可能這么快就精通的，我們只能慢慢來
css層疊樣式表是嵌套在html代碼內(nèi)部的

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


                        </style>

這里有個(gè)老舊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">導(dǎo)航</div>
<div id="siderLeft">菜單</div>
<div id="siderRight">內(nèi)容</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>導(dǎo)航</header>
<nav>菜單</nav>
<article>內(nèi)容</article>
<footer>底部說明</footer>
</body>
</html>

這里我們來發(fā)現(xiàn)一個(gè)超鏈接引用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="#">運(yùn)維工具</a>

這里注意了h6 里面的引用超鏈接有相對路徑和絕對路徑的區(qū)別

<a href="url" 
title="">鏈接</a> 
其中，url可以是一個(gè)絕對網(wǎng)址，比如：http://www.xuexuexi.com;也可以是一個(gè)相對的網(wǎng)頁。如：123.html；還可以是其它
文件。比如pdf，doc等等。還有一種是根目錄的方式，根目錄其實(shí)跟絕對路徑有些相似，就是去掉前面的域名即可，比如：<a 


這個(gè)是相對路徑href="/html/h2.html">鏈接</a>，

向AI問一下細(xì)節(jié)

H5+css從入門到精通

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽