1 2 3 4 5 6 7 8 9 10 11 12 | 当然css代码很多,不可能这么快就精通的,我们只能慢慢来 css层叠样式表是嵌套在html代码内部的 一般格式都是< style > type="text/css" #siderRight { float:left; width:200px; height=300px; } </ style > |
这里有个老旧html css代码的对比
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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里面定义的类的一般格式
1 2 3 4 5 6 7 8 9 | <!-- 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 里面的引用超链接有相对路径和绝对路径的区别
1 2 3 4 5 6 7 | < a href = "url" title = "" >链接</ a > 其中,url可以是一个绝对网址,比如:http://www.xuexuexi.com;也可以是一个相对的网页。如:123.html;还可以是其它 文件。比如pdf,doc等等。还有一种是根目录的方式,根目录其实跟绝对路径有些相似,就是去掉前面的域名即可,比如:< a 这个是相对路径 href = "/html/h1.html" >链接</ a >, |
登录乐搏学院官网http://www.learnbo.com/
或关注我们的官方微博微信,还有更多惊喜哦~
