当前位置：网站首页>综合设计一个OPPE主页--页面的搜素欧珀部分的样式
综合设计一个OPPE主页--页面的搜素欧珀部分的样式
2022-07-27 18:50:00 【（-^_^-）】
首先进行样式分析：
样式相同的可以放在列表里面
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>
<!-- ¥十页符号作为人名币 -->
<p class="money">¥3999 立即购买<span></span></p>
</li>
<li class="line"></li>
<li>
<div><img src="img/20141029162235J7aJmCHkFm.jpg" alt="照片"></div>
<h2>R5</h2>
<p>电动旋转摄像头</p>
<!-- ¥十页符号作为人名币 -->
<p class="money">¥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>
<!-- ¥十页符号作为人名币 -->
<p class="money">¥2999 立即购买<span></span></p>
</li>
<li class="line"></li>
<li>
<div><img src="img/20150423183545tYnFzYnn3p.jpg" alt="照片"></div>
<h2>A31</h2>
<p>竟在掌握</p>
<!-- ¥十页符号作为人名币 -->
<p class="money">¥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;
}实现效果
边栏推荐
- 【历史上的今天】7 月 27 日：模型检测先驱出生；微软收购 QDOS；第一张激光照排的中文报纸
- Stick to one thing
- Paper appreciation [emnlp18] dynamic oracles for top-down and middle order move in reduction component parsing
- Common ArrayList interview questions
- What is the value of digital factory management system
- PHP code audit 6 - file contains vulnerability
- Leetcode daily practice - 203. remove linked list elements
- ADB shell LS /system/bin (index table)
- Understanding Network Model OSI model
- Automatic classification of e-commerce UGC pictures using Baidu PaddlePaddle easydl
猜你喜欢
如何让个性化推荐即刻触达？云原生数据库GaussDB(for Redis)来助力
The application of building cloud rendering is expanding, and more and more industries are in urgent need of visualization services
How to check the Bluetooth version of Bluetooth headset
Conquer 3 pieces of IT equipment for all programmers →
Beijing / Shanghai / Guangzhou / Shenzhen dama-cdga/cdgp data governance certification registration conditions
Leetcode daily practice - the penultimate node in the linked list
mysql 最大建议行数2000w,靠谱吗？
Leetcode-209- subarray with the smallest length
MapGIS三维场景渲染技术与应用
Leetcode daily practice - 203. remove linked list elements
随机推荐
R language uses t The test function performs a t-test to verify whether the population mean is a specific value (inferring the population mean from the sample set)
新来个技术总监要我做一个 IP 属地功能~
Leetcode-136-a number that appears only once
Brief description of tenant and multi tenant concepts in cloud management platform
R language dplyr package summary_ The at function calculates the count number, mean and median of multiple data columns (specified by vectors) in the dataframe data, and specifies the function list us
访问共享文件夹时提示“因为文件共享不安全 SMB1协议”请使用SMB2协议
Mysql 数据恢复流程 基于binlog redolog undolog
What if the start button doesn't respond after the win11 system updates kb5014668?
Thinking about SLA of cloud computing
数字化工厂系统有什么现实优势
进程管理 进程的监控与管理 ps/pstree/top/lsof
Explain cache consistency and memory barrier
Win11用户名和密码备份方法
激光雷达中国前装大幕开启，数百万颗产能待消化
飞信卒于2022：中国移动一手好牌被打烂，5亿用户成“僵尸”
Command line PDF Converter::: fcoder 2PDF
Hexagon_ V65_ Programmers_ Reference_ Manual（6）
LeetCode每日一练 —— 876. 链表的中间结点
Airiot Q & A issue 6 | how to use the secondary development engine?
What are the practical advantages of digital factory system