当前位置：网站首页>小米网站主页面大模块——小模块+导航（浮动案例）
小米网站主页面大模块——小模块+导航（浮动案例）
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>
边栏推荐
- Game 302 of leetcode
- A Tiger's Tale
- In the era of great changes in material enterprises, SRM supplier procurement system helps enterprises build a digital benchmark for property procurement
- Hcip 13th day notes
- 如何评估研发人员效能？软件工程师报告帮你看见每个人的贡献
- Talk to ye Yanxiu, an atlassian certification expert: where should Chinese users go when atlassian products enter the post server era?
- 【数据库数据恢复】SQL Server数据库磁盘空间不足的数据恢复案例
- GBase 8c 备份控制函数（一）
- go 学习02 基础知识
- Linux Installation mysql8.0.29 detailed tutorial
猜你喜欢
Hcip 13th day notes
LeetCode高频题128. 最长连续序列，经常被互联网大厂面试考到
Five basic data structures of redis
Completely delete MySQL in Linux system
Codeforces Round ＃810 (Div. 2)A~C题解
IT这个岗位，人才缺口百万，薪资水涨船高，上不封顶
什么是方法，什么是方法论：了解自我精进提升的底层逻辑
数据安全与隐私计算峰会-可证明安全：学习
Redis design specification
Unreal ue4.27 switchboard porting engine process
随机推荐
Game 302 of leetcode
Traversal and properties of binary trees
QGIS制图：矢量数据制图流程及导出
GBase 8c 备份控制函数（三）
样本不均衡-入门0
After learning the loop, I came across the problem of writing factorial of N, which caused a series of problems, including some common pitfalls for beginners, and how to simplify the code
Five basic data structures of redis
GBase 8c 快照同步函数
Leetcode's 83rd biweekly match
开源飞控（PX4、ardupilot）
LeetCode第 83 场双周赛
C＃ 使用Abp仓储访问数据库时报错记录集
54：第五章：开发admin管理服务：7：人脸入库流程；人脸登录流程；浏览器开启视频调试模式（以便能够在本机的不安全域名的情况下，也能去开启摄像头）；
微信小程序图片根据屏幕比例缩放
递归的使用：1.将平铺数组转为树 2.将树转化为平铺数组
Unity universal red dot system
2022软件测试技能 Robotframework + SeleniumLibrary + Jenkins web关键字驱动自动化实战教程
Software testing interview question: what do you think is the key to good test case design?
记录一次生产死锁
Completely delete MySQL in Linux system