456主机测评
最近仿照小米官网的布局写了一个官网网站，无奈备案是个人的，不能备案，只好把源码免费分享给有需要的人
设计理念：
1. 响应式布局，自适应手机浏览器的大小
2. 加入js和css样式设计
3. 有轮播图效果
4. 其它待补充
桌面端效果图：
移动端效果图：
HTML代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>Hi5G平台</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/fonts.css"> <link media="(max-width:200px)" rel="stylesheet" type="text/css" href="css/mobile.css"> <script type="text/javascript" src="js/sth.js"></script> </head style="overflow:-Scroll;overflow-x:hidden"> <!-- 顶部栏 --> <div class="topBar" > <div class="container"> <div class="topBar_list" align="center"> <a href="#">嗨5G官网</a> <span>|</span> <a href="https://weibo.com/u/6014091701?is_all=1">HiFa</a> <span>|</span> <a href="http://iot.10086.cn">loT</a> <span>|</span> <a href="#">服务</a> <span>|</span> <a href="#">金融</a> <span>|</span> <a href="#">有品</a> <span>|</span> <a href="https://github.com">开放平台</a> </div> </div> </div> <!-- 导航栏 --> <div class="header"> <div class="site-list"align="center"> <ul class="clearfix" > <li class="site-category"> </li> <li> <a href="https://www.apple.com.cn">IPhone</a> </li> <li> <a href="https://www.samsung.com/cn/">三星</a> </li> <li> <a href="https://www.vmall.com">华为</a> </li> <li> <a href="https://www.mi.com">小米</a> </li> <li> <a href="https://www.opposhop.cn">OPPO</a> </li> <li> <a href="https://www.vivo.com.cn">ViVO</a> </li> <li> <a href="https://www.zte.com.cn">中兴</a> </li> <li> <a href="https://www.meizu.com">魅族</a> </li> <li> <a href="https://www.oneplus.com">一加</a> </li> <li> <a href="https://www.sony.com.cn">索尼</a> </li> </ul> </div> </div> </div> <!--主页内容--> <div class="site-content"> <div class="container"> <!--轮播图--> <div class="site-slider" align="center"> <a href="#"> <img src="img/1000.jpg" id ="myimg"> </a> <span class="next"></span> <span class="prev"></span> </div> </div> </div> <!--临时表单--> <table class="seet" border="5px" align="center"> <tr> <td align="center" bgcolor="#FF6700">sco排名</td> <td align="center" bgcolor="#FF6700">下载速率</td> <td align="center" bgcolor="#FF6700">上行速率</td> <td align="center" bgcolor="#FF6700">是否双模</td> </tr> <tr> <td align="center" bgcolor="#99CCFF">高通X55</td> <td align="center" bgcolor="#99CCFF">7Gbps</td> <td align="center" bgcolor="#99CCFF">3Gbps</td> <td align="center" bgcolor="#99CCFF">是</td> </tr> <tr> <td align="center">巴龙5000</td> <td align="center">6.5Gbps</td> <td align="center">3.5Gbp</td> <td align="center">是</td> </tr> <tr> <td align="center" bgcolor="#99CCFF">天玑1000</td> <td align="center" bgcolor="#99CCFF">4.7 Gbps</td> <td align="center" bgcolor="#99CCFF">2.5 Gbps</td> <td align="center" bgcolor="#99CCFF">是</td> </tr> <tr> <td align="center" bgcolor="">Exynos 980</td> <td align="center" bgcolor="">2.55Gbps</td> <td align="center" bgcolor="">1.28Gbps</td> <td align="center" bgcolor="">是</td> </tr> <tr> <td align="center" bgcolor="#99CCFF">虎贲T7510</td> <td align="center" bgcolor="#99CCFF">未知</td> <td align="center" bgcolor="#99CCFF">未知</td> <td align="center" bgcolor="#99CCFF">是</td> </tr> <tr> <td align="center" bgcolor="">高通X50 </td> <td align="center" bgcolor="">5Gbps</td> <td align="center" bgcolor="">未知</td> <td align="center" bgcolor="">否</td> </tr> <tr> <td align="center" bgcolor="#99CCFF">以上均为官方公布的数据</td> <td align="center" bgcolor="#99CCFF"></td> <td align="center" bgcolor="#99CCFF"></td> <td align="center" bgcolor="#99CCFF"></td> </tr> </table> <!--内容详情--> <div class="contet_desc"> <div class="container"></div> </div> <!--脚部--> <div class="footer"> <div class="container"> <div class="footer-service"> <ul> <li> <a> <i class="iconfont"></i> 公众号 </a> </li> <li> <a> <i class="iconfont"></i> 关注微博 </a> </li> <li> <a> <i class="iconfont"></i> 关注知乎 </a> </li> <li> <a> <i class="iconfont"></i> CSDN </a> </li> </ul> </div> </div> <div class="pb"> <p class="beian" align="center"> © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号<br/> （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京) -非经营性-2014-0090 营业执照 医疗器械公告 <br/> 增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12 食品经营许可证 <br/> 违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </p> </div> </body> </html> index css:
body{ font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif; color: #333; } /*小米顶部样式*/ .topBar{ height: 2.5rem; background-color: #333333; } .topBar .category-list{ color: #FF7A3D; line-height: 10px; } .topBar .login { float: right; background-color: #333333; } .topBar a { color: #b0b0b0; font-size: 0.75rem; display: inline-block; line-height: 2.5rem; } .topBar .shop a { width: 7.5rem; height: 2.5rem; display: inline-block } .topBar a:hover { color: #ff7a3d; } .topBar span { color: #424242; } /*顶部样式结束end*/ /*导航栏开始*/ .header { height: 6.25rem; } .header .site-logo a { display: block; width: 3.5rem; height: 3.5rem; } .header .site-list { float: left; width: 100%; } .header .site-list ul { padding: 12px 0 0 0; width: 100%; height: 5.5rem; font-size: 1rem; } .header .site-list>ul>li { float: left; } .header .site-list ul li a { font-size: 12px; /*24px*/ display: block; padding: 1.625rem 0.3rem 2.375rem; color: #333333; } .header .site-list ul li a:hover { color: #FF7A3D; } .header.site-list ul.site-category a { padding: 0; } .header .site-list>ul>li.site-category { position: relative; } /*结束*/ /*站点内容开始*/ .site-content .site-slider { width: 100%; height: 100%; } .site-content .site-slider>a>img{ width: 100%; height: 100%; } /*.site-content .site-slider>a{ width: auto\9; height: auto; width: 100%; } .site-content .site-slider>a>img{ width: 100%; height: 100%; } /*向导*/ .content-banner { margin-top: 1.1875rem; overflow: hidden; } /*内容结束*/ /*表单开始*/ .seet{ width: 100%; background-color: #f0f0f0; } .pb.beian>p{ background-color: #f0a874; } /*脚部*/ .footer .footer-service{ padding: 27px 0; border-bottom: 1px solid #e0e0e0; } .footer .footer-service ul li{ float: left; width: 19.8%; height: 25px; font-size: 16px; line-height: 25px; text-align: center; border-left: 1px solid #e0e0e0; } .footer .footer-service ul .first{ border-left: 0; } .footer .footer-service ul li a{ color: #616161; } .footer .footer-link{ padding: 40px 0; } .footer .footer-link dl{ float: left; width: 160px; height: 112px; text-align: center; } .footer .footer-link dl dt{ margin-bottom: 26px; font-size: 14px; color: #424242; } .footer .footer-link dl dd{ font-size: 12px; margin-top: 10px; cursor: pointer; } .footer .footer-link dl dd:hover{ color: #ff6700; } .footer .footer-link .col-contact{ float: right; width: 251px; height: 112px; border-left: 1px solid #e0e0e0; text-align: center; } .footer .footer-link .col-contact .phone{ margin-bottom: 5px; font-size: 20px; color: #ff6700; } .footer .footer-link .col-contact p{ margin-bottom: 16px; font-size: 12px; } footer .footer-link .col-contact a{ display: inline-block; width: 118px; height: 28px; border: 1px solid #ff6700; color: #ff6700; font-size: 12px; }reset css:
body,input,select,button{ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 for PC端 */ } body{font-size:12px;line-height:166.6%;} /*pc端常设置字体大小及间距*/ h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */ small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表单元素 */ th, td { margin:0;padding:0;} input,button,select,img{margin:0;line-height:normal} select{padding:1px} ul,ol{list-style:none} select,input,button,button img,label{vertical-align:middle} header,footer,section,aside,nav,hgroup,figure,figcaption{display:block;margin:0;padding:0;border:none;} /*HTML5标签变块级*/ a{text-decoration:none;} /*重置链接下划线*/ img{border:none;} /* 浮动及边常用边距 */ .fL{float:left;} .fR{float:right;} .mL10{margin-left:10px;} .mB10{margin-bottom:10px;} /*清除浮动*/ .clear{clear:both;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block} * html .clearfix{height:1%} /* Hides from IE-mac \*/ .clearfix{display:block}/* End hide from IE-mac */ js:
window.setInterval(changeImg,2000) var index =1000; function changeImg(){ myimg = document.getElementById("myimg"); index++; if(index>1004){ index =1000; } myimg.src = "img/"+index+".jpg"; }注意事项，图片img部分自行修改
- 海报
