第一个h5页面
不廢話，先爆照，不好勿噴
我用的軟件是WebStorm開發，然后也知道了h5我們可以用谷歌瀏覽器點擊右鍵，然后點擊審查，就可以按照手機屏幕來看到頁面
下面是項目的圖片
?
這個是我的index.html文件
?
<!doctype html> <html class="no-js" lang=""><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="apple-touch-icon" href="apple-touch-icon.png"><!-- Place favicon.ico in the root directory --><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/main.css"><script src="js/vendor/modernizr-2.8.3.min.js"></script></head><body><!--[if lt IE 8]><p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]--><!-- Add your site or application content here --><div class="main"><div class="head"><span class="head_content" >welcome</span></div><div class="center"><div class="one"><div class="in"><img src="../src/img/santa2.png" class="image"></div><div class="value">圣誕老人</div></div><div class="one"><div class="in"><img src="../src/img/snowflake.png" class="image"></div><div class="value">雪花</div></div><div class="one"><div class="in"><img src="../src/img/snowman.png" class="image"></div><div class="value">雪人</div></div><div class="one"><div class="in"><img src="../src/img/stocking.png" class="image"></div><div class="value">襪子</div></div></div><div class="relax"></div><div class="item"><div ><img src="../src/img/horn2.png" class="image1"><span class="val">活動公告:</span><span class="val1">寶馬520li現在只需要50萬了</span></div></div><div class="relax"></div><div class="item"><div class="tuijian">精品推薦</div><div class="rightimg"><img src="../src/img/right65.png" class="image1" class="image1"></div><div class="gengduo">更多</div></div><div class="relax"></div><div class="item"><div class="tuijian">新品熱賣</div><div class="rightimg"><img src="../src/img/right65.png" class="image1" class="image1"></div><div class="gengduo">更多</div></div></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/{{JQUERY_VERSION}}/jquery.min.js"></script><script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script><script src="js/plugins.js"></script><script src="js/main.js"></script><!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='https://www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create','UA-XXXXX-X','auto');ga('send','pageview');</script></body> </html>
然后再就是樣式了
?
?
/** What follows is the result of much research on cross-browser styling.* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,* Kroc Camen, and the H5BP dev community and team.*//* ==========================================================================Base styles: opinionated defaults========================================================================== */html {color: #222;font-size: 1em;line-height: 1.4; }/** Remove text-shadow in selection highlight:* https://twitter.com/miketaylr/status/12228805301** These selection rule sets have to be separate.* Customize the background color to match your design.*/::selection {background: #b3d4fc;text-shadow: none; }/** A better looking default horizontal rule*/hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0; }/** Remove the gap between audio, canvas, iframes,* images, videos and the bottom of their containers:* https://github.com/h5bp/html5-boilerplate/issues/440*/audio, canvas, iframe, img, svg, video {vertical-align: middle; }/** Remove default fieldset styles.*/fieldset {border: 0;margin: 0;padding: 0; }/** Allow only vertical resizing of textareas.*/textarea {resize: vertical; }/* ==========================================================================Browser Upgrade Prompt========================================================================== */.browserupgrade {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0; } /* ==========================================================================Author's custom styles========================================================================== *//* ==========================================================================Helper classes========================================================================== *//** Hide visually and from screen readers:*/.hidden {display: none !important; }/** Hide only visually, but have it available for screen readers:* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility*/.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px; }/** Extends the .visuallyhidden class to allow the element* to be focusable when navigated to via the keyboard:* https://www.drupal.org/node/897638*/.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto; } .main{/*margin-left: 150px;*//*margin-right: 150px;*/height: auto;/*border: 2px solid #212121;*//*border-radius: 20px;*/background-color: red; } .head{height: 150px;background-color:#ffff00;text-align: center;font-style: oblique;font-size: 40px;line-height:140px; } .center{height: 80px;background-color:bisque;position:relative } .one{width: 25%;height: 80px;background-color:greenyellow;float:left } .two{width: 25%;height: 80px;background-color:rosybrown;float:left } .three{width: 25%;height: 80px;background-color:brown;float:left } .four{width: 25%;height: 80px;background-color:aquamarine;float:left } .relax{height: 10px;background-color: #cccccc; } .item{height: 40px;background-color: white; } .head_content{/*background-color:darkgray;*//*margin-top: 100px;*//*text-align: center;*//*line-height:80px;*/ } .image{width: 50px;height: 50px;margin: auto;margin-top: 5px; } .in{text-align: center; } .value{text-align: center; } .left{margin-top: 10px; } .tuijian{margin-top: 8px;float: left; } .gengduo{float: right;margin-top: 8px;} .rightimg{float: right;} .val1{margin-left: 15px; } /** Hide visually and from screen readers, but maintain layout*/.invisible {visibility: hidden; } .image1{/*margin-top: 4px;*/width: 25px;height: 25px; } .val{line-height : 40px;margin-top: 10px;margin-left: 5px; }/** Clearfix: contain floats** For modern browsers* 1. The space content is one way to avoid an Opera bug when the* `contenteditable` attribute is included anywhere else in the document.* Otherwise it causes space to appear at the top and bottom of elements* that receive the `clearfix` class.* 2. The use of `table` rather than `block` is only necessary if using* `:before` to contain the top-margins of child elements.*/.clearfix:before, .clearfix:after {content: " "; /* 1 */display: table; /* 2 */ }.clearfix:after {clear: both; }/* ==========================================================================EXAMPLE Media Queries for Responsive Design.These examples override the primary ('mobile first') styles.Modify as content requires.========================================================================== */@media only screen and (min-width: 35em) {/* Style adjustments for viewports that meet the condition */ }@media print,(min-resolution: 1.25dppx),(min-resolution: 120dpi) {/* Style adjustments for high resolution devices */ }/* ==========================================================================Print styles.Inlined to avoid the additional HTTP request:http://www.phpied.com/delay-loading-your-print-css/========================================================================== */@media print {*,*:before,*:after {background: transparent !important;color: #000 !important; /* Black prints faster:http://www.sanbeiji.com/archives/953 */box-shadow: none !important;text-shadow: none !important;}a,a:visited {text-decoration: underline;}a[href]:after {content: " (" attr(href) ")";}abbr[title]:after {content: " (" attr(title) ")";}/** Don't show links that are fragment identifiers,* or use the `javascript:` pseudo protocol*/a[href^="#"]:after,a[href^="javascript:"]:after {content: "";}pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}/** Printing Tables:* http://css-discuss.incutio.com/wiki/Printing_Tables*/thead {display: table-header-group;}tr,img {page-break-inside: avoid;}img {max-width: 100% !important;}p,h2,h3 {orphans: 3;widows: 3;}h2,h3 {page-break-after: avoid;} }
總結：字房子中間樣式
?
?
text-align: center;行高要記住
?
?
line-height : 40px;?
?
?
?
?
?
?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： Android之SwipeRefresh
- 下一篇： 链表之单链表约瑟夫问题（一）