2 CSS篇（1）
CSS篇
基础
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*css样式： 选择符和声明构成
声明：属性名和属性值
*/
span{
color: orange;
font-size: 30px;
}
</style>
</head>
<body>
<!-- -->
<p>
<span>小猿圈</span>帮助1000w人<span>高效学编程</span>
</p>
</body>
</html>
<!--
1.内联式 （行内式）
2.嵌入式
3.外部式
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 嵌入式 -->
<style type="text/css">
h3{
color: green;
}
</style>
<!-- 外部式 -->
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 内联式 -->
<p style="color: red;">
文本颜色为什么颜色？
</p>
<h3>
小猿圈
</h3>
<h4>
mjj
</h4>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>文本属性和字体属性示例</title>
<style type="text/css">
a{
text-decoration: none;
color: #333;
font-size: 14px;
}
a:hover{
color: #FD8308;
text-decoration: underline;
}
.box p span{
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box">
<a href="https://detail.tmall.com/item.htm?spm=a230r.1.14.10.3e58105cVQmmSc&id=576523555964&cm_id=140105335569ed55e27b&abbucket=9">
V领雪纺衫女2019春装新款漏锁骨打底长袖雪纺衬衣宽松网纱衬衫潮
</a>
<p>¥ <span>339.00</span></p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>字体属性</title>
<style type="text/css">
body{
font-family: "Hoefler Text","Arial";
font-size: 30px;
color: rgb(255,103,0);
font-style: italic;
font-weight: 400;
text-decoration: line-through;
}
</style>
</head>
<body>
<!-- 像素单位： px em rem -->
MJJ 小猿圈
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>文本属性</title>
<style type="text/css">
p{
/*开头的缩进*/
text-indent: 2em;
/*font-size: 20px;*/
/*行高： 行与行之间的距离*/
/*line-height: 60px;*/
/*文字和文字之间的距离*/
letter-spacing: 5px;
/*英文单词之间的距离*/
word-spacing: 10px;
/*综合属性*/
font: 20px / 3 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
div{
line-height: 60px;
font-size: 20px;
background-color: red;
/*设置文本水平居中显示*/
text-align: center;
/* text-align: left; 默认
text-align: right;*/
}
</style>
</head>
<body>
<p>
hello world在人类漫长的历史长河中，推动社会向前的从不会是那些甘于平凡的多数人，相反，他们往往都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手创建的计算机公司到如今仍是手机行业的传奇，没错！他就是乔布斯！
</p>
<div>
在人类漫长的历史长河
</div>
</body>
</html>
字体属性和文本属性总结： 字体属性 1.字体 font-family: "微软雅黑","宋体",...; 2.字体大小 font-size: 20px; 像素单位： px,em,rem px: 绝对单位。 一旦设置了值，不管网页如何变化始终如一 em:相对单位。当前某块区域的字体大小，比如给p标签设置了字体大小20px，那么1em= 20px; rem：相对单位 主要应用于移动端 3.字体颜色 color: red 颜色表示法： - 单词表示法 red green yellow purple. - rgb()表示法 + rgba() a:alpha 表示透明度 - 十六进制表示法 + #ff6700 4.字体样式 font-style normal : 默认的字体 italic:斜体 5.字体粗细 font-weight: bold:粗的字体 100~900 400表示默认 文本属性： 1.文本修饰 text-decoration underline 下划线 none 无线 overline 上划线 line-through 删除线 2.文本缩进 text-indent 单位建议使用em 3.行高 行与行之间的距离 line-height px，em，rem 4.中文字间距/单词间距 letter-spacing word-spacing 5.文本对齐方式 text-align left right center 使用最多
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米顶部栏案例</title>
<style type="text/css">
a{
text-decoration: none;
}
.top_bar{
width: 100%;
height: 40px;
background-color: #333;
}
.top_bar a{
color: #b0b0b0;
display: inline-block;
line-height: 40px;
}
.top_bar span{
color: #424242;
}
.top_bar a:hover{
color: #fff;
}
</style>
</head>
<body>
<div class="top_bar">
<a href="#">小米商城</a>
<span>|</span>
<a href="#">MIUI</a>
<span>|</span>
<a href="#">IoT</a>
<span>|</span>
<a href="#">云服务</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>display属性</title>
<style type="text/css">
div{
background-color:red;
width: 200px;
height: 200px;
/*元素隐藏*/
display: none;
}
a,span{
background-color: green;
width: 100px;
height: 40px;
display: inline-block;
/* text-align: center; 水平居中
line-height= height 控制文本垂直居中
*/
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>我是一个块</div>
<span>MJJ</span>
<a href="#">小猿圈</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>元素分类</title>
<style type="text/css">
div{
background-color: red;
width: 200px;
height: 200px;
}
p{
background-color: green;
}
a,span{
font-size: 30px;
background-color: purple;
width: 300px;
height: 300px;
}
input{
width: 300px;
height: 50px;
}
img{
width: 100px;
}
</style>
</head>
<body>
<!-- 1 块级元素（div,p,h,table,form,ul,ol,）
（1）独自占一行
（2）可以设置宽高，如果不设置宽，默认是父标签的100%宽
2 行内元素(a,span,em,strong,label)
（1）行内元素在一行内显示
（2）不能设置宽高
3 行内块元素(img,input)
(1)在一行内显示
（2）可以设置宽高
-->
<div>MJJ</div>
<p>我是一个段落</p>
<h1>mjj</h1>
<ul>
<li>小米商城</li>
</ul>
<ul>
<li>小米商城</li>
</ul>
<a href="#">百度一下</a>
<span>小猿圈</span>
<strong></strong>
<em></em>
<input type="text" name="">
<input type="password" name="">
<img src="images/index02.jpeg">
<img src="images/index02.jpeg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框border</title>
<style type="text/css">
.border{
width: 200px;
height: 200px;
border: 1px solid red;
/*按照三要素来编写border*/
/*border-width: 4px 10px;
border-style: solid dotted double dashed;
border-color: green red purple yellow;*/
/*按照方向来编写border*/
/*
border-top-width: 4px;
border-top-color: red;
border-top-style: solid;
border-bottom-width: 4px;
border-bottom-color: red;
border-bottom-style: solid;
*/
}
input{
/*清除默认样式*/
/* border: none; */
/*或者*/
border: 0;
/*清除外线*/
outline: none;
}
.username{
width: 180px;
height: 40px;
font-size: 20px;
padding-left: 10px;
border: 1px solid #666;
}
.username:hover{
border: 1px solid orange;
}
</style>
</head>
<body>
<!-- 三要素： 粗细（width） 样式 (style) 颜色 (color)-->
<div class="border"></div>
<input type="text" name="" class="username">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距 margin</title>
<style type="text/css">
span{
background-color: red;
}
.xiongda{
margin-right: 20px;
}
.xionger{
margin-left: 100px;
}
div{
width: 200px;
height: 200px;
}
/*margin 垂直方向上 会出现外边距合并 外边距塌陷*/
.box1{
background-color: red;
margin-bottom: 30px;
}
.box2{
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 外边距： 一个盒子到另一个盒子的距离 -->
<span class="xiongda">熊大</span><span class="xionger">熊二</span>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding的讲解</title>
<style type="text/css">
div{
width: 180px;
height: 180px;
background-color: green;
/*padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 50px;*/
/* 上 下 左 右*/
/*padding: 20px;*/
/* 上下 左右*/
/*padding: 20px 40px;*/
/* 上 左右 下*/
/*padding: 20px 30px 40px;*/
/* 上 右 下 左*/
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<!-- 内边距： 盒子边框到内容的距离 -->
<div>mjj</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子居中(margin: 0 auto;)</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
.top_bar{
width: 100%;
height: 40px;
background-color: #333;
}
.container{
width: 1200px;
height: 100%;
background-color: red;
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top_bar">
<div class="container">
小米商城
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- 所有的html元素都可以看做盒子
它包括：外边距，边框，内填充（内边距），实际内容 -->
<meta charset="utf-8">
<title>盒子模型的属性</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
padding-top: 50px;
border: 3px solid green;
}
</style>
</head>
<body>
<!-- 内容 的宽高 内边距 外边距 边框-->
<div>MJJ</div>
</body>
</html>
/* body,p,ul,ol,dl,dt{ margin: 0; padding: 0; } ul,ol{ list-style: none; } input{ border: none; outline: none; } a{ text-decoration: none; } */ <html> <head> <meta charset="utf-8"> <title>清除HTML标签元素的默认样式</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <p>我是个段落</p> <p>我是个段落</p> <ul> <li>mjj</li> </ul> <input type="text" name=""> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字环绕</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
.box img{
float: left;
}
.box p{
width: 300px;
float: right;
}
</style>
</head>
<body>
<div class="box">
<img src="images/index02.jpeg">
<p>有一对男女正在吃晚餐那个女生一直问那个男生 :你爱不爱我 ?男生看了女生一眼又继续吃晚餐女生很生气又再问了一次: 你爱不爱我?男生终于说 :爱女生又问 :那你要怎么证明?忽然男生从口袋里拿了三十元出来 ,且问女生 :你有没有十元?女生拿了十元给了男生..男生就把四十元放在桌上过了一会儿 .. ...女生很生气的问男生 :你到底要不要证明你爱我啊男生说：我己经证明了啊!!! 四十摆在眼前！有一对男女正在吃晚餐那个女生一直问那个男生 :你爱不爱我 ?男生看了女生一眼又继续吃晚餐女生很生气又再问了一次: 你爱不爱我?男生终于说 :爱女生又问 :那你要怎么证明?忽然男生从口袋里拿了三十元出来 ,且问女生 :你有没有十元?</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFC的讲解</title>
<style type="text/css">
div.xiongda{
border: 2px solid orange;
overflow: hidden;
}
div.box1{
width: 200px;
height: 200px;
background-color: red;
/*margin-bottom: 30px;*/
float: left;
}
div.box2{
width: 500px;
height: 200px;
background-color: green;
/*overflow: hidden;*/
float: left;
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div class="xiongda">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
<!-- 一：BFC是什么东东
了解BFC前先一了解一下Box和Formatting Context
（1）B: BOX即盒子，页面的基本构成元素。分为 inline 、 block 和 inline-block三种类型的BOX
（2）FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
常见的 Formatting Context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)
BFC 定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float 元素重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
二：那些元素会生成BFC
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block
5.overflow不为visible -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动的现象</title>
<style type="text/css">
div{
/*width: 200px;*/
height: 200px;
color: #fff;
}
div.left{
background-color: red;
float: left;
}
div.right{
/*width: 300px;*/
background-color: green;
float: left;
}
div.center{
background-color: orange;
float: left;
}
</style>
</head>
<body>
<!-- 浮动的现象：
0.文字环绕
1.脱离了标准文档流
2.浮动元素互相贴靠
3.浮动元素有收缩现象
-->
<div class="left">左边的盒子</div>
<div class="right">右边的盒子</div>
<div class="center">右边的盒子</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动的方式</title>
<style type="text/css">
.top_bar{
border: 1px solid red;
}
.child1{
width: 200px;
height: 100px;
background-color: green;
float: left;
}
.child2{
width: 200px;
height: 100px;
background-color: orange;
float: right;
}
.header{
width: 100%;
height: 100px;
background-color: purple;
}
.clear{
clear: both;
}
p::after{
/*行内元素*/
content:'大帅哥';
}
.clearfix::after{
content:'';
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 1.给父元素设置固定高度
缺点： 使用不灵活 后期不易维护
应用：网页中盒子固定高度区域，比如固定的导航栏
2.内墙法（了解）
规则： 在最后一个浮动元素的后面加一个空的块级元素，并且设置该属性clear: both;
缺点： 结构冗余
重要：
3.伪元素（选择器）清除法
.clearfix::after{
content:'';
display: block;
clear: both;
}
4.overflow:hidden;
-->
<div class="top_bar clearfix">
<div class="child1">儿子</div>
<div class="child2">二儿子</div>
<!-- <div class="clear"></div> -->
</div>
<div class="header">
</div>
<p>
<a href="#">百度一下</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动的方式</title>
<style type="text/css">
.top_bar{
/*BFC区域 一条规则：计算BFC（块级盒子）的高度时，浮动元素也参与计算*/
/*形成BFC的条件： 除了overflow:visitable 的属性值*/
/*Block Formtting Context*/
overflow: hidden;
border: 1px solid red;
}
.child1{
width: 200px;
height: 100px;
background-color: green;
float: left;
}
.child2{
width: 200px;
height: 100px;
background-color: orange;
float: right;
}
.header{
width: 100%;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="top_bar clearfix">
<div class="child1">儿子</div>
<div class="child2">二儿子</div>
</div>
<div class="header">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动元素的破坏性</title>
<style type="text/css">
.top_bar{
border: 1px solid red;
}
.child1{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.child2{
width: 200px;
height: 200px;
background-color: orange;
float: right;
}
.header{
width: 100%;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="top_bar">
<div class="child1">儿子</div>
<div class="child2">二儿子</div>
</div>
<div class="header">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow</title>
<style type="text/css">
body{
overflow: scroll;
}
.box{
width: 300px;
height: 300px;
border: 1px solid red;
/*overflow: hidden;*/
/* overflow:auto */
overflow: scroll;
/* overflow: inherit; 继承 */
}
</style>
</head>
<body>
<div class="box">
小学生优秀作文《当领导的好处》
爸爸当上领导后，从来不敢多说话，生怕给别人带来压力。
上个月，下属小李叔叔到我家来玩，爸爸随口说了句：“家里没空调，比较热，见笑了。”
第二天，小李叔叔就带着师傅给我家安装了5匹的大空调！说什么也不肯收钱。
上个星期，爸爸看到老张伯伯在办公室吃午饭，菜中有煎鱼，随口说了句：“哎呦，真香！”
当天晚上，老张伯伯给我家送了一箱鲜鱼来。
有一天晚上，我跟爸爸遛弯儿，路上碰到单位的小王叔叔和他媳妇逛街，爸爸随口称赞道：“哎呦，小王，你媳妇真漂亮！”
第二天晚上，妈妈不在家，突然听到有人敲门。打开门一看，小王叔叔的媳妇站在门口，见到爸爸就满脸微笑说：“领导，我们家小王说嫂子不在家，让我来陪陪你！”
当领导真好，怪不得这么多人喜欢当领导！
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米导航</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
.site-header{
width: 100%;
height: 100px;
}
.container{
width: 1226px;
margin: 0 auto;
}
.site-header .nav-logo{
float: left;
margin-top: 25px;
}
.nav-logo a{
display: block;
width: 56px;
height: 56px;
}
.site-header .nav-list{
float: left;
width: 820px;
height: 88px;
padding: 12px 0 0 30px;
}
.nav-list li{
float: left;
font-size: 16px;
}
.nav-list li a{
display: block;
color: #333;
padding: 28px 10px 38px;
}
.clearfix::after{
content:'';
clear: both;
display: block;
}
.site-search{
float: right;
width: 296px;
margin-top: 25px;
}
.site-search form{
height: 50px;
width: 296px;
}
.site-search form input.content{
width: 223px;
height: 48px;
border: 1px solid #e0e0e0;
padding: 0 10px;
float: left;
}
.site-search form input.search{
width: 49px;
height: 50px;
border: 1px solid #e0e0e0;
float: left;
font-size: 20px;
margin-left: -1px;
}
</style>
</head>
<body>
<div class="site-header">
<div class="container clearfix">
<div class="nav-logo">
<a href="#">
<!-- 56*56 -->
<img src="images/logo.png">
</a>
</div>
<ul class="nav-list">
<li>
<a href="#">全部商品分类</a>
</li>
<li>
<a href="#">小米手机</a>
</li>
<li>
<a href="#">红米</a>
</li>
<li>
<a href="#">电视机</a>
</li>
<li>
<a href="#">笔记本</a>
</li>
<li>
<a href="#">家电</a>
</li>
<li>
<a href="#">新品</a>
</li>
<li>
<a href="#">路由器</a>
</li>
<li>
<a href="#">智能硬件</a>
</li>
<li>
<a href="#">服务</a>
</li>
<li>
<a href="#">社区</a>
</li>
</ul>
<div class="site-search">
<form>
<input type="text" name="" class="content">
<input type="submit" name="" value="🔍" class="search">
</form>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
</head>
<body>
<!-- position:static 静态
1.相对定位 position: relative;
2.绝对定位 position: absolute
3.固定定位 position:fixed
-->
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
body{
border: 1px solid orange;
}
div{
width: 200px;
height: 200px;
color: #fff;
}
div.one{
background-color: red;
position: relative;
top: 30px;
left: 100px;
}
div.two{
background-color: green;
position: relative;
top: 100px;
}
div.three{
background-color: blue;
}
</style>
</head>
<body>
<!-- 相对定位：
不脱离标准文档流，可以调整元素
参考点：
以原来的位置为参考点
-->
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
body{
border: 1px solid orange;
}
.grandfather{
position: relative;
top: 20px;
left: 30px;
border: 1px solid purple;
}
.father{
/*position: relative;
top: 30px;
left: 60px;*/
margin-left: 40px;
border: 1px solid black;
}
.one,.two,.three{
width: 200px;
height: 200px;
color: #fff;
}
div.one{
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
div.two{
width: 400px;
background-color: green;
/*position: absolute;*/
}
div.three{
background-color: blue;
}
</style>
</head>
<body>
<!-- 特点：
1.脱离标准文档流，不在页面占位置
2.层级提高，压盖现象
参考点：
相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面根元素左上角进行定位
网站中实战应用：“子绝父相”
-->
<div class="grandfather">
<div class="father">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米导航</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
.site-header{
width: 100%;
height: 100px;
}
.container{
width: 1226px;
margin: 0 auto;
}
.site-header .nav-logo{
float: left;
margin-top: 25px;
}
.nav-logo a{
display: block;
width: 56px;
height: 56px;
}
.site-header .nav-list{
float: left;
width: 820px;
height: 88px;
padding: 12px 0 0 30px;
}
.nav-list li{
float: left;
font-size: 16px;
}
.nav-list li a{
display: block;
color: #333;
padding: 28px 10px 38px;
}
.clearfix::after{
content:'';
clear: both;
display: block;
}
.site-search{
float: right;
width: 296px;
margin-top: 25px;
}
.site-search form{
position: relative;
height: 50px;
width: 296px;
}
.site-search form input.content{
width: 223px;
height: 48px;
border: 1px solid #e0e0e0;
padding: 0 10px;
float: left;
}
.site-search form input.search{
width: 49px;
height: 50px;
border: 1px solid #e0e0e0;
float: left;
font-size: 20px;
margin-left: -1px;
}
.search_hot_word{
position: absolute;
top: 14px;
right: 70px;
font-size: 14px;
}
.search_hot_word span{
background-color: #eee;
padding: 0 5px;
color: #757575;
}
.search_hot_word span:hover{
cursor: pointer;
background-color: #ff6700;
color: #fff;
}
</style>
</head>
<body>
<div class="site-header">
<div class="container clearfix">
<div class="nav-logo">
<a href="#">
<!-- 56*56 -->
<img src="images/logo.png">
</a>
</div>
<ul class="nav-list">
<li>
<a href="#">全部商品分类</a>
</li>
<li>
<a href="#">小米手机</a>
</li>
<li>
<a href="#">红米</a>
</li>
<li>
<a href="#">电视机</a>
</li>
<li>
<a href="#">笔记本</a>
</li>
<li>
<a href="#">家电</a>
</li>
<li>
<a href="#">新品</a>
</li>
<li>
<a href="#">路由器</a>
</li>
<li>
<a href="#">智能硬件</a>
</li>
<li>
<a href="#">服务</a>
</li>
<li>
<a href="#">社区</a>
</li>
</ul>
<div class="site-search">
<form>
<input type="text" name="" class="content">
<input type="submit" name="" value="🔍" class="search">
<div class="search_hot_word">
<span>小米9</span>
<span>小米9 SE</span>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
color: #fff;
}
#one{
position: fixed;
top: 80px;
left: 20px;
}
.outer{
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 200px;
}
</style>
</head>
<body>
<!-- 特点：
1.脱离标准文档流
2.一旦设置固定定位，在页面中滚动网页，固定不变
参考点：
以浏览器的左上角
应用：
小广告， 回到顶部 ，固定导航栏
-->
<div class="outer">
<p>
某女买了一件1000块的衣服。我质疑有点贵。
她说：“贵？我跟你说，这件衣服原价2000块，打了五折之后便宜一半，就等于我赚了1000块！虽然我花出去1000块，但同时我又赚回来了1000块，所以这件衣服相当于是白送，免费。你懂个屁！ ”
我被她的经济数学头脑震惊得久久说不出话来……
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。
老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。
午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！
周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？”
她脑抽地答了一句：“是他让我找你的”……
食堂里瞬间鸦雀无声！
此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<div class="box" id="one">One</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米侧方固定案例</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
.container{
width: 1226px;
height: 100%;
border: 1px solid orange;
margin: 0 auto;
}
.container p{
margin-bottom: 200px;
}
.site-bar{
position: fixed;
width: 27px;
bottom: 100px;
right: 50%;
margin-right: -640px;
}
.site-bar ul li{
width: 25px;
height: 39px;
border: 1px solid #f5f5f5;
background-color: #fff;
border-top: none;
}
.site-bar ul li.one{
border-top: 1px solid #f5f5f5;;
}
.site-bar ul li a{
display: block;
width: 20px;
height: 20px;
margin-left: 2px;
padding-top: 9px;
}
.site-bar ul li a img{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="container">
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
<p>
国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。 老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。 午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！ 周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？” 她脑抽地答了一句：“是他让我找你的”…… 食堂里瞬间鸦雀无声！ 此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
</p>
</div>
<div class="site-bar">
<ul>
<li class="one">
<a href="#">
<img src="images/1.png">
</a>
</li>
<li>
<a href="#">
<img src="images/2.png">
</a>
</li>
<li>
<a href="#">
<img src="images/3.png">
</a>
</li>
<li>
<a href="#">
<img src="images/4.png">
</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动和定位给行内元素带来的现象</title>
<style type="text/css">
span{
/*float: left;
background-color: red;
width: 200px;
height: 200px;*/
position: fixed;
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
<!-- 浮动，绝对定位，固定定位 脱离标准文档流 -->
<!-- 通过浮动（绝对定位，固定定位）都可以将行内标签转化为块级元素 -->
<span>我是行内</span>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index的讲解</title> <style type="text/css"> .a{ position: relative; width: 200px; height: 40px; background-color: #C3FFFB; border: 3px solid #3962FE; z-index: 1; } .b{ position: relative; width: 200px; height: 40px; background-color: #C3FFFB; border: 3px solid #3962FE; top: -30px; left: 50px; z-index: 10000; } .c{ position: relative; width: 200px; height: 40px; background-color: #C3FFFB; border: 3px solid #3962FE; top: -50px; left: 100px; /*z-index: auto;*/ z-index:10; } </style> </head> <body> <div style="position: relative;z-index: 15;"> <div class="a">A</div> </div> <div style="position: relative;z-index: 10;"> <div class="b">B</div> </div> <div class="c">C</div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style type="text/css">
.bg{
width: 1200px;
height: 1300px;
border: 3px solid green;
background-color: red;
background-image: url('images/scholl_flower.jpeg');
/*平铺方式*/
background-repeat:no-repeat;
/*背景定位*/
/*background-position: 50px 100px;*/
/*background-position-x: 100px;*/
/*background-position-y: 200px;*/
/*关键字：top right bottom left center*/
/*background-position: bottom right;*/
/*百分比： 0% 50% 100%*/
/*水平百分比的值 = 容器宽度的百分比- 背景图片宽度百分比*/
/*background-position: 30% 60%;*/
background-position: 270px 600px;
/*48 * 1194*/
background: url('images/taobao_list.png') no-repeat 0 0;
/*控制背景图大小 同比例缩小 */
background-size: 24px 597px;
}
</style>
</head>
<body>
<div class="bg">
<p style="color:#fff;">mjj的女盆友</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米背景定位案例</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
.bgi{
width: 100%;
height: 657px;
background: url('images/MIUI.png') no-repeat center top ;
/*
background-image: url('images/MIUI.png');
background-repeat: no-repeat;
background-position: center top;
*/
}
</style>
</head>
<body>
<div class="bgi">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Sprite雪碧图技术</title>
<style type="text/css">
div{
width: 24px;
height: 24px;
display: inline-block;
/*48 * 1194*/
background: url('images/taobao_list.png') no-repeat 0 0;
/*控制背景图大小 */
background-size: 24px 597px;
}
/* div.spirte{
background-position: 0 0;
}
div.sprite2{
background-position: 0 -44px;
}
div.sprite3{
background-position: 0 -88px;
}
div.sprite4{
background-position: 0 -132px;
} */
</style>
</head>
<body>
<div class="sprite"></div>
<div class="sprite2"></div>
<div class="sprite3"></div>
<div class="sprite4"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝列表导航案例</title>
<link rel="stylesheet" href="css/reset.css">
<style type="text/css">
.taobao_list{
float: left;
border-top: 1px solid #f4f4f4;
}
.taobao_list ul{
width: 292px;
overflow: hidden;
}
.taobao_list ul li{
float: left;
width: 71px;
height: 75px;
border: 1px solid #f4f4f4;
border-top-color: transparent;
border-left-color: transparent;
}
.taobao_list ul li a{
text-align: center;
display: block;
font-size: 12px;
color: #888;
}
.taobao_list ul li a span{
margin-top: 12px;
display: inline-block;
width: 24px;
height: 24px;
background: url('images/taobao_list.png') no-repeat 0 0;
background-size: 24px 597px;
}
.taobao_list ul li a span.span1{
background-position: 0 0;
}
.taobao_list ul li a span.span2{
background-position: 0 -88px;
}
.taobao_list ul li a span.span3{
background-position: 0 -44px;
}
</style>
</head>
<body>
<div class="taobao_list">
<ul>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span1"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span2"></span>
<p>旅行</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span3"></span>
<p>车险</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span4"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span5"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span6"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span7"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span8"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span9"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span10"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span11"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<!-- 背景图 -->
<span class="span12"></span>
<p>充话费</p>
</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性-制作圆与半圆</title>
<style type="text/css">
.box{
width: 200px;
height: 100px;
background-color:red;
/*border-radius: 3px 10px 30px;*/
/*border-top-left-radius: 15px 30px;*/
/* border-radius: 100px; */
border-radius: 50%;
/* border-top-left-radius: 100px;
border-top-right-radius: 100px; */
border: 5px solid purple;
}
</style>
</head>
<body>
<!-- border-radius
box-shadow
-->
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框阴影</title>
<style type="text/css">
.shadow{
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
background-color: purple;
/* box-shadow: 20px 20px 50px red; */
}
.shadow:hover{
top: -3px;
box-shadow: 0 15px 10px #f12c2c;
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ margin: 0; height: 100%; } .header{ width: 100%; height: 60px; line-height: 60px; text-align: center; background-color: #000; } .container{ width: 1200px; margin: 0 auto; } .header .container{ height: 60px; background-color: orange; } .wrap{ width: 100%; height: 100%; } .wrap .container{ height: 100%; } .wrap .left{ width: 10%; height: 100%; float: left; background-color: yellowgreen; } .wrap .right{ width: 10%; height: 100%; float: right; background-color: orchid; } .wrap .center{ height: 100%; background-color: purple; margin: 0 130px; } .footer{ width: 100%; height: 100px; } .footer .container{ height: 100px; background-color: green; } </style> </head> <body> <!--头部 --> <div class="header"> <div class="container">头部</div> </div> <!-- 主体内容 --> <div class="wrap"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"> mjj </div> </div> </div> <!-- 脚部 --> <div class="footer"> <div class="container"></div> </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行内元素水平垂直居中</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
color:#fff;
text-align: center;
/* 方式一 */
/*line-height: 200px;*/
/* 方式二 */
display: table-cell;
vertical-align: middle;
}
td{
width: 100px;
height: 100px;
border: 4px solid red;
background-color: royalblue;
/* text-align: center; */
vertical-align: middle;
}
</style>
</head>
<body>
<!-- <div class="box">
<span>MJJ</span>
</div> -->
<table>
<th>
<td>Mjj</td>
<td>jjj</td>
</th>
<th>
<td>hahah</td>
</th>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素水平垂直居中</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
/*position: relative;*/
display: table-cell;
vertical-align: middle;
text-align: center;
}
/*
.child{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
*/
.child{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
line-height: 100px;
}
td{
width: 100px;
height: 100px;
background: orange;
vertical-align: middle;
text-align: center;
}
span{
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
line-height: 50px;
}
.wrap{
width: 200px;
height: 200px;
background-color: purple;
position: relative;
}
.xiongda{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<!-- positon+margin -->
<div class="box">
<div class="child">我是中间</div>
</div>
<!-- display:table-cell; -->
<table>
<th>
<td>
<span>MJJ</span>
</td>
</th>
</table>
<!-- 纯定位 -->
<div class="wrap">
<div class="xiongda"></div>
</div>
</body>
</html>
作者：华王
博客：https://www.cnblogs.com/huahuawang/
浙公网安备 33010602011771号