网页小练习
来源：互联网 发布：求生之路1怎么联机网络 编辑：程序博客网 时间：2024/04/27 15:59
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"/> <style rel="stylesheet"> html { font-size: 62.5%; } .logo { margin-top: 10rem; } .bor { border: 1px solid red; } ul li { list-style: none; } .nav-1 li { display: inline-block; width: 10rem; text-align: center; height: 3rem; padding-top: 1rem; font-size: 2.4rem; cursor: pointer; } .nav-1 li:hover { color: red; } .middle { width: 1364px; height: 499px; /*border: 1px solid red;*/ overflow: hidden; z-index: 200; margin-top: 10rem; } .middle li { position: relative; display: inline-block; } .banner { /*width: 30rem;*/ /*height: 15rem;*/ /*border: 1px solid red;*/ position: absolute; top: 210px; right: 20px; z-index: 100; } .banner strong { font-size: 4.3rem; } .banner em { font-size: 2.3rem; color: #444444; } .indent-bot { font-size: 3.3rem; } .foot-nav1 { display: inline-block; width: 4rem; height: 4rem; /*border: 1px solid red;*/ background: url('img/social-icons.png')0 0 no-repeat; } .foot-nav4 { display: inline-block; width: 4rem; height: 4rem; /*border: 1px solid red;*/ background: url('img/social-icons.png')-142px 0px no-repeat; } .foot-nav2 { display: inline-block; width: 4rem; height: 4rem; /*border: 1px solid red;*/ background: url('img/social-icons.png')-47px 0px no-repeat; } .foot-nav3 { display: inline-block; width: 4rem; height: 4rem; /*border: 1px solid red;*/ background: url('img/social-icons.png')-93px 0px no-repeat; } .ul-1 li { display: inline-block; margin-right: 1rem; margin-top: 5rem; } .ul-2 { margin-top: 5rem; } .ul-2 i { display: inline-block; width: 0; height: 0; margin-right: .5rem; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-right: 5px solid transparent; border-left: 5px solid red; } ul i:hover { transform: rotate(720deg); transform-origin: left center; transition-duration: 1s; } .ul-3 { margin-top: 5rem; } .ul-4 { margin-top: 5rem; } footer h5 { font-size: 2.3rem; } </style></head><body><div class="container"><div class="row"> <div class="col-md-4 col-sm-6 logo"> <img src="img/logo.png"/> </div> <div class="col-md-8 col-sm-6 logo nav-1"> <ul> <li>home</li> <li>comparly</li> <li>services</li> <li>clients</li> <li>contancts</li> </ul> </div></div><div class="row"><div class="middle col-md-12" id="middle"> <ul> <li id="lun-1"> <!--<img src="img/slider-img1.gif" alt=""/>--> <div class="banner"> <strong>need <strong><br/>fresh ideas?</strong><br/></strong> <em>Let’s create your company’s growth strategy together!</em><br/> <span class="button"> <a href="#"><strong>Read More</strong></a> </span> </div> </li> <li id="lun-2"> <!--<img src="img/slider-img2.jpg" alt="">--> <div class="banner"> <strong>need <strong><br/>fresh ideas?</strong><br/></strong> <em>Let’s create your company’s growth strategy together!</em><br/> <span class="button"> <a href="#"><strong>Read More</strong></a> </span> </div> </li> <li id="lun-3"> <!--<img src="img/slider-img3.jpg" alt="">--> <div class="banner"> <strong>need <strong><br/>fresh ideas?</strong><br/></strong> <em>Let’s create your company’s growth strategy together!</em><br/> <span class="button"> <a href="#"><strong>Read More</strong></a> </span> </div> </li> </ul></div></div> <div class="row"> <div class="col-md-4 col-md-offset-2"> <h1>NEWS</h1> <div class="indent-bot"> <time class="tdate-1" datetime="2015-12-24"><strong>24</strong>dec</time> <div class="extra-wrap"> <h6><a class="link" href="#">Ut enim ad minim veniam quis nostrud </a></h6> Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="clear"></div> </div> <div class="indent-bot"> <time class="tdate-1" datetime="2011-12-24"><strong>24</strong>dec</time> <div class="extra-wrap"> <h6><a class="link" href="#">Ut enim ad minim veniam quis nostrud </a></h6> Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="clear"></div> </div> <div class="indent-bot"> <time class="tdate-1" datetime="2011-12-24"><strong>24</strong>dec</time> <div class="extra-wrap"> <h6><a class="link" href="#">Ut enim ad minim veniam quis nostrud </a></h6> Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="clear"></div> </div> <button class="btn btn-danger btn-lg">click me</button> </div> <div class="col-md-6"> <div class="indent-top"> <div class="wrapper indent-bot2"> <figure class="img-indent"><img src="img/page1-img1.jpg" alt=""></figure> <div class="extra-wrap"> <h4>We Know <strong>What It Takes</strong><strong class="color-3">to be the <em>Leader!</em></strong></h4> </div> </div> <p class="p1">Wise Solutions is one of <a class="link" target="_blank" href="http://blog.templatemonster.com/free-website-templates/">free website templates</a> created by TemplateMonster.com team. This website template is optimized for 1280X1024 screen resolution. It is also XHTML & CSS valid.</p> <p class="img-indent-bot">This <a class="link" target="_blank" href="http://blog.templatemonster.com/2011/01/03/free-website-template-jquery-slider-business-website/">Wise Solutions Template</a> goes with two packages – with PSD source files and without them. PSD source files are available for free for the registered members of TemplatesMonster.com. The basic package is available for anyone without registration.</p> </div> <button class="btn btn-danger btn-lg">click me</button> </div> </div> <footer> <div class="row"> <ul class="ul-1 col-md-3"> <li><a href="javascript:void(0)" class="foot-nav1"></a></li> <li><a href="javascript:void(0)" class="foot-nav2"></a></li> <li><a href="javascript:void(0)" class="foot-nav3"></a></li> <li><a href="javascript:void(0)" class="foot-nav4"></a></li> </ul> <ul class="ul-2 col-md-2"> <h5>Navigation</h5> <li><i></i><a href="index.html">Home</a></li> <li><i></i><a href="company.html">Company</a></li> <li><i></i><a href="services.html">Services</a></li> <li><i></i><a href="clients.html">Clients</a></li> <li><i></i><a href="contacts.html">Contacts</a></li> </ul> <ul class="ul-3 col-md-3"> <h5>Contact</h5> <dl> <dt>2256 S Norfolk Street<br>Seattle, WA<br>98118-5648</dt> <dd><span>Phone:</span> 217-764-7449</dd> <dd><span>Fax:</span> 217-763-7912</dd> </dl> </ul> <ul class="ul-4 col-md-3"> <h5>Legal</h5> <p >Wise Solutions © 2011</p> <p ><a class="link" target="_blank" href="http://www.templatemonster.com/">Website Template</a></p> <p >by TemplateMonster.com</p> <p >Professional free web templates <a href="http://www.baidu.com" target="_blank">at www.websitetemplatesonline.com</a>. | <a href="http://www.flashtemplates.com/" title="Flash Templates">Flashtemplates.com</a>. Flash Design - the Smart Choice.</p> </ul> </div> </footer></div><script> var backgroundObj = document.getElementById('middle'); var i = 0; backgroundObj.style.background = "url('img/slider-img1.jpg') no-repeat"; var v = setInterval(show, 1000); var arrImgs = ['./img/slider-img3.jpg', './img/slider-img2.jpg', './img/slider-img1.jpg']; function show() { backgroundObj.style.background = 'url('+ arrImgs[i] +') no-repeat'; backgroundObj.style.zIndex= 1000; ++i; if(i == arrImgs.length) { i = 0; } }</script></body></html>
0 0
- 网页小练习
- js入门小练习:网页计算器
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 小练习
- 控制jsf生命周期
- iOS开发之同一个开发证书在多台电脑上使用
- Android之Glide加载图片
- JavaScript 绑定事件
- Hibernate中Criteria的完整用法
- 网页小练习
- [solr] - SolrJ增删查
- Handling Memory Segments(1)-Using Memory Segments to Describe the GPU Address Space
- 微信开发信息解密异常 java.security.InvalidKeyException:illegal Key Size
- IDEA显示不了maven
- Android 一个绚丽的loading动效分析与实现！
- spring源码分析之spring-web http详解（转）
- [solr] - Facet - autocomplete
- iOS开发中总结的小技巧(持续更新中)
