最近仿照小米官网的布局写了一个官网网站,无奈备案是个人的,不能备案,只好把源码免费分享给有需要的人
设计理念:
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/u/6014091701?is_all=1">HiFa</a>
<span>|</span>
<a href="http://iot.10086">loT</a>
<span>|</span>
<a href="#">服务</a>
<span>|</span>
<a href="#">金融</a>
<span>|</span>
<a href="#">有品</a>
<span>|</span>
<a href="https://github">开放平台</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">IPhone</a>
</li>
<li>
<a href="https://www.samsung/cn/">三星</a>
</li>
<li>
<a href="https://www.vmall">华为</a>
</li>
<li>
<a href="https://www.mi">小米</a>
</li>
<li>
<a href="https://www.opposhop">OPPO</a>
</li>
<li>
<a href="https://www.vivo">ViVO</a>
</li>
<li>
<a href="https://www.zte">中兴</a>
</li>
<li>
<a href="https://www.meizu">魅族</a>
</li>
<li>
<a href="https://www.oneplus">一加</a>
</li>
<li>
<a href="https://www.sony">索尼</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 京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部分自行修改
更多推荐
【超完全源码】我写了一个平台官网网站免费分享源码
发布评论