先进行样式的分析

<!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 class="logo left"><img src="img/logo.png" alt="logo"></div><!-- 右边的相同样式就是文字不同 列表适合一点 有7项--><ul class="right"><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><li><a href="#">ColorOS</a></li></ul></div></div><!-- 页面的横幅 --><div id="banner"><div class="container"></div></div><!-- 页面的明星机型部分 --><div id="star"><div class="container"><!-- 上边有一项这项里面有图片 --><div class="star_top"><img src="img/i-c-title.png" alt="明星机型的图片"></div><!-- 下边有一项 这项li里面有图片机型 文字价格 且具有相似的结构4部分 使用列表标签 --><ul><li><div><img src="img/20141030152751NRihyRENa7.jpg" alt="照片"></div><h2>N3</h2><p>电动旋转摄像头</p><!-- &yen十页符号作为人名币 --><p class="money">&yen;3999 立即购买<span></span></p></li><li class="line"></li><li><div><img src="img/20141029162235J7aJmCHkFm.jpg" alt="照片"></div><h2>R5</h2><p>电动旋转摄像头</p><!-- &yen十页符号作为人名币 --><p class="money">&yen;3999 立即购买<span></span></p></li><li class="line"></li><li><div><img src="img/20150120092342k2ABsEHnQN.jpg" alt="照片"></div><h2>R1C</h2><p>薄至4.85mm</p><!-- &yen十页符号作为人名币 --><p class="money">&yen;2999 立即购买<span></span></p></li><li class="line"></li><li><div><img src="img/20150423183545tYnFzYnn3p.jpg" alt="照片"></div><h2>A31</h2><p>竟在掌握</p><!-- &yen十页符号作为人名币 --><p class="money">&yen;999 立即购买<span></span></p></li></ul></div></div><!-- 页面的精选配件 --><div id="accessory"><div class="container"><!-- 上部分 --><div class="acc_top"><img src="img/wb.png" alt="精选配件"></div><!-- 下部分 --><div class="acc_main"><!-- 分成左右两部分 --><div class="acc_left left"><!-- 左边部分分成上下两部分 --><div class="acc_left_top"><!-- 上面的分成左右两部分 --><div class="acc_left_top_left"><img src="img/20150413174400N0dPnxUKHk.jpg" alt="皮套"></div><div class="acc_left_top_right"><!-- 右边的部分分为上下两部分 --><div class="acc_left_top_right_top"><p>OPPO手机官网AAESSORY配件</p><ul><li>耳机</li><li>耳机</li><li>耳机</li><li>耳机</li><li>耳机</li><li>耳机</li></ul><h2 class="line"></h2><p>全部配件<span></span></p></div><div class="acc_left_top_right_bottom"><img src="img/20131120165101xYIYzhkVEy.jpg" alt="电源适配器"></div></div></div><div class="acc_left_bottom"><img src="img/20150413174340NLV2gvV4FU.jpg" alt="数据线"></div></div><div class="acc_right right"><div><img src="img/20150123182505RO822scYYt.jpg" alt="闪充"></div><div><img src="img/20141230145609l7Fsk7CdHy.jpg" alt="耳麦"></div><div><img src="img/20141011101157yZEFpMrk0h.jpg" alt="耳机"></div><div><img src="img/201410270957132inlm3IwsV.jpg" alt="蓝牙耳机"></div></div></div></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;font-size: 14px;
}
/*清除列表前面的标识 */
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;
}
.container{width: 1280px;border: 1px solid #f00;margin: 0 auto; /*内容部分居中*/
}/**********************************************
*****************页面的顶部样式*****************
***********************************************/
#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; /*上边距6 左右边距10 下边距0 */}
#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;
}/**********************************************
*****************页面的的导航栏样式**************
***********************************************/
#nav{height: 90px;background-color: #eeeeee;
}
#nav li{float: left;margin: 0px 15px;line-height: 90px; /*文字居中*/
}
#nav li a{color: #666666; /*文字颜色*/font-weight: bold;/*加粗效果*/
}
#nav li a:hover{ /*注意这: 后面不能有空格*/color: #00925f; /*文字颜色*/font-weight: bold;/*加粗效果*/
}
/**************************************************
*****************页面的明星机型部分样式**************
***************************************************/#star{height: 700px;background-color: #f2f2f2;
}#star .star_top{text-align: center;/*div居中对齐*/margin: 10px; /*使之与上边界存在一个距离*/
}
#star ul{width: 1265px;/*调整成适合自己电脑页面的大小*/margin: 10px auto;
}
#star li{width: 300px;/*border: 1px solid #000;*/float: left;border-bottom: 4px solid #dfdfdf;transition:all 0.3s linear ;
}
#star li:hover{border-bottom: 4px solid #4bf5d0;transform: translateY(-10px);}
#star li img{width: 300px;}
#star li h2{text-align: center;/*文字居中对齐*/margin-top: 10px; /*文字和照片之间的距离*/
}
#star li p{text-align: center;/*文字居中对齐*/margin: 10px 0; /*上下边距 左右0*/font-size: 12px;color: #bdbdbd;
}
#star .money{color: #00925F;font-size: 14px;
}
#star li span{/*    span是行内元素 无法设置行内宽度 改变显示方式*/width: 13px;height: 13px;margin-left: 5px;display: inline-block; /*可以设置了*/vertical-align: middle;/*属性设置一个元素的垂直对齐方式 此元素放置在父元素的中部。*/background: url("../img/icons-1.png") no-repeat -177px -1014px;/*偏移量的设置宽度 高度*/
}
#star .line{width: 0;height: 450px;border-left: 1px solid #eaeaea;margin: 0 10px;
}/**************************************************
*****************页面的精选配件部分的样式**************
***************************************************/
#accessory{height: 950px;background-color: #f6f6f6;
}
#accessory .acc_main{width: 1090px;margin: 10px auto;}#accessory .acc_top{text-align: center;margin: 20px 0;
}#accessory .acc_left{width: 540px;height: 950px;/*border: 2px solid #000;*/margin-top: 10px;
}
/*************************************/
#accessory .acc_left_top_left img{width: 250px;float: left;border-bottom: 3px solid #eaeaea;margin-right: 10px;margin-bottom: 20px;transition:all 0.3s linear ;
}
#accessory .acc_left_top_left img:hover{border-bottom: 3px solid #00925f;transform: translateY(-10px);
}/*************************************/
#accessory .acc_left_top_right_top {float: left;width: 250px;height: 250px;border-bottom: 3px solid #eaeaea;background-color: #fff;padding: 20px;box-sizing: border-box; /*改变元素实际计算方式 加上内边距后元素实际大小发生了变化*/margin-left: 10px;margin-right: 10px;margin-bottom: 10px;transition:all 0.3s linear ;
}#accessory .acc_left_top_right_top:hover{border-bottom: 3px solid #00925f;transform: translateY(-10px);
}#accessory .acc_left_top_right_top p:first-child{font-size: 14px;font-weight: bold;/*加粗*/text-align: center;border-bottom: 1px solid #ccc;padding-bottom: 10px;
}
#accessory .acc_left_top_right_top li{float: left;width: 100px;height: 40px;text-align: center;line-height: 40px;
}
#accessory .acc_left_top_right_top li:hover{color: #00925f;
}
#accessory .acc_left_top_right_top .line{width: 150px;height: 0;border-top: 1px solid #ccc;clear: both; /*清除浮动*/margin: 10px auto;
}
#accessory .acc_left_top_right_top p{text-align: center;
}
#accessory .acc_left_top_right_top p:hover{color: #00925f;
}
#accessory .acc_left_top_right_top span{/*  span是行内元素 无法设置行内宽度 改变显示方式*/width: 13px;height: 13px;margin-left: 10px;display: inline-block; /*可以设置了*/vertical-align: middle;/*属性设置一个元素的垂直对齐方式 此元素放置在父元素的中部。*/background: url("../img/icons-1.png") no-repeat -177px -1014px;/*偏移量的设置宽度 高度*/
}/*************************************/
#accessory .acc_left_top_right_bottom img{float: left;border-bottom: 3px solid #eaeaea;margin: 10px;transition:all 0.3s linear ;width: 250px;
}
#accessory .acc_left_top_right_bottom img:hover{transform: translateY(-10px);border-bottom: 3px solid #00925f;
}/*************************************/
#accessory .acc_left_bottom img{width: 520px;border-bottom: 3px solid #eaeaea;transition:all 0.3s linear ;
}
#accessory .acc_left_bottom img:hover{border-bottom: 3px solid #00925f;transform: translateY(-10px);
}/*************************************/
#accessory .acc_right{width: 540px;/*border: 1px solid orange;*/
}
#accessory .acc_right img{width: 250px;
}
#accessory .acc_right div:first-child img{ /*相同元素的第一个元素*/width: 520px;height: 250px;}
#accessory .acc_right div:last-child img{ /*相同元素的第一个元素*/height: 241px;}
#accessory .acc_right div{float: left;margin: 10px;border-bottom: 3px solid #eaeaea;transition:all 0.3s linear ;
}
#accessory .acc_right div:hover{border-bottom: 3px solid #00925f;transform: translateY(-10px);
}

综合设计一个OPPE主页--页面的精选配件的设计相关推荐

  1. 综合设计一个OPPE主页--页面的插件引用（animate.css）--d动画的使用--滚轮或鼠标到该位置时，才有动画的切换---所以我们需要用jquery监听鼠标滚轮的滚动事件

    Animate.css | A cross-browser library of CSS animations. 里面有许多css的效果 首先使用 animate.css文件 link rel=&qu ...

  2. 综合设计一个OPPE主页--页面的底部

    分析结构: 在一行里面, 一个图片,文字 实现效果:  HTML: <!DOCTYPE html> <html lang="en"> <head> ...

  3. 综合设计一个OPPE主页--页面的搜素欧珀部分的样式

    首先进行样式分析: 样式相同的可以放在列表里面 HTML部分 <!DOCTYPE html> <html lang="en"> <head>&l ...

  4. 综合设计一个OPPE主页--页面的售后服务

    分析样式: 一共六块(整体可以使用列表) 里面的每一小块实际上也是一个列表: 实现效果: 有一个父子样式的跟随 子样式的背景图片的样式跟随父样式一同变化----鼠标触发 实现父子样式一起变化 但是变化 ...

  5. 综合设计一个OPPE主页--页面服务部分

    分析:五个部分 形式相同 除了内容不同 ---------------使用列表做-ul-li 每一个列表里面都有图片和文字 ------图文混排----使用dl-----dt图片 dd文字 HTML ...

  6. 综合设计一个OPPE主页--页面的插件引用（swiper.css）--页面横幅部分

    swiper.js .css的插件的导入 Swiper演示 - Swiper3|Swiper中文网 引入js Swiper使用方法 - Swiper中文网 可以查看文档对照使用 查看效果: 图片过大 ...

  7. 综合设计一个OPPE主页--明星机型的设计

    先进行页面的分析 是上下分还是左右分 上下分两块 第二块分成四个部分的相似元素 ,所以整体可以使用列表来做li里面有图片 型号 价格 文字等 结构设计 开始页面的样式设计 /*初始化样式*/ /*将默 ...

  8. 综合设计一个OPPE主页--布局与初始化

    首先建立一个站点文件夹--保存网页的所有信息 id做页面的布局 class做页面的样式 <!DOCTYPE html> <html lang="en"> & ...

  9. 综合设计一个OPPE主页--导航栏的设计

    先进行内容框分析 在样式设置 /*初始化样式*/ /*将默认的样式清零*/ *{padding: 0;margin: 0; } /*清除列表前面的标识 */ ol,ul{list-style-type ...

最新文章

  1. Python gui编程pyQt5安装步骤
  2. 偷懒的inline-block解决方法
  3. 前端工程师算法（一）
  4. JZOJ 5616. 【NOI2018模拟3.31】沧海尘记
  5. 机器人学习--室内定位的通信学科背景方法
  6. CentOS6.5下用yum安装 git .
  7. AD制图相关问题总结
  8. 前端学习（2361）：下拉刷新的学习
  9. 树莓派 | threading01 - 创建两个子线程同时运行，两个线程各负责控制一个LED灯以不同的频率闪烁
  10. java集成开发工具项目_Java项目开发（一）-不借助集成工具创建Java项目并编写编译执行脚本...
  11. l4d2服务器修改武器伤害,辐射4武器伤害及护甲修改图文教程_快吧单机游戏
  12. BenchmarkSQL 测试Oracle 12c TPC-C 性能
  13. python中str如何使用_python中str函数的使用方法
  14. web of knowledge分析文献引用情况（引）
  15. 58同城溢价私有化，互联网“前浪”躲不过“七年之痒”？
  16. Spring5学习笔记——【遇见狂神说】[IoC、DI、AOP]
  17. 公司研发人员（含测试）经理、组长能力评价表
  18. 微信小程序的text 的换行
  19. leetcode881.救生艇（中等）
  20. Flutter问题集

热门文章

  1. 网站美化：网站底部右侧悬浮菜单，客服菜单，一键联系配置教程
  2. Matlab的矩阵乘法
  3. java 简单计算器
  4. 交流永磁发电机的功率以及转速的调整
  5. Python - 发Foxmail
  6. mysql还原数据库名一样_MySQL数据库的多种备份与多种还原
  7. 微信小程序迭代发布流程
  8. 小白费了九牛二虎之力终于安装上了anaconda！
  9. 用PHP实现的抢红包逻辑
  10. python酒店数据分析_Python数据分析 I 全国旅游景点分析案例，哪里好玩一目了然...