初学者的网站头部设计-优快云博客

本文链接：https://blog.youkuaiyun.com/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;
}