<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*span 内的代码等价于 font: italic bold 36px "宋体"; */ span{ font-family: 仿宋; font-size: 12px;/*设置字体的大小*/ font-style: italic;/*斜体*/ font-weight: bold;/*加粗*/ background: #ff7956; } </style> </head> <body> <span class="alert">欢迎来到郝一凡的世界!</span> <span class="alert">欢迎来到郝一凡的世界!</span> <span class="alert">欢迎来到郝一凡的世界!</span> <p>欢迎来到郝一凡的世界!</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: blue; text-align: left;/*文字靠左居中*/ text-indent: 20px;/*缩进*/ line-height: 25px;/*行高*/ text-decoration: underline;/*加下划线*/ vertical-align: middle; text-shadow: aqua 1px 1px 2px;/*参数依次是 颜色 x轴位移 y轴位移 阴影模糊的半径*/ } </style> </head> <body> <span class="alert">欢迎来到郝一凡的世界!</span> <span class="alert">欢迎来到郝一凡的世界!</span> <span class="alert">欢迎来到郝一凡的世界!</span> <p>欢迎来到郝一凡的世界!</p> <p>css2</p> <p>css2</p> <div>欢迎来到郝一凡的世界!</div> <div>欢迎来到郝一凡的世界!</div> <div>欢迎来到郝一凡的世界!</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*a:hover 鼠标悬停样式 鼠标放上去的颜色是绿色*/ a:hover{ color: chartreuse; } </style> </head> <body> <a href="https:\\www.baidu.com" target="_blank">百度一下1</a> <a href="https:\\www.baidu.com" target="_blank">百度一下2</a> <a href="https:\\www.baidu.com" target="_blank">百度一下3</a> <a href="https:\\www.baidu.com" target="_blank">百度一下4</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*鼠标一直点击 不松开鼠标左键*/ a:active{ color: blueviolet; } </style> </head> <body> <a href="https:\\www.baidu.com" target="_blank">百度一下1</a> <a href="https:\\www.baidu.com" target="_blank">百度一下2</a> <a href="https:\\www.baidu.com" target="_blank">百度一下3</a> <a href="https:\\www.baidu.com" target="_blank">百度一下4</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>java</li> <li>pathon</li> <li>big data</li> <li>linux</li> <li>c++</li> <li>php</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li{ list-style: none; } </style> </head> <body> <ul> <li>java</li> <li>pathon</li> <li>big data</li> <li>linux</li> <li>c++</li> <li>php</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li{ list-style-type: circle; } </style> </head> <body> <ul> <li>java</li> <li>pathon</li> <li>big data</li> <li>linux</li> <li>c++</li> <li>php</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: #ff7956; } </style> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-image: url("../Image/QQ背景.gif"); } </style> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-image: url("../Image/QQ背景.jpg"); background-position: top; } </style> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-image: url("../Image/QQ背景.jpg"); background-position: top; background-repeat: no-repeat; } </style> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #grad{ height: 200px; /*谷歌浏览器 需要加前缀 -webkit- */ background: -webkit-linear-gradient(red,blue); } </style> </head> <body> <p id="grad"> </p> </body> </html>
7.2 从左向右
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #grad{ height: 200px; /*谷歌浏览器 需要加前缀 -webkit- */ background: -webkit-linear-gradient(left,red,blue); } </style> </head> <body> <p id="grad"> </p> </body> </html>
7.3 从右向左
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #grad{ height: 200px; /*谷歌浏览器 需要加前缀 -webkit- */ background: -webkit-linear-gradient(right,red,blue);/*这里可以写好多种颜色 不止两种*/ } </style> </head> <body> <p id="grad"> </p> </body> </html>