当前位置：网站首页>综合设计一个OPPE主页--明星机型的设计
综合设计一个OPPE主页--明星机型的设计
2022-07-26 15:59:00 【（-^_^-）】
先进行页面的分析
是上下分还是左右分
上下分两块 第二块分成四个部分的相似元素 ，所以整体可以使用列表来做li里面有图片 型号 价格 文字等
结构设计
开始页面的样式设计
/*初始化样式*/
/*将默认的样式清零*/
*{
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;
}
.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;
}
<!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>
</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>实现效果部分
边栏推荐
- 开发日常小结（11）：文件上传功能改进：中文字符检测与文本内容处理
- ES6 advanced - query commodity cases
- 想让照片中的云飘起来？视频编辑服务一键动效3步就能实现
- PAT甲级 1047 Student List for Course
- PAT甲级 1046 Shortest Distance
- A coal mine in Yangquan, Shanxi Province, suffered a safety accident that killed one person and was ordered to stop production for rectification
- 十周岁生日快乐，Clojure
- js 对数组操作的 API 总结
- 邻接矩阵的COO格式
- Bugku login2
猜你喜欢
![[RCTF2015]EasySQL](/img/68/328ee5cffc8b267b6b0f284eb8db2c.png)
[RCTF2015]EasySQL
我们被一个 kong 的性能 bug 折腾了一个通宵
Tutorial (7.0) 05. Issue forticlient * forticlient EMS * Fortinet network security expert NSE 5 through forticlient EMS
Change an ergonomic chair to relieve the old waist of sitting and writing code~
“核弹级” Log4j 漏洞仍普遍存在，并造成持续影响
FTP协议
大型仿人机器人整机构型研究与应用
Mapwithstate of spark streaming state flow
Vs2019debug mode too laggy can't enter the breakpoint
终于有人把红蓝对抗讲明白了
随机推荐
Implementation of personalized healthy diet recommendation system based on SSM
Mapwithstate of spark streaming state flow
Delta controller rmc200
Build resume editor based on Nocode
We were tossed all night by a Kong performance bug
2022年最新北京建筑安全员模拟题库及答案
国元期货网上开户安全吗？开户办理流程是怎样的？
German EMG electric actuator eb800-60ii
御神楽的学习记录之SoC FPGA的第一个工程-Hello World
Parker pump pv140r1k1t1pmmc
Google Earth Engine——MERRA-2 M2T1NXSLV：1980-至今全球压力、温度、风等数据集
测试用例千万不能随便，记录由一个测试用例异常引起的思考
Daily1:SVM
Research and application of the whole configuration of large humanoid robot
剑指offer专项突击版第11天
《硅谷之谜》读后感
ES6高级-查询商品案例
spark-streaming状态流之mapWithState
初识OpenGL (3)片段着色器(Fragment Shader)
Kalibr calibration realsensed435i -- multi camera calibration