当前位置：网站首页>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>
边栏推荐
- UE4 unreal ndisplay plug-in easy to use three fold screen details
- Unittest unit test framework full stack knowledge
- Sample imbalance - entry 0
- LeetCode 热题 HOT 100 -＞ 2.两数相加
- Principle and implementation of cross entropy
- MySQL高可用和主从同步
- Uniapp summary (applet)
- ArcGIS：加载历史遥感影像
- mongodb/mongoTemplate.upsert批量插入更新数据的实现
- Synchronized details
猜你喜欢
Aike AI frontier promotion (7.14)
C＃ 使用Abp仓储访问数据库时报错记录集
Behind every piece of information you collect, you can't live without TA
Execute add migration migration and report build failed
Codeforces Round ＃807 (Div. 2) A-C题解
QGIS mapping: vector data mapping process and export
测试/开发程序员的级别“陷阱“，级别不是衡量单维度的能力......
ArcGIS: loading historical remote sensing images
Unreal ue4.27 switchboard porting engine process
Interviewer: are you sure redis is a single threaded process?
随机推荐
Software testing interview question: what is the purpose of test planning? What are the contents of the test plan? Which are the most important?
Enterprise operation and maintenance practice - using aliyun container image service to pull and build images of overseas GCR and quay warehouses
Data output - dynamic drawing
QGIS制图：矢量数据制图流程及导出
视频常用分辨率
Cloud native enthusiast weekly: the evolution of Prometheus architecture
Sample imbalance - entry 0
轻量版项目管理系统
Execute add migration migration and report build failed
【愚公系列】2022年07月 Go教学课程 019-循环结构之for
二叉树的遍历和性质
Structure pseudo class selector - find single - find multiple - nth of type and pseudo elements
Completely delete MySQL in Linux system
Flex layout learning completed on PC side
Flex布局学习完成PC端
执行 Add-Migration 迁移时报 Build failed.
Codeforces Round ＃810 (Div. 2)A~C题解
Software testing interview question: what types of software testing are you familiar with?
Redis设计规范
What devices does devicexplorer OPC server support? This article has listed