0

私はcssの初心者で、cssの効果的な使い方を学びたいのですが、いくつかの問題/質問があります。申し訳ありませんが、私のコードはあまりきれいではありません。また、コードを修正してより良い状態にするにはどうすればよいですか?

HTML

<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
    color:#d00000;
    text-decoration:underline;
}
#home{
    background-color:#0000CC;

}
span{
    font-style:italic;
}
</style>
</head>
<body>

<div id="wrapper">
<div id="header">

<ul>
    <li><a href="#Home" id="home"><span>Home</span></a></li>
    <li><a href="#link2">link2</a></li>
    <li><a href="#link3">link3</a>
        <ul>
        <li><a href="#sub">sub</a></li>
        <li><a href="#sub2">sub2</a></li>
        </ul>
    </li><!---End of DropDown Videos menu--->
    <li><a href="#link4">link4</a></li>
    <li><a href="#link5">link5</a></li>
</ul><!---End of nav elements--->
<br class="clearFloat">
</div><!---End of header--->
</div><!---End of wrapper--->
<div id="grey">
</body>
</html>

CSS

#wrapper{
    float:center;
}
#grey{
    border-bottom:250px solid #a0a0a0;
    padding:0px;
    margin-left:203px;
    margin-right:387px;

}

#header{
    margin:auto;
    padding:0px;
    clear:both;
}
#header ul{
    margin:0px;
    padding:0px;
    line-height:30px;

}
#header li{
    margin:0px;
    padding:0px;
    list-style: none;
    float:left;
    position:relative;
    background-color:#000099;
    border:1 solid #0000CC;
    top:px;
    right:-15%;
}

#header ul li a{
    text-align:center;
    font-family:fantasy;
    text-decoration:none;
    display:block;
    height:30px;
    width:150px;
    color:black;
}
#header ul ul li a{
    color:#0000cc;

}
#header ul ul li{
        right:0%;
}

#header ul ul{
    margin:0px;
    padding:0px;
    position:absolute;
        opacity: 0;
    visibility: hidden;
    transition: all .1s ease-in;
}
#header ul li:hover ul {
    visibility:visible;
    opacity:1 ;
}
#header ul li:hover {
    background-color:blue;
}
#header ul li:hover a {
color:black;
}
#header ul ul li:hover a {
color:#d00000;
}
.clearfloat{
    clear:both;
    margin:0px;
    padding:0px;

}
4

1 に答える 1