H5+css从入门到精通

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

#siderRight {

float:left;

width:200px;

height=300px;

}

style>

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

<html>

<head>

<meta charset="UTF-8">

<title>Insert title heretitle>

 <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>

<head>

<meta charset="UTF-8">

<title>Insert title heretitle>

 <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里面定义的类的一般格式

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

<a href="url"

title="">链接a>

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

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

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

H5+css从入门到精通

你可能感兴趣的:(H5+css从入门到精通)