当前位置：网站首页>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>
边栏推荐
- 软件测试面试题：你认为做好测试用例设计工作的关键是什么?
- Promise从入门到精通 （第1章 Promise的介绍和基本使用）
- Fiddler mobile packet capturing agent settings (for Huawei glory 60s)
- A letter to the user of qubu drawing bed
- MySQL的pymysql操作
- The petrochemical industry is facing the tide of rising prices, and the digital dealer distribution system platform enables dealers and stores
- Promise从入门到精通（第4章 async 和 await）
- Aike AI frontier promotion (7.14)
- 结构伪类选择器—查找单个—查找多个—nth-of-type和伪元素
- Typescript中类的使用
猜你喜欢
Sample imbalance - entry 0
11-Django-基础篇-数据库操作
Execute add migration migration and report build failed
软考 --- 数据库（2）关系模型
Flex布局—固定定位+流式布局—主轴对齐—侧轴对齐—伸缩比
Embedded classic communication protocol
Fluorite network, difficult to be a "lone brave"
The petrochemical industry is facing the tide of rising prices, and the digital dealer distribution system platform enables dealers and stores
Behind every piece of information you collect, you can't live without TA
Comparison between hardware SPI and software analog SPI rate
随机推荐
Traversal and properties of binary trees
Fiddler mobile packet capturing agent settings (for Huawei glory 60s)
Completely delete MySQL in Linux system
Fluorite network, difficult to be a "lone brave"
Codeworks round 810 (Div. 2) a~c problem solution
Principle and implementation of cross entropy
Unreal ue4.27 switchboard porting engine process
如何评估研发人员效能？软件工程师报告帮你看见每个人的贡献
Codeworks round 807 (Div. 2) a-c problem solution
Lightweight project management system
记录一次生产死锁
53: Chapter 5: develop admin management service: 6: develop [admin administrator exit login, interface]; (one point: when we want to modify a value with a certain coding method, the new value should b
样本不均衡-入门0
Data output - image annotation and annotation
[Taichi] draw a regular grid in Tai Chi
华为APP UI自动化测试岗面试真题，真实面试经历。
Unittest unit test framework full stack knowledge
They are all talking about Devops. Do you really understand it?
Data security and privacy computing summit - provable security: Learning
go 学习02 基础知识