当前位置：网站首页>小米网站主页面大模块——小模块+导航（浮动案例）
小米网站主页面大模块——小模块+导航（浮动案例）
2022-07-28 00:36:00 【小琳爱分享】
前端CSS初学笔记-小米模块案例
一.大模块案例
目标图：
1.初始化页面
在style中定义margin和padding为0
/*初始化 去除标签默认的margin和padding*/
*{
margin: 0;
padding: 0;
}
1.在body中定义头部标签
<body>
<!-- 网页的头部 -->
<div class="header"></div>
</body>
在style中设置格式
.header{
height: 40px;
background-color: #333;
}
2.定义粉色导航栏
<!-- 网页的导航 body中-->
<div class="nav"></div>
在style中设置格式
.nav{
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto; /*为了使模块居中*/
}
margin: 0 auto;的作用：
①对DIV设置margin:0 auto样式，是为了让DIV在浏览器中水平居中。布局居中、水平居中，均加入margin:0 auto即可。
②为什么要设置margin:0 auto？
设置此样式让DIV布局水平居中于浏览器中，目的就是兼容各大浏览器让布局居中。如果不加margin:0 auto CSS样式，会造成布局在有的浏览器中居中有的浏览器靠左。
③margin:0 auto和float不能重复使用
如果要让DIV布局居中浏览器中，加入margin:0 auto就不能加入float浮动样式，避免逻辑错误，造成布局居中不兼容。
3.定义网页轮播图
先定义大框架banner，再在内部定义left和right小框架，但是需要使用浮动float元素将左侧的框架移到左侧，将右侧的框架移到右侧，否则left和right都是块级元素，会分成两行。
<!-- 网页的轮播图 body中-->
<div class="banner">
<div class="left"></div>
<div class="right"></div>
</div>
/* style中*/
.banner{
width: 1226px;
height: 460px;
background-color: blue;
margin: 0 auto; /*对div适用*/
}
.left{
float: left;
width:234px;
height:460px;
background-color:#ffa500;
}
.right{
float: right;
height:460px;
width:992px;
background-color:#87ceeb}
所有代码
<!-- -->
<!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>
/*初始化 去除标签默认的margin和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; /*对div适用*/
}
.left{
float: left;
width:234px;
height:460px;
background-color:#ffa500;
}
.right{
float: right;
height:460px;
width:992px;
background-color:#87ceeb}
</style>
</head>
<body>
<!-- 网页的头部 -->
<div class="header"></div>
<!-- 网页的导航 -->
<div class="nav"></div>
<!-- 网页的轮播图 -->
<div class="banner">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
二.小模块案例
目标实例：
1.将页面先做一个整体，再分为左右两部分
<div class="box">
<div class="left"></div>
<div class="right">
</div>
</div>
对整体设置style，margin: 100px auto;意思是在页面中上下的距离设置100px，左右距离自动分配，也就是居中。
.box{
width:1226px;
height:614px;
margin: 100px auto;}
设置左右样式，如上个案例
.left{
float:left;
width:234px;
height:614px;
background-color:#800080}
.right{
float: right;
width:978px;
height:614px;
/* background-color:yellow */
}
2.对右侧的部分设置8个小item，其中①直接放入item是块级元素，item项会一列排列下来，需要使用float:left;使用浮动将垂直布局变化为水平布局。 ②对每个小item设置margin-right和margin-bottom会将每行的最后一个挤压到下一行（因为每行的距离是确定的，第四个和第八个的右侧直接贴边，数据中没有给预留的距离）。
.item{
float:left;
width:234px;
height:300px;
background-color:#87ceeb;
margin-right: 14px;
margin-bottom: 14px;
}
/*找到第四个和第八个 4的倍数 4n*/
.item:nth-child(4n){
/*background-color: red;*/
margin-right: 0;
}
/*找到第五个及以后所有的子元素*/
.item:nth-child(n+5){
margin-bottom: 0;
}
完整代码：
<!-- -->
<!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>
/*初始化 去除标签默认的margin和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;
}
/*找到第四个和第八个 4的倍数 4n*/
.item:nth-child(4n){
/*background-color: red;*/
margin-right: 0;
}
/*找到第五个及以后所有的子元素*/
.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>
三.导航标签
目标格式：
1.导航栏用<ul>和<li>构成。
<ul>
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
<li><a href="#">新闻3</a></li>
<li><a href="#">新闻4</a></li>
<li><a href="#">新闻5</a></li>
<li><a href="#">新闻6</a></li>
<li><a href="#">新闻7</a></li>
<li><a href="#">新闻8</a></li>
</ul>
/*样式设置*/
<style>
/*1.初始化 去除标签默认的margin和padding*/
*{
margin: 0;
padding: 0;
}
/* 2.去除小圆点 */
ul{
list-style: none;
}
/* 3.找到li标签，设置浮动 将竖着的标签变成横着的 */
ul li{
float:left;
}
/* 4.找到a标签，设置宽高 */
ul li a{
/* a标签默认是行内元素，不能直接设置宽高，三种方法如下 */
/* ①转换为行内块元素 */
/* display:inline-block; */
/* ②转换为块级元素，占满父元素的一行 */
/* display: block; */
/* ③设置浮动 */
float: left;
width:80px;
height: 50px;
background-color:#ffc0cb;
text-decoration: none; /*去除下滑线*/
text-align: center; /*水平居中*/
line-height: 50px; /*垂直居中*/
color: white;
font-size:16px;
}
ul li a:hover{
background-color: #008000;
}
</style>
完整代码：
<!-- -->
<!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.初始化 去除标签默认的margin和padding*/
*{
margin: 0;
padding: 0;
}
/* 2.去除小圆点 */
ul{
list-style: none;
}
/* 3.找到li标签，设置浮动 将竖着的标签变成横着的 */
ul li{
float:left;
}
/* 4.找到a标签，设置宽高 */
ul li a{
/* a标签默认是行内元素，不能直接设置宽高 */
/* 1.转换为行内块元素 */
/* display:inline-block; */
/* 2.转换为块级元素，占满父元素的一行 */
/* display: block; */
/* 3.设置浮动 */
float: left;
width:80px;
height: 50px;
background-color:#ffc0cb;
text-decoration: none; /*去除下滑线*/
text-align: center; /*水平居中*/
line-height: 50px; /*垂直居中*/
color: white;
font-size:16px;
}
ul li a:hover{
background-color: #008000;
}
</style>
</head>
<body>
<ul>
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
<li><a href="#">新闻3</a></li>
<li><a href="#">新闻4</a></li>
<li><a href="#">新闻5</a></li>
<li><a href="#">新闻6</a></li>
<li><a href="#">新闻7</a></li>
<li><a href="#">新闻8</a></li>
</ul>
</body>
</html>
边栏推荐
- Codeforces Round ＃810 (Div. 2)A~C题解
- 一种比读写锁更快的锁，还不赶紧认识一下
- 2022 software testing skills robotframework + selenium library + Jenkins web Keyword Driven Automation practical tutorial
- uniapp 总结篇 （小程序）
- In it, there is a million talent gap, and the salary rises, but it is not capped
- [interview: concurrent article 28:volatile] orderliness
- Flex开发网页实例web端
- GBase 8c 快照同步函数
- 记录一次生产死锁
- GBase 8c 备份控制函数（二）
猜你喜欢
Data security and privacy computing summit - provable security: Learning
开源飞控（PX4、ardupilot）
【数据库数据恢复】SQL Server数据库磁盘空间不足的数据恢复案例
学习了循环碰到了编写计算n的阶乘的题目，由此引发了一系列问题，包括一些初学者常见的坑，以及如何简化代码
Netease cloud copywriting
Enterprise operation and maintenance practice - using aliyun container image service to pull and build images of overseas GCR and quay warehouses
Starfish OS X metabell strategic cooperation, metauniverse business ecosystem further
![[Taichi] draw a regular grid in Tai Chi](/img/48/14e825562afa3ffba96296799617f7.png)
[Taichi] draw a regular grid in Tai Chi
二叉树的遍历和性质
What is method and methodology: understand the underlying logic of self-improvement
随机推荐
数据安全与隐私计算峰会-可证明安全：学习
Software testing interview question: what is the purpose of test planning? What are the contents of the test plan? Which are the most important?
Software testing interview question: what types of software testing are you familiar with?
MPLS tunnel experiment
软件测试面试题：请详细介绍一下各种测试类型的含义?
N32l43x FLASH read \ write \ erase operation summary
They are all talking about Devops. Do you really understand it?
Domain Driven Design -- Terminology
Interviewer: are you sure redis is a single threaded process?
记录一次生产死锁
Use of recursion: 1. Convert the tiled array to a tree 2. Convert the tree to a tiled array
GBase 8c 配置设置函数
【网站搭建】使用acme.sh更新ssl证书：将zerossl改为letsencrypt
自定义类型：结构体，枚举，联合
＃＃ELK日志分析系统搭建＃＃
Gbase 8C transaction ID and snapshot (I)
Gbase 8C snapshot synchronization function
GBase 8c 事务ID和快照
GBase 8c 备份控制函数（二）
每条你收藏的资讯背后，都离不开TA