【超完全源码】我写了一个平台官网网站免费分享源码

其他 2020-04-30 13:29:13 阅读次数: 0

最近仿照小米官网的布局写了一个官网网站，无奈备案是个人的，不能备案，只好把源码免费分享给有需要的人
设计理念：

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部分自行修改


 

声希味淡
原创文章 5 获赞 5 访问量 602
关注 私信

猜你喜欢

转载自blog.csdn.net/weixin_45414490/article/details/105845705
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022