当前位置：网站首页>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>
边栏推荐
- Synchronized details
- 如何评估研发人员效能？软件工程师报告帮你看见每个人的贡献
- Hcip 13th day notes
- A letter to the user of qubu drawing bed
- Starfish Os X MetaBell战略合作，元宇宙商业生态更进一步
- go 学习02 基础知识
- Gbase 8C recovery control function
- Zkrollup learning materials summary
- uniapp 总结篇 （小程序）
- Small bulk quantitative stock trading record ｜ data is the source in the quantitative system, which teaches you to build a universal data source framework
猜你喜欢
一种比读写锁更快的锁，还不赶紧认识一下
LeetCode 热题 HOT 100 -＞ 2.两数相加
SkyWalking分布式系统应用程序性能监控工具-中
对话Atlassian认证专家叶燕秀：Atlassian产品进入后Server时代，中国用户应当何去何从？
N32l43x FLASH read \ write \ erase operation summary
萤石网络，难当「孤勇者」
Record a production deadlock
QGIS制图：矢量数据制图流程及导出
每条你收藏的资讯背后，都离不开TA
Enterprise operation and maintenance practice - using aliyun container image service to pull and build images of overseas GCR and quay warehouses
随机推荐
考研数学一元微分学证明题常见题型方法
Gbase 8C backup control function (IV)
zkrollup学习资料汇总
交叉熵原理及实现
Embedded classic communication protocol
Appium click operation sorting
Netease cloud copywriting
MySQL高可用和主从同步
Flex layout learning completed on PC side
Structure pseudo class selector - find single - find multiple - nth of type and pseudo elements
Data security and privacy computing summit - provable security: Learning
损失函数-交叉熵的原理及实现
Forget the root password
数据输出-绘制动图
sftp文件/文件夹上传服务器
In the era of great changes in material enterprises, SRM supplier procurement system helps enterprises build a digital benchmark for property procurement
Unittest unit test framework full stack knowledge
数据输出-图片注释、标注
Starfish Os X MetaBell战略合作，元宇宙商业生态更进一步
Promise从入门到精通（第3章 自定义(手写)Promise）