当前位置：网站首页>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>
边栏推荐
- 【Star项目】小帽飞机大战（五）
- 2022 software testing skills robotframework + selenium library + Jenkins web Keyword Driven Automation practical tutorial
- Skywalking distributed system application performance monitoring tool - medium
- Comparison between hardware SPI and software analog SPI rate
- 轻量版项目管理系统
- Fluorite network, difficult to be a "lone brave"
- 小米网站主页面大模块——小模块+导航（浮动案例）
- Codeforces Round ＃810 (Div. 2)A~C题解
- Go learning 01
- Talk to ye Yanxiu, an atlassian certification expert: where should Chinese users go when atlassian products enter the post server era?
猜你喜欢
软考 --- 数据库（2）关系模型
Codeforces Round ＃807 (Div. 2) A-C题解
LeetCode 热题 HOT 100 -＞ 3. 无重复字符的最长子串
Codeworks round 807 (Div. 2) a-c problem solution
都在说DevOps，你真正了解它吗？
Flume（5个demo轻松入门）
go 学习01
2022 software testing skills robotframework + selenium library + Jenkins web Keyword Driven Automation practical tutorial
Go learning 01
Go learn 02 basic knowledge
随机推荐
C ＃ using ABP warehouse to access the database error record set
Shell regular and metacharacters
synchronized详解
In the era of great changes in material enterprises, SRM supplier procurement system helps enterprises build a digital benchmark for property procurement
Implementation of mongodb/mongotemplate.upsert batch inserting update data
Hcip day 12 notes
Principle and implementation of focal loss
【愚公系列】2022年07月 Go教学课程 019-循环结构之for
了解加密行业的“下一个大趋势”——Ventures DAO
Software testing interview question: why should we carry out testing in a team?
Software test interview question: please introduce the meaning of various test types in detail?
轻量版项目管理系统
A lock faster than read-write lock. Don't get to know it quickly
Typescript中类的使用
[database data recovery] data recovery case of insufficient disk space of SQL Server database
They are all talking about Devops. Do you really understand it?
go 学习01
Codeforces Round ＃807 (Div. 2) A-C题解
小米网站主页面大模块——小模块+导航（浮动案例）
软件测试面试题：你所熟悉的软件测试类型有哪些?