基于html+css响应式项目的媒体查询网页项目源码.zip资源-CSDN文库

共55个文件

png：37个

jpg：8个

css：7个

版权申诉

23 浏览量 2022-12-07 12:22:37 上传评论收藏 3.04MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html和css响应式项目媒体查询网页项目源码.zip （55个子文件）

htmlcss-master

炫酷人物

css

tabletpc.css 7KB

min.css 8KB

swiper.min.css 15KB

small.css 7KB

font-awesome.min.css 15KB

big.css 7KB

index.css 7KB

images

portfolio

a (2).jpg 201KB

a (3).jpg 229KB

a (4).jpg 213KB

a (1).jpg 279KB

favicon.png 3KB

banner (3).jpg 521KB

banner (2).jpg 399KB

youjian.png 4KB

restart_logo.png 15KB

2022-05-11_211907.png 4KB

git.png 6KB

icon-san.png 2KB

ui.totop.png 52KB

banner (1).jpg 481KB

responsive.png 1KB

services.jpg 509KB

2022-05-11_211836.png 4KB

cunchu.png 3KB

dianhua.png 4KB

icon_arrow_down.png 2KB

header-logo.png 3KB

star.png 2KB

user.png 6KB

dinwei.png 5KB

less.png 19KB

share.png 4KB

backgrounds

wild_oliva_dark.png 27KB

wild_oliva_light_head.png 30KB

wild_oliva_light.png 29KB

wild_oliva_blue_light.png 47KB

index.html 12KB

swiper.min.js 138KB

htmlcss

icon

Facebook.png 331B

envelope.png 568B

hover

Facebook.png 307B

twitter.png 632B

google-plus.png 845B

down.png 2KB

twitter-sign.png 4KB

twitter.png 744B

google-plus.png 1KB

user.png 611B

down.png 1KB

map-marker.png 620B

twitter-sign.png 4KB

phone.png 485B

print.png 403B

favicon.ico 9KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="shortcut icon" href="favicon.ico"/> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/font-awesome.min.css">  <script src="./js/swiper.min.js"></script> <link rel="stylesheet" href="./css/swiper.min.css">   <link rel="stylesheet" href="./css/index.css" media="(min-width:1200px)">  <link rel="stylesheet" href="./css/tabletpc.css" media="(min-width:980px) and (max-width:1199px)">  <link rel="stylesheet" href="./css/big.css" media="(min-width:768px) and (max-width:979px)">  <link rel="stylesheet" href="./css/small.css" media="(min-width:480px) and (max-width:767px)">  <link rel="stylesheet" href="./css/min.css" media="(max-width:479px)"> <title>炫酷人物</title> </head> <body>  <header> <div class="top-header w"> <div class="user"> <a href="javascript:;"> <img src="./icon/user.png" alt="">Register/Sign in</a> </div> <div class="header-logo"> <a href="javascript:;"> <img src="./images/header-logo.png" alt=""> </a> </div> </div>  <div class="logo-nav w"> <div class="logo"> <a href="javascript:;"> <img src="./images/restart_logo.png" alt=""> {re} <strong>start</strong></a> <p>a clean & multipurpose template</p> </div> <nav> <div class="nav"> <ul> <li><a href="javascript:;">HOME</a></li> <li><a href="javascript:;">ABOUTUS</a></li> <li><a href="javascript:;">SERVICES</a></li> <li><a href="javascript:;">PORTFOLIO</a></li> <li><a href="javascript:;">BLOG</a></li> <li><a href="javascript:;">CONTACT</a></li> <div id="flex_container"> <div id="flex_item">PAGES<img src="./images/icon_arrow_down.png" alt=""> <li><a href="javascript:;">HOME ALTERNATIVE</a></li> <li><a href="javascript:;">PAGE ALTERNATIVE</a></li> <li><a href="javascript:;">PORIFOLIO MASONRY</a></li> <li><a href="javascript:;">PORIFOLIO ITEM</a></li> <li><a href="javascript:;">PORIFOLIO ITEM II</a></li> <li><a href="javascript:;">SINGLE POST</a></li> <li><a href="javascript:;">ERROR 404</a></li> <li><a href="javascript:;">REGISTER OR SIGN IN</a> </li> </div> </div> </ul> </div> <div class="menu"> <img src="./images/icon-san.png" alt=""> menu </div> </div> </nav> </header>   <main>  <div class="luenbo">  <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="images/banner (1).jpg" alt="First slide"></div> <div class="swiper-slide"> <img src="images/banner (2).jpg" alt="First slide"></div> <div class="swiper-slide"> <img src="images/banner (3).jpg" alt="First slide"></div> </div>  <div class="swiper-pagination"></div>  <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <div class="ad w"> <div class="ad1"> <h3>a flexible theme <br> you can trust & build upon !</h3> <div class="new"> <h4>NEW</h4> <p>version <br> <strong>1.1</strong></p> </div> <p class="ad2">{re}start is based on good typography and large photography, serving as a foundation for your creative <br> projects. Feel free to brpwse its templates and discover its features. </p> </div> </div> </div> </main>   <div class="topic w"> <h1>focus on what’s importan</h1> <h2>and make the web a little bit prettier</h2> <a href="javascript:;">Buy this theme!</a> </div>   <div class="joinus w"> <div class="hot"> <li> <a href="javascript:;"> <img src="./images/responsive.png" alt=""> </a> <h4>Clean,Responsive Design</h4> <br> <p>A multipurpose but mainly <strong>business oriented</strong> design, built <br> to serve as a foundation for your web projects. <br> Suspendisse nec risus fermentum sapien congue <br> fermentum sed at lorem. </p> </li> <li> <a href="javascript:;"> <img src="./images/git.png" alt=""> </a> <h4>Based on Twitter Bootstrap</h4> <br> <p>The front-end development framework with a <strong>steep</strong> <br><strong>learning curce.</strong>lt changes the way you develop sites.<br> Suspendisse nec risus fermentum sapien congue <br> fermentum sed at Lorem </p> </li> <li> <a href="javascript:;"> <img src="./images/less.png" alt=""> </a> <h4>Makes real use of {LESS}</h4> <br> <p>{re}<strong>start</strong> comes with a style.less file that tries to use all the <br>power of <strong>{less} and bootstrap combined.</strong> Suspendisse <br> nec risus fermentum sapien congue fermentum sed at<br> lorem.</p> </li> </div> </div>   <div class="status w"> <h4>Recent Work or Projects form Portfollo</h4> <hr style='background-color:rgb(177, 177, 177); height:1px; border:none;''> </div> <div class="title w"> <div class="banner"> <li class="zezhao"> <a href="javscript:;"> <div class="mask"><img src="./images/share.png" alt="" class="share"></div> </a> <img src="./images/portfolio/a (1).jpg" alt=""> <h5><strong>Lorem lpsum</strong></h5> <p>artists</p> </li> <li class="zezhao"> <a href="javascript:;"> <div class="mask"><img src="./images/share.png" alt="" class="share"></div> </a> <img src="./images/portfolio/a (2).jpg" alt="">

评论收藏

内容反馈

版权申诉