当前位置：网站首页>Comprehensively design an oppe home page -- the style of the search and oper part of the page
Comprehensively design an oppe home page -- the style of the search and oper part of the page
2022-07-27 21:24:00 【（-^_^-）】
First, conduct style analysis ：
The same style can be put in the list
HTML part
<!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>
<!-- At the top of the page -->
<div id="top">
<div class="container"></div>
</div>
<!-- The head of the page -->
<div id="header">
<div class="container">
<!-- There are three items on the left -->
<!-- /* Realize the whole float */ -->
<div class="header_left left">
<div class="xlwb"></div>
<div class="txwb"></div>
<div class="tel">4001-666-888</div>
</div>
<!-- The same style on the right is different The list fits a little There are five -->
<ul class="right">
<li><a href="#"> Sign in </a></li>
<li><a href="#"> register </a></li>
<li><a href="#"> Redeem points </a></li>
<li><a href="#"> Help center </a></li>
<li class="shop_car">
<span></span>
<a href="#"> The shopping cart </a>
</li>
</ul>
</div>
</div>
<!-- The navigation bar of the page -->
<div id="nav">
<div class="container">
<!-- There is one on the left -->
<div class="logo left">
<img src="img/logo.png" alt="logo">
</div>
<!-- The same style on the right is different The list fits a little Yes 7 term -->
<ul class="right">
<li><a href="#"> home page </a></li>
<li><a href="#"> mobile phone </a></li>
<li><a href="#"> parts </a></li>
<li><a href="#"> service </a></li>
<li><a href="#"> Experience shop </a></li>
<li><a href="#"> Software store </a></li>
<li><a href="#">ColorOS</a></li>
</ul>
</div>
</div>
<!-- Page banner -->
<div id="banner">
<div class="container"></div>
</div>
<!-- The star model part of the page -->
<div id="star">
<div class="container">
<!-- There is an item above, which has pictures -->
<div class="star_top">
<img src="img/i-c-title.png" alt=" Pictures of star models ">
</div>
<!-- There is one item below the li There are pictures in it Text price And has a similar structure 4 part Use list Tags -->
<ul>
<li>
<div><img src="img/20141030152751NRihyRENa7.jpg" alt=" Photo "></div>
<h2>N3</h2>
<p> Electric rotating camera </p>
<!-- ¥ Ten page symbols are used as name coins -->
<p class="money">¥3999 Buy now <span></span></p>
</li>
<li class="line"></li>
<li>
<div><img src="img/20141029162235J7aJmCHkFm.jpg" alt=" Photo "></div>
<h2>R5</h2>
<p> Electric rotating camera </p>
<!-- ¥ Ten page symbols are used as name coins -->
<p class="money">¥3999 Buy now <span></span></p>
</li>
<li class="line"></li>
<li>
<div><img src="img/20150120092342k2ABsEHnQN.jpg" alt=" Photo "></div>
<h2>R1C</h2>
<p> Thin to 4.85mm</p>
<!-- ¥ Ten page symbols are used as name coins -->
<p class="money">¥2999 Buy now <span></span></p>
</li>
<li class="line"></li>
<li>
<div><img src="img/20150423183545tYnFzYnn3p.jpg" alt=" Photo "></div>
<h2>A31</h2>
<p> I'm actually mastering </p>
<!-- ¥ Ten page symbols are used as name coins -->
<p class="money">¥999 Buy now <span></span></p>
</li>
</ul>
</div>
</div>
<!-- Selected accessories of the page -->
<div id="accessory">
<div class="container">
<!-- Upper part -->
<div class="acc_top">
<img src="img/wb.png" alt=" Selected accessories ">
</div>
<!-- Lower part -->
<div class="acc_main">
<!-- It's divided into two parts -->
<div class="acc_left left">
<!-- The left part is divided into upper and lower parts -->
<div class="acc_left_top">
<!-- The upper part is divided into left and right parts -->
<div class="acc_left_top_left">
<img src="img/20150413174400N0dPnxUKHk.jpg" alt=" Leather cover ">
</div>
<div class="acc_left_top_right">
<!-- The part on the right is divided into upper and lower parts -->
<div class="acc_left_top_right_top">
<p>OPPO Mobile official website AAESSORY parts </p>
<ul>
<li> The headset </li>
<li> The headset </li>
<li> The headset </li>
<li> The headset </li>
<li> The headset </li>
<li> The headset </li>
</ul>
<h2 class="line"></h2>
<p> All accessories <span></span></p>
</div>
<div class="acc_left_top_right_bottom">
<img src="img/20131120165101xYIYzhkVEy.jpg" alt=" The power adapter ">
</div>
</div>
</div>
<div class="acc_left_bottom">
<img src="img/20150413174340NLV2gvV4FU.jpg" alt=" cable ">
</div>
</div>
<div class="acc_right right">
<div>
<img src="img/20150123182505RO822scYYt.jpg" alt=" Flash charging ">
</div>
<div>
<img src="img/20141230145609l7Fsk7CdHy.jpg" alt=" headset ">
</div>
<div>
<img src="img/20141011101157yZEFpMrk0h.jpg" alt=" The headset ">
</div>
<div>
<img src="img/201410270957132inlm3IwsV.jpg" alt=" Bluetooth headset ">
</div>
</div>
</div>
</div>
</div>
<!-- The search part of the page -->
<div id="world">
<div class="container">
<div class="world_top">
<img src="img/weibo.png" alt=" oppo ">
</div>
<div class="world_main">
<div class="worle_left left">
<div><img src="img/201403261455420lqMPNGENc.png" alt=" Shopping points "></div>
<div><img src="img/20150226100534QqezQ85N6y.jpg" alt=" hire purchase "></div>
<div><img src="img/20140926184007v2rjcVFcbW.jpg" alt=" Cash on Delivery "></div>
<div><img src="img/20131212113902waaLqQUWfB.jpg" alt=" Firmware upgrade "></div>
</div>
<div class="world_right right">
<div class="world_title">
<div class="news"> Journalism </div>
<div class="weibo"> Microblogging </div>
</div>
<!-- Pictures have the same elements Use list -->
<ul>
<li> <!-- In every list It's a mixture of pictures and texts So use a custom list -->
<dl>
<dt>
<img src="img/20150227161036GqO59Dvta2.jpg" alt=" dream ">
</dt><!-- The title of the custom list is picture -->
<dd>OPPO R5 Golden Edition Create a dream trip to New York Fashion Week </dd><!-- Description of the list item -->
</dl>
</li>
<li> <!-- In every list It's a mixture of pictures and texts So use a custom list -->
<dl>
<dt>
<img src="img/201502271135596D2wBJxvH0.jpg" alt=" The magazine ">
</dt><!-- The title of the custom list is picture -->
<dd>OPPO Hand made Fashion magazine cover blockbuster feeling </dd><!-- Description of the list item -->
</dl>
</li>
<li> <!-- In every list It's a mixture of pictures and texts So use a custom list -->
<dl>
<dt>
<img src="img/20140604145924CFBnAtVjqN.jpg" alt=" The headset ">
</dt><!-- The title of the custom list is picture -->
<dd> Industry revolution OPPO Release the world's most sensitive flat panel headphones PM-1</dd><!-- Description of the list item -->
</dl>
</li>
<li> <!-- In every list It's a mixture of pictures and texts So use a custom list -->
<dl>
<dt>
<img src="img/20140919101741cvR0TcGkaq.jpg" alt=" Awards ">
</dt><!-- The title of the custom list is picture -->
<dd> Ultimate original OPPO PM-1 Headphones won the grand prize for everyone </dd><!-- Description of the list item -->
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- The service part of the page -->
<div id="service">
<div class="container"></div>
</div>
<!-- After sales service of the page -->
<div id="alter_sale">
<div class="container"></div>
</div>
<!-- Bottom of page -->
<div id="footer">
<div class="container"></div>
</div>
</body>
</html>CSS part
/* Initialize style */
/* Reset the default style */
*{
padding: 0;
margin: 0;
font-size: 14px;
}
/* Clear the flag at the front of the list */
ol,ul{
list-style-type: none;
}
/* Clear the default style of hyperlinks */
a{
color: #666;/* gray */
text-decoration: none;/* Remove underscores */
}
/* Write left and right floats in the class */
.left{
float: left;
}
.right{
float: right;
}
/* Test part */
#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; /* The content part is centered */
}
/**********************************************
***************** The top style of the page *****************
***********************************************/
#top{
height: 5px;
background-color: #00925f;
}
/**********************************************
***************** Page header style *****************
***********************************************/
#header{
height: 30px;
background-color: #2d2d2d;
}
/* Sina Weibo icon settings */
#header .xlwb{
width: 22px;
height: 19px;
background: url("../img/icons.png") no-repeat -48px -98px; /* Offset it */
}
/* Tencent Weibo icon settings */
#header .txwb{
width: 17px;
height: 24px;
background: url("../img/icons.png") no-repeat -28px -93px; /* Offset it */
}
/* Phone settings */
#header .tel{
color: #17925f;
font-size: 14px;
}
/* Implement one line display float */
#header .header_left div{
float: left;
margin:6px 10px 0px; /* From the above 6 Left and right margins 10 Bottom margin 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;/* The distance between the text and the border */
}
#header li a:hover{
color: #00925f;
}
#header .shop_car span{
width: 19px;
height: 16px;
margin-left: 10px;
display: inline-block; /* You can set up */
/* span It's an in-line element Cannot set inline width Change the display mode */
background: url("../img/icons.png") no-repeat 0px -96px;
}
#header .shop_car a{
border: none;
}
/**********************************************
***************** The navigation bar style of the page **************
***********************************************/
#nav{
height: 90px;
background-color: #eeeeee;
}
#nav li{
float: left;
margin: 0px 15px;
line-height: 90px; /* Writing in the middle */
}
#nav li a{
color: #666666; /* Text color */
font-weight: bold;/* Bold effect */
}
#nav li a:hover{ /* Pay attention to this : No space after */
color: #00925f; /* Text color */
font-weight: bold;/* Bold effect */
}
/**************************************************
***************** The style of the star model part of the page **************
***************************************************/
#star{
height: 700px;
background-color: #f2f2f2;
}
#star .star_top{
text-align: center;/*div Align center */
margin: 10px; /* Make it a distance from the upper boundary */
}
#star ul{
width: 1265px;/* Adjust to fit your computer page */
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;/* Align text Center */
margin-top: 10px; /* The distance between words and photos */
}
#star li p{
text-align: center;/* Align text Center */
margin: 10px 0; /* Top and bottom margin about 0*/
font-size: 12px;
color: #bdbdbd;
}
#star .money{
color: #00925F;
font-size: 14px;
}
#star li span{
/* span It's an in-line element Cannot set inline width Change the display mode */
width: 13px;
height: 13px;
margin-left: 5px;
display: inline-block; /* You can set up */
vertical-align: middle;/* Property to set the vertical alignment of an element This element is placed in the middle of the parent element .*/
background: url("../img/icons-1.png") no-repeat -177px -1014px;/* The setting width of the offset Height */
}
#star .line{
width: 0;
height: 450px;
border-left: 1px solid #eaeaea;
margin: 0 10px;
}
/**************************************************
***************** The style of the selected accessories section of the page **************
***************************************************/
#accessory{
height: 950px;
background-color: #f6f6f6;
overflow: hidden; /* Prevent the following Modules have an impact */
}
#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; /* Change the actual calculation method of elements After adding the inner margin, the actual size of the element changes */
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;/* In 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; /* Remove the floating */
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 It's an in-line element Cannot set inline width Change the display mode */
width: 13px;
height: 13px;
margin-left: 10px;
display: inline-block; /* You can set up */
vertical-align: middle;/* Property to set the vertical alignment of an element This element is placed in the middle of the parent element .*/
background: url("../img/icons-1.png") no-repeat -177px -1014px;/* The setting width of the offset Height */
}
/*************************************/
#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{ /* The first element of the same element */
width: 520px;
height: 250px;
}
#accessory .acc_right div:last-child img{ /* The first element of the same element */
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);
}
/**************************************************
***************** The style of the search element oper part of the page **************
***************************************************/
#world{
height: 700px;
/*clear: both; This has no effect on clearing floating here */
/*overflow: hidden;*/ /* Clearing the float also has no effect */
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; /* To move the image below relative to this box */
}
#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;
}Realization effect
边栏推荐
- When accessing the shared folder, you will be prompted "because file sharing is not secure smb1 Protocol". Please use Smb2 protocol
- Digital leading planning first, focusing on the construction of intelligent planning information platform and the exploration and practice of application projects
- Understand the communication mode of transmission media
- Good driving, inexpensive, comfortable and safe! Experience BYD song Pro DM-I in depth
- 说明书丨Worthington逆转录酶、重组 HIV 检测方案
- Yyds dry inventory learn how to write function overloads in typescript
- PHP code audit 6 - file contains vulnerability
- 新来个技术总监要我做一个 IP 属地功能~
- 新来CTO 强烈禁止使用Calendar...，那用啥？
- Leetcode daily practice - 21. Merge two ordered linked lists
猜你喜欢
How to check whether there is Tsinghua source / delete Tsinghua source and keep the default source
ACM MM 2022 | 浙大提出：点云分割主动学习新SOTA
What is the value of digital factory management system
PG free space map & visibility map
Dobot Magician 机器臂-简介
Uncaught SyntaxError: redeclaration of let page
Rust变量特点
综合设计一个OPPE主页--页面的搜素欧珀部分的样式
Pytest失败重跑
新来CTO 强烈禁止使用Calendar...，那用啥？
随机推荐
Knife4j dynamically refreshes global parameters through JS
Force buckle 919. Complete binary tree inserter
LabVIEW learning note 5: you cannot return to the original state after pressing the button
Some operations about Anaconda (installing software and quickly opening)
Dobot Magician 机器臂-简介
报表设计丨如何让你的PowerBI看板出彩？
Remember that resttemplate.getforentity failed to carry headers once, resttemplate exchange
进程管理 进程的监控与管理 ps/pstree/top/lsof
Using pseudo element before to realize equal scaling of elements
MySQL back to table, SQL optimization, four isolation levels, three logs binlog, redo log, undo log
Common ArrayList interview questions
MAPGIS 3D scene rendering technology and Application
用伪元素before实现元素的等比例缩放
Understand the communication mode of transmission media
A new technical director asked me to do an IP territorial function~
How to speed up the memory database through special data type index
Process management process monitoring and management ps/pstree/top/lsof
激光雷达中国前装大幕开启，数百万颗产能待消化
Chapter 7 Intermediate Shell Tool I
Installation and use tutorial of the latest version of Web vulnerability scanning tool appscan\awvs\xray