网站头部 html

news/2024/5/10 5:59:55/文章来源:https://blog.csdn.net/belove_lucy/article/details/52949106

网站头部* *处女作

第一次自己制作，略简单，略朴素

这里写图片描述
页面大概就这样了。。。正在学CSS，就按新学的试了一下

当鼠标放在这个[English]or[Chinese]时，字体透明度级度增加，效果如图：
这里写图片描述

一样的样式，这个是字体变大
这里写图片描述

代码如下：

<!doctype html>
<html lang="en">
<head><meta charset="GB2312"><link rel="stylesheet" type="text/css" href="SStyle.css">
</head>
<body><header><hgroup id="title"><h1>Lovely Day</h1><a href="/">[English]</a><a href="/">[Chinese]</a></hgroup><br><nav><ul id="hh1"><li><a href="/">home</li><li><a href="/">catalog</li><li><a href="/">picture</li><li><a href="/">about me</li></ul></nav><hr style="height:5px;border:none;border-top:5px ridge pink;" /></header>
</body>

CSS：

body {width: 1000px;height: 1000px;margin: 50px auto;border: 5px groove #F23B97;border-radius: 30px;background: #F7DEDE;background-image: url(ai.png); 
}#title {margin-top: 25px;
}#title h1 {margin-left: 60px;font-family: SimHei;font-size: 3em;display: inline;}#title a:link {display:inline;position: relative;margin-top: -10px;text-decoration: none;color: #F18629;opacity: 0.3;transition: opacity 1s;
}#title a:hover {opacity: 0.9;transition: opacity 1s;
}#hh1 {float: right;margin-right: 100px;
}#hh1 li {float: left;margin-left: 2cm;color: #936767;
}#hh1 li a {text-decoration: none;
}#hh1 li a:link {font-size: 1em;color: #936767;transition: font-size 0.5s;
}#hh1 li a:hover {font-size: 1.5em;color: #F61092;transition: font-size 0.5s;
}