|
Css基本介绍
美化样式
Css样式分类
行内样式：<标签名style=“属性名:属性值;”></标签名>
内部样式：<style></style>
注意：<style><>/style>写在<head></head>里面。
外部样式：
外部样式(企业中推荐应用)：
1.在css文件夹下新建一个css文件 （放样式）
2.在head里面引用样式<link rel=“stylesheet” type=“text/css” href=“css文件地址”/>
 
Css样式的优先级
行内样式>内部样式>外部样式
Css选择器:用在内部样式或外部样式
- 标签选择器：
标签名（元素）{
css样式
}
- 类选择器：
1.给元素（标签）起一个类名
2.通过类选择器实现样式设置
.className{
css样式
}
在body里面用class=
  
- id选择器：
id名：唯一
#id名{
css样式
}
 
- 通配符选择器：
通配符：匹配页面中所有的标签，设置样式
5、群组选择器：
单一选择器,单一选择器{
css样式
}
//注意：这里的单一选择器就是上面所提到的四种选择器
 
6、后代选择器：
包含关系
祖先元素 后代元素{
css样式
}
 
7、子代选择器：
父子关系
父元素 >子元素{
css样式
}
 
Css选择器的优先级
 
Css高级
- 盒子模型：
盒子模型的概述：
 
html中所有的元素（标签）都是一个盒子
盒子模型的四要素：
内容：宽度和高度
内边距（padding）：边框与内容之间的间隙
边框：border
外边距（margin）：边框与其他元素边框之间的间隙
 
HTML元素的分类：
1.块状元素（display: block;）
独占一行的元素，排列方式：垂直
p h1-h6 table form div
如果不设置宽度，则与其父容器同宽
如果不设置高度，高度由内容(普通文档流)决定
设置宽高有效
2.行内元素（内联元素）(display: inline;)
不独占一行的元素，排列方式：横向
a font 文本格式化标签（em strong u） label span
如果不设置宽度和高度，宽高由内容决定
设置宽高无效
3.行内块元素(display: inline-block;)
不独占一行的元素，排列方式：横向
img input
如果不设置宽度和高度，宽高由内容决定
设置宽高有效
 
注意：元素属性display为该内容的显示方式，其中块状元素默认为block，行内元素默认为inline,行内块元素默认为block-inline。block和inline-block可以修改块内的宽和高，inline不可以，但可以将inline改为block 或inline-block来修改。
2、浮动
1、Css浮动的原理：
无语义标签
div--网页制作实现画块
span--方便局部设置样式
 
2、清除浮动：
CSS 中清除浮动的属性clear: both，clear 有 both/left/right/none/inherit 几个属性值，分别代表在元素左右两侧不允许出现浮动元素/左侧不允许出现浮动元素/右侧不允许出现浮动元素/不清除浮动/继承父元素的值。
设置了 clear: both 的元素不会跟浮动元素同行，并且会占据新的一整行，而不是根据内容来自动调整宽度。之所以会这样，要从 clear 的原理说起，clear 会为元素添加足够的空白空间，使到该元素的位置会放置在它前一个浮动元素之下，这跟增加元素外边距使到元素占据满行而强制换行的效果是一样的
3、浮动的案例分析：
列表标签：
无序列表：列表项之间是并列关系
ul:定义一个无序列表
li:定义一个列表项
type="设置列表样式
 
制作导航条：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style>
/*去掉浏览器的默认样式*/
*{
margin: 0;
padding: 0;
}
.nav{
height: 75px;
background-color: #12A480;
}
.nav ul{
width: 1400px;
height: 75px;
/*实现盒子居中*/
margin: auto;
}
.nav ul li{
/*去掉列表的样式*/
list-style: none;
float: left;
width: 140px;
}
.nav ul li a{
/*将a标签设置为块状元素*/
display: block;
width: 140px;
height: 75px;
/*实现文本左右居中*/
text-align: center;
/*实现文本垂直居中*/
line-height: 75px;
/*去掉下划线*/
text-decoration: none;
color: #ffffff;
font-size: 22px;
}
/*实现鼠标悬停*/
.nav ul li a:hover{
background-color: #077257;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<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="#">实训online</a></li>
<li><a href="#">职业性格测评</a></li>
</ul>
</div>
</body>
</html>
效果图：
3、定位
1、三种定位方式：
定位：所有的html元素都可以采用定位
相对定位（relative）：相对自身原先的位置（左上角）发生偏移，原先的位置保留
绝对定位(absolute):绝对定位的元素是不占据原先的位置，一旦设置偏移量后，是相对于设置了相对定位的祖先元素或body发生偏移
固定定位(fixed):绝对定位的元素是不占据原先的位置，一旦设置偏移量后，是相对于body发生偏移,该元素是不随滚动条滚动的
三种定位方式https://www.cnblogs.com/iceflorence/p/5798553.html
例如代码如下：
html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
body{
margin: 0;
}
.father{
width: 400px;
border: 1px solid #000;
/*设置盒子居中*/
margin: auto;
}
.son1{
width: 100px;
height: 100px;
background-color: #f00;
}
.son2{
width: 100px;
height: 100px;
background-color: #0f0;
/*相对定位*/
/*position: relative;
top: 100px;
left: 100px;*/
/*绝对定位*/
/*position: absolute;*/
/*top: 100px;
left: 100px;*/
/*right: 0;
bottom: 0;*/
position: fixed;
top:0;
right: 0;
}
.son3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</body>
</html>
3、相对定位和绝对定位配合使用：
div 与 span 的区别：http://www.divcss5.com/rumen/r79.shtml
举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位和绝对定位的配合比使用</title>
<style>
body,div,ul,li,img,a{
margin:0;
padding:0;
}
li{
list-style: none;
}
.div-skin {
width: 400px;
}
.div-skin li{
float: left;
position: relative;
}
.div-skin li:hover .mask{
display: block;
}
a{
color: goldenrod;
}
.mask{
width: 195px;
height: 70px;
display: inline-block;
background-color: rgba(0,0,0,0.5);
display: none;
position: absolute;
top: 0;
left: 0;
/*实现文字水平居中*/
text-align: center;
line-height: 70px;
}
</style>
</head>
<body>
<div class="div-skin">
<ul>
<li><a href="#"><img src="img/skin02.jpg" alt="skin02" /><span class="mask">皮肤一</span></a></li>
<li><a href="#"><img src="img/skin03.jpg" alt="skin03" /><span class="mask">皮肤二</span></a></li>
<li><a href="#"><img src="img/skin04.jpg" alt="skin04" /><span class="mask">皮肤三</span></a></li>
</ul>
</div>
</body>
</html>
 没有图片 展示不全。
搭架子：
头部和main代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>聚美注册页面</title>
<link rel="stylesheet" href="css/reset.css" />
<!--网页布局
1.技巧：从大到小 从上到下 从左到右
2.步骤
先将浏览器的默认样式重置
1）搭架子（先写html结构 ，再写样式）
2）实现细节
-->
<style>
.contain{
width: 1000px;
border: 1px solid #000;
/*实现盒子居中*/
margin: auto;
}
/*头部*/
.top-box{
width: 400px;
float: right;
margin-top: 25px;
}
.top-link{
display: inline-block;
width: 110px;
height: 32px;
background-image: url(img/header_corn_new_v2.png);
margin-left: 20px;
}
.flash{
/*背景图片定位：x轴的偏移量 y轴的偏移量*/
background-position: 0 -32px;
}
.shopping{
background-position: 0 -64px;
}
/*主体*/
.main{
height: 450px;
border: 1px solid #0f0;
}
.register-div{
width: 300px;
float: right;
padding: 20px;
/*设置盒子阴影：x轴偏移量 y轴偏移量 模糊距离 阴影颜色*/
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
.register-div h1{
font-weight: normal;
font-size: 24px;
float: left;
margin-bottom: 20px;
color: #F8296D;
}
.register-div a{
color: #F8296D;
}
.register-div span{
padding-top: 10px;
float: right;
}
.register-div li{
margin-top: 20px;
}
.txt{
width: 290px;
height: 38px;
border: 1px solid #ccc;
font-size: 16px;
padding-left: 5px;
}
.btn{
width: 295px;
height: 38px;
border: 1px solid #F8296D;
font-size: 16px;
color: #fff;
background-color: #F8296D;
}
.code-txt{
width: 150px;
padding-left: 5px;
margin-right: 15px;
}
.code-btn{
width: 120px;
}
.footer{
height: 90px;
border: 1px solid #00f;
}
</style>
</head>
<body>
<!--聚美网页-->
<div class="contain">
<!--头部-->
<div class="top">
<img src="img/logo_new_v1.jpg" width="165px" height="85px" alt="聚美logo"/>
<div class="top-box">
<a href="#" class="top-link code"></a>
<a href="#" class="top-link flash"></a>
<a href="#" class="top-link shopping"></a>
</div>
</div>
<!--主体-->
<div class="main">
<img src="img/signPic.jpg.png" width="422px" height="370px" alt="聚美广告"/>
<div class="register-div">
<h1>用户注册</h1>
<span>已有账号<a href="#">在此登录</a></span>
<form action="#" method="post">
<ul>
<li><input type="text" class="txt" placeholder="手机号"/></li>
<li>
<input type="text" class="txt code-txt" placeholder="短信验证码"/>
<input type="button" class="txt code-btn" value="获取验证码"/>
</li>
<li><input type="password" class="txt" placeholder="密码"/></li>
<li><input type="password" class="txt" placeholder="重复密码"/></li>
<li><input type="submit" class="btn" value="同意协议并注册"/></li>
<li><a href="#">《聚美优品用户协议》</a></li>
</ul>
</form>
</div>
</div>
<!--脚注-->
<div class="footer"></div>
</div>
</body>
</html>
| 
转播
