h5float+动画+音乐播放器

最新推荐文章于 2022-01-12 16:09:03 发布

C--罗纳尔多

最新推荐文章于 2022-01-12 16:09:03 发布

阅读量477

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/dangai0201/article/details/77793302

版权

html5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

css样式：media.css

@charset "utf-8";
/* CSS Document */
@media screen and (max-width:980px){#wrap{width:96%;} section article{width:61%;} section aside{width:24%;} header{width:100%;}
    nav{width:100%;} section img{width:100%;} section{width:96%;}section aside .sidebar{width:auto;}}
@media screen and (max-width:640px){nav .pc{display:none;} nav .phone{display:block;} section article{width:auto;float:none;}
    section aside{width:auto;float:none;margin-top:29px;} nav form{position:absolute;top:-43px;right:0;}
    nav form input{width:60px;} nav form input:focus{width:130px;}}

style.css

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
img{border:none;}
.clear{clear:both;}
body{background:#0d1424 url(../tech/images/body-bg.jpg) no-repeat center top;font-family:arial;}
#wrap{height:1258px;margin:0 auto;}
header{width:980px;height:84px;margin:0 auto;padding-top:36px;}
nav{width:980px;height:42px;margin:0 auto;background:#888888;border-radius:6px;box-shadow:0 7px 7px rgba(0,0,0,0.5);position:relative;}
nav .pc{float:left;padding-left:27px;}
nav ul li{float:left;padding-right:32px;}
nav ul li a{font-size:14px;line-height:42px;color:#fff;text-shadow:0 7px 7px rgba(0,0,0,0.5);}
nav .phone{float:left;padding-left:10px;padding-top:10px;display:none;}
nav form{float:right;padding-top:6px;padding-right:12px;border:none;}
nav form input{width:140px;height:27px;border-radius:5px;color:#888888;padding-left:10px;font-size:12px;transition:all 1s ease;}
html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>index</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
   <header>
       <img src="tech/images/logo.png">
   </header>
    <nav>
       <ul class="pc">
           <li><a href="#">home</a></li>
            <li><a href="#">Themify</a></li>
            <li><a href="#">IconDock</a></li>
            <li><a href="#">N.Design</a></li>
        </ul>
        <ul class="phone"><img src="tech/images/menu.png"/></ul>
        <form>
           <input type="text" placeholder="Search">
        </form>
    </nav>
    <section>
       <article>
           <h2>Just a Post Title</h2>
            <time>May 8, 2014 in Category</time>
            <div class="pic"><img src="tech/images/sample-image.jpg"></div>
            <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="tech/media/Compress.MP4" controls autoplay></video>
       <audio src="tech/media/music.mp3" controls autoplay></audio>
        </article>
       <aside>
           <div class="sidebar">
               <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>
                </dl>
            </div>
            <div class="sidebar fli">
               <dl>
                   <dt>Flickr</dt>
                </dl>
            </div>
        </aside>
       <div class="clear"></div>
    </section>
    <footer>©XX科技有限公司<br>XXXX地址</footer>
</div>
</body>
</html>

teach包创建images/media放图片

C--罗纳尔多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5float+动画+音乐播放器

css样式：media.css@charset "utf-8";/* CSS Document */@media screen and (max-width:980px){#wrap{width:96%;} section article{width:61%;} section aside{width:24%;} header{width:100%;} nav{width:1
复制链接

扫一扫

专栏目录