格式与布局
---恢复内容开始---
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#F00; position:absolute;"></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> </body>
代码表示:绝对定位position:absolute(浏览器动跟着动)
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#000;"></div> <div style="width:100px; height:100px; background-color:#F00; position:relative;top:20px"></div> </body>
代码表示:相对定位position:relative移动时相对自己的位置移动,而不是根据浏览器移动
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#F00; position:fixed;bottom:20px; right:20px"></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> </body>
上面代码:固定定位position:fixed 怎么拉动滚动条位置都不动。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px;"></div> <div style="width:100px; height:100px; background-color:#3FF; position:relative;"></div> </body>
上面代码:分层(z-index)显示:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px; z-index:2"></div> <div style="width:100px; height:100px; background-color:#3FF; position:relative;"></div> </body>
显示:。
流
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带着小图片</title> <style type="text/css"> *{ margin:0 auto; padding:0; } .w{ float:left; } </style> </head> <body> <div style="width:604px; height:41px; border:1px solid #e9e9e9;"> <div class="w">春节</div> <div class="w">元宵节</div> <div class="w">端午节</div> <div class="w">中秋节</div> <div class="w">国庆节</div> <div style=" width:104px; height:41px;"></div> </div> </body>
代码显示:float:left/right
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带着小图片</title> <link rel="shortcut icon" href="../图片/本子.jpg"/> </head> <body> </body>
代码显示:网页title带小图片<link rel="shortcut icon" href=""/>写在head里但不要写在style里,显示:。
<body> <div style="width:0px; height:0px; border-bottom:50px solid transparent; border-left:50px solid #00F; border-right:#FF0 solid 50px; border-top:50px solid #F00;"></div> </body>
显示:,边框透明 border:transparent
---恢复内容结束---
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#F00; position:absolute;"></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> </body>
代码表示:绝对定位position:absolute(浏览器动跟着动)
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#000;"></div> <div style="width:100px; height:100px; background-color:#F00; position:relative;top:20px"></div> </body>
代码表示:相对定位position:relative移动时相对自己的位置移动,而不是根据浏览器移动
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#F00; position:fixed;bottom:20px; right:20px"></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> <div><img src="../图片/本子.jpg"/></div> </body>
上面代码:固定定位position:fixed 怎么拉动滚动条位置都不动。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px;"></div> <div style="width:100px; height:100px; background-color:#3FF; position:relative;"></div> </body>
上面代码:分层(z-index)显示:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="width:100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px; z-index:2"></div> <div style="width:100px; height:100px; background-color:#3FF; position:relative;"></div> </body>
显示:。
流
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带着小图片</title> <style type="text/css"> *{ margin:0 auto; padding:0; } .w{ float:left; } </style> </head> <body> <div style="width:604px; height:41px; border:1px solid #e9e9e9;"> <div class="w">春节</div> <div class="w">元宵节</div> <div class="w">端午节</div> <div class="w">中秋节</div> <div class="w">国庆节</div> <div style=" width:104px; height:41px;"></div> </div> </body>
代码显示:float:l
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带着小图片</title> <link rel="shortcut icon" href="../图片/本子.jpg"/> </head> <body> </body>
代码显示:网页title带小图片<link rel="shortcut icon" href=""/>写在head里但不要写在style里,显示:。
<body> <div style="width:0px; height:0px; border-bottom:50px solid transparent; border-left:50px solid #00F; border-right:#FF0 solid 50px; border-top:50px solid #F00;"></div> </body>
显示:,边框透明 border:transparent。