伪类
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????a:link{ ???????????color: deeppink; ???????} ???????a:hover{ ???????????color: yellow; ???????} ???????a:active{ ???????????color: blue; ???????} ???????a:visited{ ???????????color: red; ???????} ???????/*在标签p的文本后加上pp*/ ???????p:after{ ???????????content:"pp"; ???????} ???????/*在标签p的文本前加上hhh*/ ???????p:before{ ???????????content:"hhh"; ???????} ???</style></head><body><a href="https://www.baidu.com">百度</a><p>hello p</p></body></html>
设置字体上下居中
<style> ???#p{ ???display: table-cell; ???vertical-align: middle; ???????}</style> ???<body> ???<div id="p">你好</div></body>
块级和内联标签的相互转换(内联标签不能设置height,width等属性,要转化为块级标签)
块级-->内联 display:inner内联-->块级 display:block
a标签
a标签有两个功能:超链接、锚1.超链接(target="_blank"会出现空界面)<a href="http://www.baidu.com" target="_blank">百度</a>2.锚<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#div1{ ???????height:300px; ???????background:red; ???????} ???????#div2{ ???????height:300px; ???????background: yellow; ???????} ???????#div3{ ???????height:300px; ???????background:green; ???????} ???</style></head><body><div id="begin">开始</div><a href="#div1">第一章</a><a href="#div2">第二章</a><a href="#div3">第三章</a><div id="div1">第一章</div><a href="#begin">begin</a><div id="div2">第二章</div><a href="#begin">begin</a><div id="div3">第三章</div><a href="#begin">begin</a></body></html>
去除a标签的下划线
text-decoration: none;
html2
原文地址:https://www.cnblogs.com/gaoyukun/p/8137740.html