<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> @font-face{ font-family:myFont; src:url("本墨悠圆.ttf"); } p{ font-family: "myFont"; font-size: 20px; font-style: italic; font-weight: bolder; color: #ff6e49; line-height: 100px; letter-spacing: 10px; text-decoration: none; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } div{ 300px; height: 200px; } </style> </head> <body> <div> <p>字体相关属性-本墨悠圆-字体很多行-字体很多行-字体很多行-字体很多行-字体很多行</p> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #myDiv{ 600px; height: 400px; /*background-color: lightblue;*/ background-image: url("baidu_jgylogo3.gif"); background-repeat: no-repeat; background-attachment: scroll; border: 1px solid red; } .div2{ 600px; height: 400px; border: 2px dashed blue; } </style> </head> <body> <div id="myDiv"></div> <div class="div2"></div> <div class="div2"></div> <div class="div2"></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container{ border: 2px dashed darkorange; 500px; position: absolute; } .demo{ border: 2px solid blue; 300px; position: relative; left: 50px; top: 50px; } </style> </head> <body> <div class="container"> <div>aaaaaa</div> <div class="demo">bbbbbb</div> <div>cccccc</div> </div> <!-- 1.子元素有relative定位时，不脱离文档流 2.子元素有absolute定位时，脱离文档流 3.子元素有absolute定位时，参考1.父级元素定位 2.body原点定位 4.子元素有relative定位时，参考1.自身原点定位 --> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ 300px; height: 200px; border: 1px solid red; } #div2{ 400px; height: 200px; border: 2px dashed greenyellow; position: fixed; right: 100px; } .div3{ 500px; height: 200px; border: 3px double burlywood; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div class="div3"></div> <div class="div3"></div> <div class="div3"></div> <div class="div3"></div> <div class="div3"></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ position: fixed; } #myDiv1{ z-index: 999; } </style> </head> <body> <div id="myDiv1"><img src="jgz.jpg"/></div> <div id="myDiv2"><img src="bkb.jpg"/></div> <div id="myDiv3"><img src="ym.jpg"/></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ 200px; height: 100px; border: 1px solid #0000FF; float: left; } #div2{ 210px; height: 110px; border: 2px dashed #ff6e49; float: left; clear: both; } #div3{ 220px; height: 120px; border: 3px double blueviolet; float: left; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #myDiv1{ 300px; height: 200px; border: 3px dashed red; /*display: none; /!*消失*!/*/ visibility: hidden; /*隐藏*/ } #myDiv2{ 300px; height: 200px; border: 3px dashed blue; } </style> </head> <body> <div id="myDiv1"></div> <div id="myDiv2"></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #fruits{ list-style-type: upper-roman; list-style-position: inside; list-style-image: url("icon.jpg"); } </style> </head> <body> <ul id="fruits"> <li>香蕉</li> <li>哈密瓜</li> <li>无籽西瓜</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #myDiv{ border: 2px #ff6e49 dashed; 400px; height: 300px; margin-bottom: 100px; padding: 50px; background-color: blueviolet; /*border-top: ; border-left: ; */ /*border-style: solid dashed dotted groove;*/ /*border-color: #626fff #ff3b2d;*/ /*border- 10px 20px 30px 40px;*/ } #div2{ 400px; height: 300px; border: 2px red solid; } </style> </head> <body> <!-- 盒子模型将html中每一个元素看作为一个盒子，用几个属性描述这个盒子 border 边框 border类型：实线、虚线、双实线等 border的粗细：通过px来描述 border的颜色：通过color表示颜色 margin 外边距 width属性 外边距长：距离其他元素的距离，两个外边距是可以重叠的 padding 内补丁 width属性 内补丁长：边距距离内容的距离 --> <div id="myDiv">aaa</div> <div id="div2"></div> </body>