静态网站搭建小练习(界面一)

HTML/CSS PROJECT 1

静态网站搭建小练习(界面一)

想做一个能放音乐显示歌词的网页试着玩。于是就弄了个Fripside的专题,因为个人还是很喜欢走音炮的。
最后做出来的效果

静态网站搭建小练习(界面一)_第1张图片
歌词还是静态的。。以后肯定要改

歌名和图片都是漂浮在左侧的,然后歌词是根据页面左上角来固定的(应该还有更好的办法吧)

下面是HTML代码


<html>
<head>
    <meta charset="UTF-8">
    <title>fripSidetitle>
    <link rel="stylesheet" type="text/css" href="frstyle.css">
head>
<body>
    <header class="banner">
        <p class="title"> fripSide p>
    header>
    <nav>
        <ui>
            <li><a href="FripSide.html">Homea>li>
            <li><a href="intro.html">Introa>li>
            <li><a href="music.html">Music Lista>li>
        ui>
    nav>
    <main>
        <div class="left">
            <div class="name">
                <p>Black Bullet - 黑色子弹p>
            div>
            <div id="icon">
                <img src="cover.jpg" alt="NICE BOAT" height="270" width="270">
            div>
            <div id="song player">
                <audio controls="controls">
                <source src="blackbullet.ogg" type="audio/ogg">
                <source src="blackbullet.mp3" type="audio/mpeg">
                Your browser does NOT support audio player.
                audio>
            div>
        div>
        <div class="right">
            <div id="lyrics">
                <header id="lyricsheader">
                    <p>歌词p>
                header>
            <article>
                    <p>This is the lyric.p>
                    <p class="real">ひび割れ壊れゆく 世界は果てしなくp>
                    <p class="real">未知なる创造が いま秩序を无くしてるp>
                    <p class="real">重ね合う痛みが 缲り返す现実p>
                    <p class="real">君との毎日が その闇に意味を投げたp>
            article>
        div>
    main>
    <footer>
        信不信老娘一个电磁炮崩死你
    footer>
body>
html>

接下来是CSS:

@charset "UTF-8";

article, footerheader, div, main, nav {
    display: block;
}

article, footer, header, div, main, h1, p, a, html, body, li, ul, audio {
    padding: 0px;
    margin: 0px;
}

.banner {
    background-image: url(sakura.png);
    background-size: 100% 100%;
    color: white;
    padding: 50px 50px;
}

p.title {
    font-size: 50px;
    font-weight: bolder;
}

nav {
    background-color: black;
    padding: 10px 20px;
    opacity: .9;
}

a {
    color: white;
}

li {
    display: inline;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 30px;
    font-variant: small-caps;
    font-weight: bold;

}

.left {
    float: left;
    padding: 30px 30px;
}

.right {
    position: absolute;
    left : 400px;
    top: 245px;
}


body {
    background-image: url(bullet.jpg);
    background-size: 100% 100%;
}

.name {
    background-color: black;
    color: white;
    text-align: center;
    font-size: 20px;
    font-family: STKaiti;
    padding: 10px 10px;
    opacity: .7
}

#icon {
    margin-top: 10px;
    background-color: black;
    padding: 14px;
    margin-bottom: 10px
}

#lyricsheader {
    background-color: black;
    color: white;
    width: 900px;
    font-size: 40px;
    text-align: right;
    padding: 10px;
}

article {
    background-color: black;
    font-size: 30px;
    margin-top: 20px;
    height: 300px; 
    width: 900px;
    padding: 10px;
    color: red;
    opacity: .7;
    text-align: center;
}

footer {
    clear: both;
    background-color: #20416c;
    color: white;
    padding: 5px 20px;
}

你可能感兴趣的:(web开发学习笔记,html,css)