当前位置：网站首页>综合设计一个OPPE主页--页面的精选配件的设计
综合设计一个OPPE主页--页面的精选配件的设计
2022-07-27 18:50:00 【（-^_^-）】
先进行样式的分析
<!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>
<!-- 页面的搜素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);
}
边栏推荐
- 电脑微软账户登录一直转圈怎么解决问题
- 图解 SQL，这也太形象了吧！
- Natapp intranet penetration tool Internet access personal projects
- Dedecms dream weaving last article next article free controllable output link, title, thumbnail, time
- Rust变量特点
- Hexagon_ V65_ Programmers_ Reference_ Manual（7）
- The application of building cloud rendering is expanding, and more and more industries are in urgent need of visualization services
- 行为级描述与RTL级描述
- R language uses LM function to build multiple linear regression model, writes regression equation according to model coefficient, and uses deviance function to calculate the sum of squares of residual
- 如何对话CIO/CTO
猜你喜欢
![Paper appreciation [emnlp18] dynamic oracles for top-down and middle order move in reduction component parsing](/img/bf/5244eafd927ae990551a59dfa7e863.png)
Paper appreciation [emnlp18] dynamic oracles for top-down and middle order move in reduction component parsing
NPDP | what kind of product manager can be called excellent?
Airiot Q & A issue 6 | how to use the secondary development engine?
Lidar China's front loading curtain opens, millions of production capacity to be digested
Five celebrities' worries about AI
Explain cache consistency and memory barrier
MapGIS三维管线建模，唤醒城市地下管线脉搏
Good driving, inexpensive, comfortable and safe! Experience BYD song Pro DM-I in depth
Leetcode daily practice - 203. remove linked list elements
知识管理系统推动企业信息化发展
随机推荐
When accessing the shared folder, you will be prompted "because file sharing is not secure smb1 Protocol". Please use Smb2 protocol
Behavior level description and RTL level description
Command line PDF Converter::: fcoder 2PDF
Thesis appreciation [emnlp18] uses sequence tagging for component parsing
Dedecms dream weaving last article next article free controllable output link, title, thumbnail, time
Chapter 7 Intermediate Shell Tool I
Explain cache consistency and memory barrier
One of IOU target tracking: IOU tracker
LeetCode每日一练 —— 876. 链表的中间结点
How to realize document collaboration?
Elk too heavy? Try KFC log collection
Set up discuz forum and break the stolen database
JS closure knowledge
Leetcode daily practice - 876. Intermediate node of linked list
Simple use of express web server
Natapp intranet penetration tool Internet access personal projects
Understand the communication mode of transmission media
飞桨框架体验评测交流会，产品的使用体验由你来决定！
Rust variable characteristics
Understanding Network Model OSI model