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

首先进行样式分析：

样式相同的可以放在列表里面

HTML部分

<!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><!-- 页面的搜素欧珀部分 --><div id="world"><div class="container"><div class="world_top"><img src="img/weibo.png" alt="欧珀"></div><div class="world_main"><div class="worle_left left"><div><img src="img/201403261455420lqMPNGENc.png" alt="购物积分"></div><div><img src="img/20150226100534QqezQ85N6y.jpg" alt="分期付款"></div><div><img src="img/20140926184007v2rjcVFcbW.jpg" alt="货到付款"></div><div><img src="img/20131212113902waaLqQUWfB.jpg" alt="固件升级"></div></div><div class="world_right right"><div class="world_title"><div class="news">新闻</div><div class="weibo">微博</div></div><!--     图片具有相同的元素 使用列表 --><ul><li> <!-- 每一个列表里面 是图文混排 所以采用自定义列表 --><dl><dt><img src="img/20150227161036GqO59Dvta2.jpg" alt="梦幻"></dt><!-- 自定义列表的标题是图片 --><dd>OPPO R5金色版 打造纽约时装周梦幻之旅</dd><!-- 关于列表项的描述 --></dl></li><li> <!-- 每一个列表里面 是图文混排 所以采用自定义列表 --><dl><dt><img src="img/201502271135596D2wBJxvH0.jpg" alt="杂志"></dt><!-- 自定义列表的标题是图片 --><dd>OPPO 手动打造 时尚杂志封面大片的感觉</dd><!-- 关于列表项的描述 --></dl></li><li> <!-- 每一个列表里面 是图文混排 所以采用自定义列表 --><dl><dt><img src="img/20140604145924CFBnAtVjqN.jpg" alt="耳机"></dt><!-- 自定义列表的标题是图片 --><dd>业界革命 OPPO发布全球最高灵敏度平板耳机PM-1</dd><!-- 关于列表项的描述 --></dl></li><li> <!-- 每一个列表里面 是图文混排 所以采用自定义列表 --><dl><dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt="大奖"></dt><!-- 自定义列表的标题是图片 --><dd>极致原音 OPPO PM-1耳机斩获大奖给大家</dd><!-- 关于列表项的描述 --></dl></li></ul></div></div></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>

CSS部分

/*初始化样式*/
/*将默认的样式清零*/
*{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;overflow: hidden; /*防止对下面 模块产生影响*/
}
#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);
}
/**************************************************
*****************页面的搜素欧珀部分的样式**************
***************************************************/#world{height: 700px;/*clear: both;这个在这里清除浮动没有效果*//*overflow: hidden;*/ /*清除浮动也是没有效果*/background-color:  #eaeaea;
}
#world .world_top{text-align: center;margin: 20px 0px;
}
#world .worle_left{width: 800px;
}
#world .worle_left div{float: left;margin: 10px;border-bottom: 3px  solid #eaeaea;transition:all 0.3s linear ;
}#world .worle_left div:hover{border-bottom: 3px  solid #00925f;transform: translateY(-10px);}#world .world_right{margin-top: 10px;width: 400px;height: 567px;background-color: #fff;
}
#world .world_right img{width: 100px;height: 100px;
}
#world .world_right .world_title{height: 60px;
}
#world .world_right .world_title div{height: 60px;width: 200px;background-color: #eaeaea;text-align: center;line-height: 60px;float: left;border-top: 3px solid #eaeaea;}
#world .world_right .world_title div:hover{color:  #00925f;
}
#world .world_right .world_title div:first-child{background-color: #fff;border-top: 3px solid #00925f;
}
#world .world_right ul li{background-color: #eaeaea;margin: 20px 10px;
}
#world .world_right dl{width: 380px;height: 100px;position: relative; /*为了下面的那个图片相对于这个框移动*/
}
#world .world_right dl dt{position: absolute;
}
#world .world_right dl dd{position: absolute;top: 20px;left: 140px;
}
#world .world_main{width: 1214px;margin: 10px auto;
}

实现效果

综合设计一个OPPE主页--页面的搜素欧珀部分的样式相关推荐

综合设计一个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主页--页面的售后服务
分析样式: 一共六块(整体可以使用列表) 里面的每一小块实际上也是一个列表: 实现效果: 有一个父子样式的跟随子样式的背景图片的样式跟随父样式一同变化----鼠标触发实现父子样式一起变化但是变化 ...
综合设计一个OPPE主页--页面服务部分
分析:五个部分形式相同除了内容不同 ---------------使用列表做-ul-li 每一个列表里面都有图片和文字 ------图文混排----使用dl-----dt图片 dd文字 HTML ...
综合设计一个OPPE主页--页面的插件引用（swiper.css）--页面横幅部分
swiper.js .css的插件的导入 Swiper演示 - Swiper3|Swiper中文网引入js Swiper使用方法 - Swiper中文网可以查看文档对照使用查看效果: 图片过大 ...
综合设计一个OPPE主页--明星机型的设计
先进行页面的分析是上下分还是左右分上下分两块第二块分成四个部分的相似元素 ,所以整体可以使用列表来做li里面有图片型号价格文字等结构设计开始页面的样式设计 /*初始化样式*/ /*将默 ...
综合设计一个OPPE主页--布局与初始化
首先建立一个站点文件夹--保存网页的所有信息 id做页面的布局 class做页面的样式 <!DOCTYPE html> <html lang="en"> & ...
综合设计一个OPPE主页--导航栏的设计
先进行内容框分析在样式设置 /*初始化样式*/ /*将默认的样式清零*/ *{padding: 0;margin: 0; } /*清除列表前面的标识 */ ol,ul{list-style-type ...

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

综合设计一个OPPE主页--页面的搜素欧珀部分的样式相关推荐

最新文章

热门文章