本文详细介绍了一个仿照Intel官方网站的响应式网页设计项目，包括HTML结构、CSS样式及JavaScript交互，展示了如何创建一个具有导航栏、图片轮播、内容布局和底部栏的现代网页。
模仿Intel网站写响应式网页
主要代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首页-英特尔中国</title>
<!-- Bootstrap -->
<link href="css/inter.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--导航条部分开始-->
<div class="nav navbar-default navbar-fixed-top">
<!--指定容器-->
<div class="container">
<!--导航栏头部-->
<div class="navbar-header">
<!--左侧logo部分-->
<a href="#" class="navbar-brand i_logo"></a>
<!--汉堡包-->
<a href="#menu" data-toggle="collapse" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<!--左侧导航菜单-->
<!--导航栏的折叠部分-->
<div id="menu" class="collapse navbar-collapse">
<!--左侧导航栏-->
<ul class="nav navbar-nav">
<li>
<a href="#">首页</a>
</li>
<li class="active">
<a href="#">新闻</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
菜单<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="">英特尔产品</a>
</li>
<li class="divider"></li>
<li>
<a href="">热点话题</a>
</li>
<li class="divider"></li>
<li>
<a href="">用户</a>
</li>
<li class="divider"></li>
<li>
<a href="">购买</a>
</li>
<li class="divider"></li>
<li>
<a href="">产品支持</a>
</li>
<li class="divider"></li>
<li>
<a href="">关于英特尔</a>
</li>
</ul>
</li>
</ul>
<!--右侧导航菜单-->
<!--根据浮动的原理，从最右边开始写-->
<ul class="nav navbar-nav navbar-right">
<li>
<a href="">简体中文</a>
</li>
<li>
<a href="#tanchukuang" data-toggle="modal">登录</a>
</li>
</ul>
<form action="" class="navbar-form navbar-right">
<div class="form-group has-feedback">
<label for="inp"></label>
<input type="text" class="form-control" id="inp" value="" />
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
<span class="navbar-text nav-right">|</span>
<a href="#" class="navbar-link navbar-text navbar-right">查找内容 </a>
</div>
</div>
</div>
<!--导航栏部分结束-->
<!--主体部分开始-->
<div class="i_main">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>欢迎来到英特尔</h1>
</div>
</div>
<div class="row">
<div class="col-md-8 col-xs-12">
<div class="i_big">
<img src="img/intel.web.864.486.1.jpg" class="img-responsive" />
<div class="i_biga">
<h1>
五代酷睿芯，强劲创体验
</h1>
<p>第五代英特尔酷睿处理器光芒登场，革命性突破的领先技术，颠覆传统PC体验,带您进入全新的世界</p>
<a class="btn btn-info btn-xs" href="#">立即开始探索第五代英特尔酷睿处理器</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="i_small">
<img src="img/intel.web.368.207.1.jpg" class="img-responsive" alt="" />
<div class="i_smalla">
<h3>解密2合1电脑</h3>
<p>搭载2合1处理器的电脑，助您高效工作的同时带来灵活可触碰的平板体验</p>
<a class="text-info" href="">了解更多</a>
</div>
</div>
</div>
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="i_content">
<div class="media">
<div class="media-left media-middle">
<img src="img/intel.web.81.108.png" alt="" />
</div>
<div class="media-body">
<ul class="list-unstyled">
<li><a href="">英特尔酷睿M处理器</a></li>
<li><a href="">神奇的实感技术</a></li>
<li><a href="">英特尔凌动处理器</a></li>
<li><a href="">2015台北国际电影展</a></li>
<li><a href="">风暴英雄游戏道具兑换</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="i_small">
<img src="img/intel.web.368.207.2.jpg" class="img-responsive" alt="" />
<div class="i_smalla">
<h3>解密2合1电脑</h3>
<p>搭载2合1处理器的电脑，助您高效工作的同时带来灵活可触碰的平板体验</p>
<a class="text-info" href="">了解更多</a>
</div>
</div>
</div>
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="i_content">
<div class="media">
<div class="media-left media-middle">
<img src="img/intel.web.81.108.png" alt="" />
</div>
<div class="media-body">
<ul class="list-unstyled">
<li><a href="">英特尔酷睿M处理器</a></li>
<li><a href="">神奇的实感技术</a></li>
<li><a href="">英特尔凌动处理器</a></li>
<li><a href="">2015台北国际电影展</a></li>
<li><a href="">风暴英雄游戏道具兑换</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-xs-12">
<div class="i_big">
<img src="img/intel.web.864.486.2.jpg" class="img-responsive" />
<div class="i_biga">
<h1>
五代酷睿芯，强劲创体验
</h1>
<p>第五代英特尔酷睿处理器光芒登场，革命性突破的领先技术，颠覆传统PC体验,带您进入全新的世界</p>
<a class="btn btn-info btn-xs" href="#">立即开始探索第五代英特尔酷睿处理器</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-xs-12">
<div class="i_big">
<img src="img/intel.web.864.486.3.jpg" class="img-responsive" />
<div class="i_biga">
<h1>
五代酷睿芯，强劲创体验
</h1>
<p>第五代英特尔酷睿处理器光芒登场，革命性突破的领先技术，颠覆传统PC体验,带您进入全新的世界</p>
<a class="btn btn-info btn-xs" href="#">立即开始探索第五代英特尔酷睿处理器</a>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="i_small">
<img src="img/intel.web.368.207.3.jpg" class="img-responsive" alt="" />
<div class="i_smalla">
<h3>解密2合1电脑</h3>
<p>搭载2合1处理器的电脑，助您高效工作的同时带来灵活可触碰的平板体验</p>
<a class="text-info" href="">了解更多</a>
</div>
</div>
</div>
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="i_content">
<div class="media">
<div class="media-left media-middle">
<img src="img/intel.web.81.108.png" alt="" />
</div>
<div class="media-body">
<ul class="list-unstyled">
<li><a href="">英特尔酷睿M处理器</a></li>
<li><a href="">神奇的实感技术</a></li>
<li><a href="">英特尔凌动处理器</a></li>
<li><a href="">2015台北国际电影展</a></li>
<li><a href="">风暴英雄游戏道具兑换</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--主体部分结束-->
<div class="i_footer">
<div class="row">
<div class="container ">
<div class="col-lg-3 col-md-3 col-xs-3">
<p>关于英特尔</p>
<ul>
<li><a href="">公司信息</a></li>
<li><a href="">联系者关系</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">新闻发布室</a></li>
<li><a href="">网站地图</a></li>
<li><a href="">工作</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<p>支持</p>
<ul>
<li><a href="">联系我们</a></li>
<li><a href="">新闻发布室</a></li>
<li><a href="">网站地图</a></li>
<li><a href="">工作</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<p>法律声明</p>
<ul>
<li><a href="">联系我们</a></li>
<li><a href="">新闻发布室</a></li>
<li><a href="">网站地图</a></li>
<li><a href="">工作</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<p>社交</p>
<ul>
<li><a href="">联系我们</a></li>
<li><a href="">新闻发布室</a></li>
<li><a href="">网站地图</a></li>
<li><a href="">工作</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--登录弹框开始-->
<div id="tanchukuang" class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<span class="colse" data-dimiss="modal">X</span>
<h2 class="modal-title">登录中....</h2>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<!--登录弹框结束-->
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
主要的代码片段（inter.less）
@import "./../less/bootstrap.less";
.i_logo{
background:url(../img/hdr-spr.png) 0 -512px no-repeat;
// margin-top:-4px;
width:63px;
height:42px;
}
.navbar-default{
background-color:#056ecc;
font-size:12px;
border-bottom:1px solid #015ea4;
}
.navbar-default a{
color:#fff !important;
}
.dropdown-menu{
background-color:#056ecc;
}
.active>a,.open>a{
background-color:#0081d5 !important;
}
.nav-default a:hover{
color:#90d7f4 !important;
}
.active>a,.open>a{
background-color:#0081d5 !important;
}
.navbar-default a:hover{
color:#90d7f4 !important;
}
.dropdown-menu>li>a:hover{
color:#fff;
background-color:#0081d5;
}
//主体部分
.i_main{
background-color:#0062a9;
color:#fff;
margin-top:50px;
}
.i_main a{
color:#fff !important;
}
.i_main>div>.row{
margin-bottom:20px;
}
.i_big{
position: relative;
}
.i_biga {
position:absolute;
bottom:0;
padding:20px;
}
.i_small{
position:relative;
overflow:hidden;
}
.i_smalla{
position: absolute;
top:75%;
height:100%;
background:rgba(0,0,0,0.5);
transform:all 0.3s linear;
padding:0 20px;
}
.i_smalla:hover{
top:0;
}
.i_smalla>a:hover{
color:#09d7f4 !important;
}
.i_content{
padding:30px;
}
.i_content a:hover{
color:#90d7f4!important;
text-decoration:none;
}
@media screen and(max-width:991px){
.i_biga{
position:relative ;
}
}
.i_footer{
padding:20px 0px;
}
.i_footer p{
color:#000;
font-size:20px;
}
.i_footer p:hover{
cursor:pointer;
color:#90d7f4 !important;
}
.i_footer ul{
list-style-type:none;
margin-left:-40px;
}
.i_footer>ul>li>a{
color:#90d7f4 !important;
}
.i_footer a:hover{
text-decoration:none;
}
扫一扫
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
