当前位置：网站首页>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
边栏推荐
- redis cook book.notes.
- JS closure knowledge
- Leetcode daily practice - 876. Intermediate node of linked list
- Automated testing - unittest framework
- 中英文说明书丨 AbFluor 488 细胞凋亡检测试剂盒
- Big guys, the MySQL version is low and does not support CDC, so canal synchronizes binlog to Kafka and data to cli
- Get the method registered in the delegate
- Understand the communication mode of transmission media
- “地理-语言”大模型文心ERNIE-GeoL及应用
- 智能网联跑出中国「加速度」，26.15%搭载率背后的市场洗牌
猜你喜欢
Typoa spelling check: missing dictionary file for Chinese
Installation and use tutorial of the latest version of Web vulnerability scanning tool appscan\awvs\xray
LabVIEW learning note 5: you cannot return to the original state after pressing the button
The solution that the laptop can connect to WiFi but the browser cannot open the web page
One of IOU target tracking: IOU tracker
Some operations about Anaconda (installing software and quickly opening)
中地数码：融合创新国产GIS 乘风而上助推实景三维中国建设
Postgresql源码（65）新快照体系Globalvis工作原理分析
![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
The maximum recommended number of rows for MySQL is 2000W. Is it reliable?
随机推荐
MAPGIS 3D pipeline modeling awakens the pulse of urban underground pipelines
Remember that resttemplate.getforentity failed to carry headers once, resttemplate exchange
app测试定位方式
Verilog HDL中的reg型变量的理解
Feixin died in 2022: a good hand of China Mobile was broken, and 500million users became "zombies"
Simple use of express web server
redis cook book.notes.
"Harvest" NFT: 200 yuan to buy pictures on Taobao, and 300000 yuan on the chain
建筑云渲染的应用正在扩大，越来越多的行业急需可视化服务
Get the method registered in the delegate
MapGIS三维场景渲染技术与应用
Leetcode daily practice - 21. Merge two ordered linked lists
What are the application scenarios of real name authentication in the cultural tourism industry?
The new CTO strongly prohibits the use of calendar?
Leetcode daily practice - cm11 linked list segmentation
MAPGIS 3D scene rendering technology and Application
Unity installs personal free edition
Design of noise reduction link based on DSP
Dobot magician robot arm - Introduction
Leetcode daily practice - 203. remove linked list elements