css样式表（二）
css盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.div{ 100px;
height: 100px;
/*[margin 外边距]
margin属性值最多有四个：
①写一个值：四个方向的margin均为这个值
②写两个值：上、右两个方向，下默认=上，左默认=右
③写三个值：上、右、下三个方向，左默认=右
④写四个值：上、右、下、左四个方向
⑤写三个值：+auto：控件居右显示
margin：50px 30px 20px auto; 距离父右侧 30px
⑥margin：0 auto；设置控件在父容器中，水平居中
*/
/*给子元素加margin-top时，会导致父容器与子容器一下往下，处理方法之一是，给父容器加overflow: hidden;*/
margin:0px auto;
/*[border 边框]
border 有三个元素： 颜色color 样式style 宽度width
原则上，三个属性都需要手动制定（color不写，默认为黑色）
* */
/* [border-radius 圆角]
* 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
* 例如：border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
* 3、只写一个数，默认8个值均相等。
*/
border: 10px solid green;
/*[padding 边框]
使用方式，同margin①~④
注意：使用padding 会将整个控件撑大，使用时需要注意控件可视区域的实际大小
* */
/* [box-shadow 盒子阴影]
* 1、六个属性值，空格分割：
* x轴阴影距离：(必选) 可正可负，正——右移 负——左移
* y轴阴影距离：(必选) 可正可负，正——下移 负——上移
* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小
* 阴影颜色：(可选) 默认为黑色
* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
*/
box-shadow: 0px 0px 10px 0px white inset;
}
.div2{padding: 10px 10px 10px 10px;
100px;
height: 100px;
border: 10px solid green;}
.div3{ 270px; height: 200px;
border: 3px #F1B562 solid;
}
ul{list-style: none;
text-indent: -20px;
line-height: 30px;}
#span2{
margin-right: 16px;
}
</style>
</head>
<body>
<div class="div">
这是div中的文字</div>
<div class="div2">
这是div中的文字</div>
<br /> <br /><br /><br /><br /><br />
<div class="div3">
<p><img src="css/会员登录.jpg"60px" height="60px"></p>
<ul>
<li id="li1">用户名：<input type="text"></li>
<li id="li2"><span id="span2">密</span>码：<input type="password" /></li>
<li><input type="submit" name="li3" id="li3" value="登录" /></li>
</ul>
</div>
</body>
</html>
图片如下：
案例练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
150px;
height:450px;}
li {float: left;
12px;
height: 30px;
line-height: 30px;
list-style: none;
}
#div2{ 120px;
height: 60px;
margin: 0px auto;
border-bottom: 2px #B3B3B3 solid;}
#li2{white-space: nowrap;
height: 50px; 55px;line-height: 10px;
margin-top: 5px;color: #B3B3B3;
}
#li1{background: url(css/3-13-练习.png);
background-repeat: no-repeat;
55px;height: 60px;
background-position: -90px 5px;
}
p{color: black;}
#div3{font-size: 12px;
}
</style>
</head>
<body>
<div id="div1">
<h4>主题活动</h4>
<div id="div2">
<div id="div3">
<li id="li1"></li>
<li id="li2"><p>显示秒杀</p>限时秒杀</li>
</div>
</div>
<div id="div2">
<div id="div3">
<li id="li1"></li>
<li id="li2"><p>显示秒杀</p>限时秒杀</li>
</div>
</div>
<div id="div2">
<div id="div3">
<li id="li1"></li>
<li id="li2"><p>显示秒杀</p>限时秒杀</li>
</div>
</div>
<div id="div2">
<div id="div3">
<li id="li1"></li>
<li id="li2"><p>显示秒杀</p>限时秒杀</li>
</div>
</div>
<div id="div2">
<div id="div3">
<li id="li1"></li>
<li id="li2"><p>显示秒杀</p>限时秒杀</li>
</div>
</div><div id="div2">
<div id="div3">
<li id="li1"></li>
<li id="li2"><p>显示秒杀</p>限时秒杀</li>
</div>
</div>
</div>
</body>
</html>
图如下：
案例-02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{height: 200px;
200px;border: 6px #FF8C00 solid;}
#img1{border-radius: 53px 0px;}
#img2{border-radius: 103px 100px;}
#img3{height: 0px;
1px;
padding: 50px;
border: 50px #F3C17E solid;
border-radius:100px;}
</style>
</head>
<body>
<img id="img1" src="css/3-13-猫.jpg"/>
<img id='img2' src="css/3-13-猫.jpg"/>
<img id='img3' src=""/>
</body>
</html>
图如下：
阴影：
解析课后练习
图如下：
代码如下：
01-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{ 800px;
height:80px;
color: white;}
div div .li{float: right;
100px;
margin: 20px 6px;
text-align: center;
line-height: 40px;
list-style: none;
border: 2px solid #8B9CBC;
font-weight: bold;}
.div2{float: left;line-height:30px;text-indent: 40px;}
</style>
</head>
<body>
<div class="div1">
<div class="div2"> <h1>搞机派</h1></div>
<div><ul>
<li class="li">双卡双待</li>
<li class="li">后置双摄像</li>
<li class="li">拍照神器</li>
<li class="li">快速充电</li>
<li class="li">金属机身</li>
</ul></div>
</div>
</body>
</html>
02-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>保养心得</title>
<style type="text/css">
#div1{ 410px;
height: 450px;
overflow: hidden;}
#div2{ 390px;
margin:30px 20px;
border-bottom: 2px #DDDDDD solid;
}
#div2 span{color: red;}
#div3{float: right
}
#div4{
height: 380px;
410px;
overflow: hidden;}
#div5{border-bottom: 2px #DDDDDD solid;
390px;height: 50px;
overflow: hidden;
}
#div5 ul {list-style: none;
260px;
margin-left: 5px;
overflow: hidden;
}
#div5 ul #li1{
74px;
float: left;
}
#div5 ul #li2{float: left;
150px;margin-left: 5px ;
}
#div5:hover{
border-left: 2px #FF0000 solid;
color: #FF0000;
388px;}
#div5:hover #li1{border-bottom: 2px #FF0000 solid;
}
#div5:hover #li2{border-bottom: 2px #FF0000 solid;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<span id="span">保养心得</span>
<div id="div3">
MORE+
</div>
</div>
<div id="div4">
<div id="div5">
<ul>
<li id="li1">2016.03.22</li>
<li id="li2">燃油粗滤器定期防水</li>
</ul>
</div>
<div id="div5">
<ul>
<li id="li1">2016.03.22</li>
<li id="li2">燃油粗滤器定期防水</li>
</ul>
</div>
<div id="div5">
<ul>
<li id="li1">2016.03.22</li>
<li id="li2">燃油粗滤器定期防水</li>
</ul>
</div>
<div id="div5">
<ul>
<li id="li1">2016.03.22</li>
<li id="li2">燃油粗滤器定期防水</li>
</ul>
</div>
<div id="div5">
<ul>
<li id="li1">2016.03.22</li>
<li id="li2">燃油粗滤器定期防水</li>
</ul>
</div>
<div id="div5">
<ul>
<li id="li1">2016.03.22</li>
<li id="li2">燃油粗滤器定期防水</li>
</ul>
</div>
<div id="div5">
<ul>
<li id="li1">2016.03.22</li>
<li id="li2">燃油粗滤器定期防水</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
03-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{ 800px;height: 800px;overflow: hidden;}
.b{ 200px;height: 400px;margin-left: 205px;margin-top: 5px;float: left;}
.c{ 200px;height: 400px;margin-top: 5px;float: left;}
.d{ 190px;height: 200px;;margin-top: 5px;float: left;}
.e{ 190px;height: 200px;float: left;}
.f{ 400px;height: 390px;float: left;margin-left: 205px;float: left}
.g{ 190px;height: 200px;float: left;}
.h{ 190px;height: 190px;float: left;}
</style>
</head>
<body><div class="a">
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
</div>
</body>
</html>
学习新知识
css样式表（二）：
/*[border-image 图片边框]
* 1、十个属性：
* ① 图片路径：url()
* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
* 写的时候，不能带px单位
* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
* 写的时候，必须带px单位
* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
*
* 2、属性值写法：border-image: ① ②/③px ④;
* 第②部分可以只写1个、2个、3个，判断方式同margin
*/
新知识-
3-14-CSS样式表（三）
/*[相对定位relative]
* 1.使用position：relativw；设置元素为相对定位的元素
* 2.定位机制：
* ①相对于自己原来文档流中的位置定位，当不制定TOP等定位值时，不会改变元素位置
* ②相对定位元素，仍会站间距原有文档流中的位置，而不会释放。
* 3.使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
*/
/*[absolute绝对定位]
* 1、使用position：absolute；这是元素为绝对定位元素
* 2、定位机制：
* ①相对于第一个非static的祖先元素（即使用了relative/absolute/fixed定位的祖先元素）进行定位；
* ②如果祖先元素均为定制，相对于浏览器浏览器左上角定位；
* ③使用absolute的元素，会从文档六中完全删除，原有控件释放不再占有
*/
/*[固定定位fixed]
* 1、position：fixed；是一种特殊的绝对定位，夫荣妻贵无妨使用relative锁住
* 2、定位机制：永远相对于浏览器定位
*/
/*[z-indexs 属性]
* 1.作用：设置定位元素的Z轴层叠顺序
* 2.使用要求： ①必须是定位元素才能使用。relative/absolute/fixed
* ②使用z-index需要考虑父容器的约束。
如果父容器为z-inex，则子容器的z-index可以不受父容器的约束；
如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准（在同一父容器的不同子元素，仍可以通过的自己的z-index调整层叠关系）
* 3.z-index：auto & z-index：0的异同
* ①z-index：auto为默认值，与z-index：0处于同一层面
* ②z-index：auto，不会约束子元素的z-index层次，而z-index：0，会约束子元素必须与福元素处于同一平面
* 4.z-index相同（处于同一平面的定位元素）的层叠关系：后来者居上
* */
新知识：
display属性 - none： 隐藏元素，元素所占空间释放
- block ：设为块级元素
- inline ：设为内联元素（行级元素）
- inline-block ：设为内联块级元素（本身为行级元素，但是具有会计元素所特有的各种属性，比如，宽、高 、text-align等）
课后作业：
新知识：
display属性 - none： 隐藏元素，元素所占空间释放
- block ：设为块级元素
- inline ：设为内联元素（行级元素）
- inline-block ：设为内联块级元素（本身为行级元素，但是具有会计元素所特有的各种属性，比如，宽、高 、text-align等）
学习新知识：
一、过渡、变换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*transform定义变换
* 常用变换：translate 平移
* scale缩放
* rotale定义旋转(Z轴 2D平面转 x-翻转 y-翻转)
* transform可同时进行多种变换，多种变换之间空格分隔
* 例如：transform：scale（1.8,3.0） translatey（0px）
*transform-origin：定义变形起点
* 可选值：left/center/tight left/center/tight
* 或者，直接写X Y 轴坐标点
* 例如：transform：rotate（180deg）：
* transform-origin：right bottom；
* 表示，绕左下角，旋转180度
*/
/*transtion属性：定义过渡
* ⒈参与过渡的属性，可以单独制定某个CSS属性，也可以all/none
* ⒉过渡开始到过渡结束时间： .3S .5S
* ⒊过渡的样式行数常选 ease
* ⒋过渡开始前的延迟时间，可以省略。
*transition 属性可以同时定义多个属性，用逗号分隔
* transition：标签 .3s ease（由快到慢的样式）
*
*/
#div1{ 300px;
height: 300px;
overflow: hidden;
}
#div1 img{ 100px;
height: 100px;
transition: all 3s ease;}
div:hover img{transform:scale(2) translate(40px,20px) rotateY(180deg);
transform-origin: left top}
</style>
</head>
<body>
<div id="div1">
<img src="css/3-13-猫.jpg">
</div>
</body>
</html>
二、动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{ 300px;
height: 300px;
-webkit-animation: mymymy 5s ease 3s infinite}
/*CSS3 动画的使用
1.声明一个动画（关键帧）
@-webkit-keyframes name{
from{}
to{}
阶段：
⒈.每个阶段必须用百分比表示，从0%到100%
⒉.起点必须设置即0%到100%或者from和to
2、在CSS选择器中，使用Animation动画属性，调用声明好的关键帧
【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)
Animation-duration 动画持续时间
Animtaion-timing-function动画速度曲线 常选ease
Animtaion-delay 动画延迟时间
Animation-iteration-count 播放次数，默认为1，无限次Infinite
Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）
* animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s……
*/
@-webkit-keyframes mymymy{
0%{}
25%{}
50%{ line-height: 1.75;"> 75%{background-color: whitesmoke}
100%{ line-height: 1.75;"> }
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
开始我的制作网页之旅：
临摹宾之郎guanwang
官网：
我做的：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用心做好没口槟榔_宾之郎</title>
<link rel="stylesheet" href="css/head.css" />
<link rel="stylesheet" href="css/section.css"/>
<link rel="icon" href="img/icon.jpg" />
</head>
<body>
<!--
Head部分
-->
<header id="head">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="inside">
<div class="logo"></div>
<nav class="nav">
<li class="first">
<a href="#">首页</a>
</li>
<li>
<a href="#">走进宾之郎</a>
<ul>
<li>公司概况</li>
<li>发展历程</li>
<li>发展历程</li>
<li>发展历程</li>
<li>发展历程</li>
<li>发展历程</li>
<li>发展历程</li>
<li>发展历程</li>
</ul>
</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>
</nav>
<ul class="icons">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="bg_right"></div>
</div>
</header>
<section id="banner">
<video src="img/binzhiliang1.mp4" autoplay="autoplay" class="video" >
您的浏览器不支持video标签
</video>
<div class="banner_cover">
<img src="img/video_text.png"/>
</div>
</section>
<section class="section">
<div class="wrap">
<div class="zi1">
<p>走进宾之郎</p> </div>
<div id="line1">
<div id="line2"></div>
</div>
<div class="zi2">
<p>湖南宾之郎食品科技有限公司位于湖南▪湘潭-九华经济技术开发区。是目前槟榔食品行业唯一一家实现全自动工艺生产流水线的现代化槟榔食品科技生产企业。</p>
</div>
<div class="tupian">
<div class="left-1">
<img class="img-da1" src="img/7e987b0c163a41eaa27b6fcea7747560.jpg"/>
<div class="left-1-1">
发展历程
</div>
</div>
<div class="left-2">
<div class="right1">
<img src="img/0b373cfdb3e64c13a9f0974d4eca6020.jpg"/> <div class="right1-1">
公司概况</div>
</div>
<div class="right1"> <img src="img/ae0d63505960476eb59817808cc97a84.jpg"/> <div>印象宾之郎</div> </div>
<div class="right1"><img src="img/9a070470f3f740329228f7f1675177e2.jpg"/> <div>品牌文化</div> </div>
<div class="right1"><img src="img/f1a37b83b9574edbb1d0f04e12075a7b.jpg"/> <div>建党工作</div> </div>
</div>
</div> </div>
</section>
</body>
</html>