[CSS] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
//a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
</style>
<style type="text/css">
body{
background:grey;
}
header{
background:pink;
}
header h1{
display:block;
margin-left:100px;
line-height: 100px;
}
nav{
background:#222;
}
ul{
width:1100px;
height:40px;
margin:0px auto;
}
li{
display:block;
float:left;
position:relative;
}
a{
color:white;
padding:25px;
line-height:40px;
}
li:hover{
background:#EFEFEF;
}
a:hover{
color:black;
}
img{
position:absolute;
top:0px;
right:10px;
}
</style>
</head>
<body>
<header>
<h1>my blog</h1>
</header>
<nav>
<ul>
<li><a href=''>标签1</a></li>
<li><a href=''>标签2</a></li>
<li><a href=''>标签3</a>
<img src='red.gif'>
</li>
<li><a href=''>标签4</a></li>
<li><a href=''>标签5</a></li>
</ul>
</nav>
<main></main>
<footer></footer>
</body>
</html>
发表于 2019-2-21 23:11
|
发表于 2019-2-25 01:07
