综合设计一个OPPE主页--顶部，头部的设计

顶部：

头部：查看要求--观察页面头部是上下分还是左右分，明显是左右分

左边分为3小部分右边分5小部分

查看图片的大小和偏移量：

鼠标放上去显示绿色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/style.css"><title>OPPO</title>
</head>
<body><!-- 页面的顶部 --><div id="top"><div class="container"></div></div><!-- 页面的头部 --><div id="header"><div class="container"><!-- 左边有三项 --><!-- /*实现整体 浮动*/ --><div class="header_left left"><div class="xlwb"></div><div class="txwb"></div><div class="tel">4001-666-888</div></div><!-- 右边的相同样式就是文字不同 列表适合一点 有五项--><ul class="right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li><a href="#">积分兑换</a></li><li><a href="#">帮助中心</a></li><li class="shop_car"><span></span><a href="#">购物车</a></li></ul></div></div><!-- 页面的导航栏 --><div id="nav"><div class="container"></div></div><!-- 页面的横幅 --><div id="banner"><div class="container"></div></div><!-- 页面的明星机型部分 --><div id="star"><div class="container"></div></div><!-- 页面的精选配件 --><div id="accessory"><div class="container"></div></div><!-- 页面的搜素opple部分 --><div id="world"><div class="container"></div></div><!-- 页面的服务部分 --><div id="service"><div class="container"></div></div><!-- 页面的售后服务 --><div id="alter_sale"><div class="container"></div></div><!-- 页面的底部 --><div id="footer"><div class="container"></div></div>
</body>
</html>

/*初始化样式*/
/*将默认的样式清零*/
*{padding: 0;margin: 0;
}
/*清除列表前面的标识 */
ol,ul{list-style-type: none;
}
/*清除超链接的默认样式*/
a{color: #666;/*灰色*/text-decoration: none;/*去除下划线*/
}
/*将左右浮动写在类里面*/
.left{float: left;
}
.right{float: right;
}
/*测试部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#service,#alter_sale,#footer{height: 100px;width: 100%;border: 1px solid #000;
}
/*页面的顶部样式*/
#top{height: 5px;background-color: #00925f;
}
/*页面的头部样式*/
#header{height: 30px;background-color: #2d2d2d;
}
#header .xlwb{width: 22px;height: 19px;background: url("../img/icons.png") no-repeat -48px -98px; /*偏移量量一下*/
}
#header .txwb{width: 17px;height: 24px;background: url("../img/icons.png") no-repeat -28px -93px; /*偏移量量一下*/
}
#header .tel{color: #17925f;font-size: 14px;
}
/*实现一行显示 浮动*/
#header .header_left div{float: left;margin:6px 10px 0px;}
#header ul li{float: left;line-height: 30px;
}
#header li a{color: #b2b2b2;font-size: 14px;border-right: 1px solid #b2b2b2;padding:0px 10px;/*文字与边框的距离*/
}
#header li a:hover{color: #00925f;
}
#header .shop_car span{width: 19px;height: 16px;margin-left: 10px;display: inline-block;
/*  span是行内元素 无法设置行内宽度 改变显示方式*/background: url("../img/icons.png") no-repeat 0px -96px;
}
#header .shop_car a{border: none;
}.container{width: 1280px;border: 1px solid #f00;margin: 0 auto; /*内容部分居中*/
}

综合设计一个OPPE主页--顶部，头部的设计相关推荐

综合设计一个OPPE主页--明星机型的设计
先进行页面的分析是上下分还是左右分上下分两块第二块分成四个部分的相似元素 ,所以整体可以使用列表来做li里面有图片型号价格文字等结构设计开始页面的样式设计 /*初始化样式*/ /*将默 ...
综合设计一个OPPE主页--导航栏的设计
先进行内容框分析在样式设置 /*初始化样式*/ /*将默认的样式清零*/ *{padding: 0;margin: 0; } /*清除列表前面的标识 */ ol,ul{list-style-type ...
综合设计一个OPPE主页--布局与初始化
首先建立一个站点文件夹--保存网页的所有信息 id做页面的布局 class做页面的样式 <!DOCTYPE html> <html lang="en"> & ...
综合设计一个OPPE主页--页面的插件引用（animate.css）--d动画的使用--滚轮或鼠标到该位置时，才有动画的切换---所以我们需要用jquery监听鼠标滚轮的滚动事件
Animate.css | A cross-browser library of CSS animations. 里面有许多css的效果首先使用 animate.css文件 link rel=&qu ...
综合设计一个OPPE主页--页面的底部
分析结构: 在一行里面, 一个图片,文字实现效果: HTML: <!DOCTYPE html> <html lang="en"> <head> ...
综合设计一个OPPE主页--页面的精选配件的设计
先进行样式的分析 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
综合设计一个OPPE主页--页面的搜素欧珀部分的样式
首先进行样式分析: 样式相同的可以放在列表里面 HTML部分 <!DOCTYPE html> <html lang="en"> <head>&l ...
综合设计一个OPPE主页--页面的售后服务
分析样式: 一共六块(整体可以使用列表) 里面的每一小块实际上也是一个列表: 实现效果: 有一个父子样式的跟随子样式的背景图片的样式跟随父样式一同变化----鼠标触发实现父子样式一起变化但是变化 ...
综合设计一个OPPE主页--页面服务部分
分析:五个部分形式相同除了内容不同 ---------------使用列表做-ul-li 每一个列表里面都有图片和文字 ------图文混排----使用dl-----dt图片 dd文字 HTML ...

综合设计一个OPPE主页--顶部，头部的设计

综合设计一个OPPE主页--顶部，头部的设计相关推荐

最新文章

热门文章