网站头部 html

来源：互联网发布：mac开机启动迅雷编辑：程序博客网时间：2024/05/21 07:05

网站头部* *处女作

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

这里写图片描述
页面大概就这样了。。。正在学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;}

供和我一样的初学者和我一起学习，加油，努力，
奔向跟高端^^

若有错，请指教

0 0