HTML的响应式和多媒体技术

来源：互联网发布：数控铣削平面编程实例编辑：程序博客网时间：2024/06/05 23:00

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>    <title>Title</title>    <link rel="stylesheet" href="../css/style.css"></head><body><div class="logo">    <header>        <img src="../../Rikao0928/images/logo.png" height="45" width="276"/>    </header>     <nav class="clear">        <ul>            <li><a href="#">home</a></li>            <li><a href="#">Themity</a></li>            <li><a href="#">koncDok</a></li>            <li><a href="#">N.Design</a></li>        </ul>         <input type="text" placeholder="Seach" class="in">    </nav>    <section>        <article>            <div class="left">                <h2>Just a Post Title</h2>                <time>May 8, 2014 in Categor</time>                <img src="../../day05css的特性/img/sample-image.jpg" height="220" width="600" class="ig"/>                <p>Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem                    mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere                    cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac. Vestibulum congue nisl magna. Ut vulputate                    odio id dui convallis in adipiscing libero condimentum. Nunc et pharetra enim. Praesent pharetra, neque et luctus tempor,                    leo sapien faucibus leo, a dignissim turpis ipsum sed libero. Sed sed luctus purus. Aliquam faucibus turpis at libero                    consectetur euismod. Nam nunc lectus, congue non egestas quis, condimentum ut arcu. Nulla placerat, tortor non egestas rutrum,                    mi turpis adipiscing dui, et mollis turpis tortor vel orci. Cras a fringilla nunc. Suspendisse volutpat, eros congue scelerisque                    iaculis, magna odio sodales dui, vitae vulputate elit metus ac arcu. Mauris consequat rhoncus dolor id sagittis. Cras tortor elit,                    aliquet quis tincidunt eget, dignissim non tortor.                </p>              <video src="../../Rikao0928/media/Compress.MP4" controls width="100%"></video>            </div>        </article>        <aside>            <dl>                <dt>sidebar</dt>                <dd><a href="#">WordPress (3)</a></dd>                <dd><a href="#">WordPress (3)</a></dd>                <dd><a href="#">WordPress (3)</a></dd>                <dd><a href="#">WordPress (3)</a></dd>            </dl>            <dl class="sec">                <dt>sidebar</dt>            </dl>        </aside>    </section></div></body></html>

CSS的样式

*{    margin: 0px;    padding: 0px;}body{    background: url("../../Rikao0928/images/body-bg.jpg") #171A40  no-repeat top center;}.logo{    width: 980px;    margin: 0 auto;}header img{    margin: 6px;}nav{    width: 100%;    height: 40px;    background: #666;    line-height: 40px;    border-radius: 5px;    color: #fff;}nav ul li{    float: left;    padding: 0 14px;    list-style: none;}nav  ul li a {    text-decoration: none;    color: #fff;}a:hover{    color: yellow;}a:active{    color:green;}nav ul{    float: left;}.in{    width: 137px;    height: 26px;    float: right;    margin: 7px;    border-radius: 5px;}clear:after{    content: "\200B";    width: 0;    height: 0;    display: block;    clear: both;}section{    margin-top: 30px;}article{    width: 674px;    background: #fff;    border-radius: 5px;    float: left;}.left{    padding: 36px;}time{    display: block;    font-size: 12px;    margin-top: 15px;    margin-bottom: 15px;}.left p{    line-height: 20px;    color: #666;    margin: 15px 0;}aside{    float: right;    width: 240px;}aside dl{    background: #fff;    border-radius: 5px;}aside dl a{    color: #000;    text-decoration: none;}.sec{    margin-top: 30px;}hr{    width: 100%;    border: 1px;}.ig{    width: 100%;}@media screen and (max-width: 980px){    .logo{        width: 95%;    }    article{        width: 60%;    }    aside{        width: 35%;    }}@media screen and (max-width: 450px){    article{        width: 100%;        float: none;    }    aside{        float: none;    }    nav ul{        display: none;    }    header img{        display: none;    }}

阅读全文

0 0