当前位置：网站首页>Xiaomi website homepage big module - small module + navigation (floating case)
Xiaomi website homepage big module - small module + navigation (floating case)
2022-07-28 02:15:00 【Xiao Lin loves to share】
front end CSS New notes - Xiaomi module case
One . Large module cases
Goal map ：
1. Initialization page
stay style In the definition of margin and padding by 0
/* initialization Remove the default label margin and padding*/
*{
margin: 0;
padding: 0;
}
1. stay body Define header labels
<body>
<!-- The head of the page -->
<div class="header"></div>
</body>
stay style Format in
.header{
height: 40px;
background-color: #333;
}
2. Define the pink navigation bar
<!-- Navigation of web pages body in -->
<div class="nav"></div>
stay style Format in
.nav{
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto; /* To center the module */
}
margin: 0 auto; The role of ：
① Yes DIV Set up margin:0 auto style , It's to make DIV Center horizontally in the browser . Layout centered 、 Horizontal center , All join margin:0 auto that will do .
② Why set up margin:0 auto？
Set this style to let DIV The layout is horizontally centered in the browser , The purpose is to be compatible with all major browsers and center the layout . If not margin:0 auto CSS style , It will cause the layout to be centered in some browsers and left in some browsers .
③margin:0 auto and float Cannot be reused
If you want to make DIV The layout is centered in the browser , Join in margin:0 auto You can't join float Floating style , Avoid logical errors , The layout is not compatible in the middle .
3. Define web page carousel map
First define the big framework banner, Then define it internally left and right Small frame , But you need to use floating float Element moves the frame on the left to the left , Move the frame on the right to the right , otherwise left and right It's all block level elements , It will be divided into two lines .
<!-- Web page rotation map body in -->
<div class="banner">
<div class="left"></div>
<div class="right"></div>
</div>
/* style in */
.banner{
width: 1226px;
height: 460px;
background-color: blue;
margin: 0 auto; /* Yes div apply */
}
.left{
float: left;
width:234px;
height:460px;
background-color:#ffa500;
}
.right{
float: right;
height:460px;
width:992px;
background-color:#87ceeb}
All of the code
<!-- -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
/* initialization Remove the default label margin and padding*/
*{
margin: 0;
padding: 0;
}
.header{
height: 40px;
background-color: #333;
}
.nav{
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto;
}
.banner{
width: 1226px;
height: 460px;
background-color: blue;
margin: 0 auto; /* Yes div apply */
}
.left{
float: left;
width:234px;
height:460px;
background-color:#ffa500;
}
.right{
float: right;
height:460px;
width:992px;
background-color:#87ceeb}
</style>
</head>
<body>
<!-- The head of the page -->
<div class="header"></div>
<!-- Navigation of web pages -->
<div class="nav"></div>
<!-- Web page rotation map -->
<div class="banner">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
Two . Small module case
Examples of goals ：
1. Make the page a whole first , It is further divided into left and right parts
<div class="box">
<div class="left"></div>
<div class="right">
</div>
</div>
For the overall setting style,margin: 100px auto; It means setting the distance up and down in the page 100px, The left and right distances are automatically allocated , That is, Center .
.box{
width:1226px;
height:614px;
margin: 100px auto;}
Set left and right styles , The previous case
.left{
float:left;
width:234px;
height:614px;
background-color:#800080}
.right{
float: right;
width:978px;
height:614px;
/* background-color:yellow */
}
2. Set the right part 8 Small item, among ① Put it directly in item Is a block level element ,item Items will be arranged in a column , Need to use float:left; Use floating to change the vertical layout to horizontal layout . ② For every little item Set up margin-right and margin-bottom Will squeeze the last one of each line to the next line （ Because the distance of each line is certain , The right side of the fourth and eighth is directly welted , There is no reserved distance in the data ）.
.item{
float:left;
width:234px;
height:300px;
background-color:#87ceeb;
margin-right: 14px;
margin-bottom: 14px;
}
/* Find the fourth and eighth 4 Multiple 4n*/
.item:nth-child(4n){
/*background-color: red;*/
margin-right: 0;
}
/* Find the fifth and all subsequent sub elements */
.item:nth-child(n+5){
margin-bottom: 0;
}
Complete code ：
<!-- -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
/* initialization Remove the default label margin and padding*/
*{
margin: 0;
padding: 0;
}
.box{
width:1226px;
height:614px;
/*background-color:pink; */
margin: 100px auto;}
.left{
float:left;
width:234px;
height:614px;
background-color:#800080}
.right{
float: right;
width:978px;
height:614px;
/* background-color:yellow */
}
.item{
float:left;
width:234px;
height:300px;
background-color:#87ceeb;
margin-right: 14px;
margin-bottom: 14px;
}
/* Find the fourth and eighth 4 Multiple 4n*/
.item:nth-child(4n){
/*background-color: red;*/
margin-right: 0;
}
/* Find the fifth and all subsequent sub elements */
.item:nth-child(n+5){
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
3、 ... and . Navigation tag
Target format ：
1. Navigation bar <ul> and <li> constitute .
<ul>
<li><a href="#"> Journalism 1</a></li>
<li><a href="#"> Journalism 2</a></li>
<li><a href="#"> Journalism 3</a></li>
<li><a href="#"> Journalism 4</a></li>
<li><a href="#"> Journalism 5</a></li>
<li><a href="#"> Journalism 6</a></li>
<li><a href="#"> Journalism 7</a></li>
<li><a href="#"> Journalism 8</a></li>
</ul>
/* The style is set */
<style>
/*1. initialization Remove the default label margin and padding*/
*{
margin: 0;
padding: 0;
}
/* 2. Remove the dots */
ul{
list-style: none;
}
/* 3. find li label , Set float Turn the vertical label into horizontal */
ul li{
float:left;
}
/* 4. find a label , Set width and height */
ul li a{
/* a The default tag is an inline element , You can't set the width and height directly , The three methods are as follows */
/* ① Convert to inline block elements */
/* display:inline-block; */
/* ② Convert to block level elements , Fill a row of parent elements */
/* display: block; */
/* ③ Set float */
float: left;
width:80px;
height: 50px;
background-color:#ffc0cb;
text-decoration: none; /* Remove the sliding line */
text-align: center; /* Horizontal center */
line-height: 50px; /* Vertical center */
color: white;
font-size:16px;
}
ul li a:hover{
background-color: #008000;
}
</style>
Complete code ：
<!-- -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
/*1. initialization Remove the default label margin and padding*/
*{
margin: 0;
padding: 0;
}
/* 2. Remove the dots */
ul{
list-style: none;
}
/* 3. find li label , Set float Turn the vertical label into horizontal */
ul li{
float:left;
}
/* 4. find a label , Set width and height */
ul li a{
/* a The default tag is an inline element , You can't set the width and height directly */
/* 1. Convert to inline block elements */
/* display:inline-block; */
/* 2. Convert to block level elements , Fill a row of parent elements */
/* display: block; */
/* 3. Set float */
float: left;
width:80px;
height: 50px;
background-color:#ffc0cb;
text-decoration: none; /* Remove the sliding line */
text-align: center; /* Horizontal center */
line-height: 50px; /* Vertical center */
color: white;
font-size:16px;
}
ul li a:hover{
background-color: #008000;
}
</style>
</head>
<body>
<ul>
<li><a href="#"> Journalism 1</a></li>
<li><a href="#"> Journalism 2</a></li>
<li><a href="#"> Journalism 3</a></li>
<li><a href="#"> Journalism 4</a></li>
<li><a href="#"> Journalism 5</a></li>
<li><a href="#"> Journalism 6</a></li>
<li><a href="#"> Journalism 7</a></li>
<li><a href="#"> Journalism 8</a></li>
</ul>
</body>
</html>
边栏推荐
- 对话Atlassian认证专家叶燕秀：Atlassian产品进入后Server时代，中国用户应当何去何从？
- 数据输出-绘制动图
- UE4 unreal ndisplay plug-in easy to use three fold screen details
- Appium click operation sorting
- In the era of great changes in material enterprises, SRM supplier procurement system helps enterprises build a digital benchmark for property procurement
- Software testing interview question: why should we carry out testing in a team?
- Shell regular and metacharacters
- Packet capturing wizard netcapture app packet capturing tutorial "complete"
- 产品解读丨MeterSphere UI测试模块的设计与分布式扩展
- ArcGIS：加载历史遥感影像
猜你喜欢
小米网站主页面大模块——小模块+导航（浮动案例）
Flex development web page instance web side
Structure pseudo class selector - find single - find multiple - nth of type and pseudo elements
执行 Add-Migration 迁移时报 Build failed.
JS what situations can't use json Parse, json.stringify deep copy and a better deep copy method
Solution of digital commerce cloud supply chain centralized purchase management system: centralized purchase system management mode, digital control of enterprise materials
QGIS mapping: vector data mapping process and export
记录一次生产死锁
Data security and privacy computing summit - provable security: Learning
Huawei app UI automation test post interview real questions, real interview experience.
随机推荐
【数据库数据恢复】SQL Server数据库磁盘空间不足的数据恢复案例
WMS you don't know
Promise从入门到精通（第4章 async 和 await）
A lock faster than read-write lock. Don't get to know it quickly
Record a production deadlock
考研数学一元微分学证明题常见题型方法
Hcip 13th day notes
Codeforces Round ＃810 (Div. 2)A~C题解
Go learn 02 basic knowledge
Leveraging the blue ocean of household appliances consumption with "digital channels", the dealer online system enables enterprises to further their business
Vxe Table/Grid 单元格分组合并
Software testing interview question: why should we carry out testing in a team?
N32l43x FLASH read \ write \ erase operation summary
清除浮动的原因和六种方法（解决浮动飞起影响父元素和全局的问题）
go 学习02 基础知识
Software test interview question: please introduce the meaning of various test types in detail?
Flex layout learning completed on PC side
11-Django-基础篇-数据库操作
轻量版项目管理系统
Appium click operation sorting