HTML5基础知识2
来源:互联网 发布:灰度共生矩阵14个特征 编辑:程序博客网 时间:2024/06/06 07:24
# 第二天课程
## 1.CSS布局..
- 默认情况下,所有的网页标签都在**标准流**布局中
从上到下,从左到右
- **脱离标准流**的方法有:
float 属性 ( 让指定的标签浮动到父标签的左边-left或者右边-right )
position 属性 和 left、right、top、bottom 属性值
### 1.Float 浮动属性
**Float:**
可以指定的**子标签浮动在父标签**的左边和右边
**注意:**所有的标签一旦脱离标准流, 标签的类型就会自动变成**行内-块级**标签(行内-块级:同一行内可以存在多个标签,并可以设计标签的宽和高)
**Float:** 属性的常用值有
- **left**:`脱离标准流`,浮动在父标签的最左边
- **right**:`脱离标准流`,浮动在父标签的最右边
**案例:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float属性</title>
<!--
Float:
可以让子标签浮动在父标签的左边和右边
注意:所有的标签一旦脱离标准流, 标签的类型就会自动变成行内-块级标签
-->
<style>
#main{
width:400px;
height:300px;
background-color:red;
}
.test1{
background-color:blue;
/*float浮动*/
float:left;
/*行内块级标签*/
width: 100px;
height:30px;
}
.test2{
background-color:plum;
/*float浮动*/
float:right;
}
.test3{
background-color:green;
}
li{
float: left;
/*display: inline-block;*/
list-style: none;
}
</style>
</head>
<body>
<div id="main">
<div class="test1">
左边
</div>
<div class="test3">标签流布局</div>
<div class="test2">
右边
</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
```
### 2.Position 定位属性
**属性值:**
**用法:**
**子绝父相** :在子标签指定绝对布局(absolute)在父标签指定相对布局(relative)
**案例:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-position</title>
<!--子绝父相-->
<style>
*{
margin: 0;
padding: 0;
}
#main{
background-color: red;
width: 300px;
height: 300px;
/*相对(只要这个不是static就行)*/
position: relative;
margin-top: 20px;
}
.test1 {
background-color: yellow;
/*每一个标签内部都会有一个position的属性*/
/*position: static;*/
/*绝对*/
position: absolute;
/*定位*/
left: 30px;
top: 40px;
}
.test2{
background-color: green;
}
.test3 {
background-color: yellow;
/*绝对*/
position: absolute;
/*定位*/
bottom: 0px;
right: 0px;
}
.top{
background-color: purple;
/*相对于浏览器定位*/
position: fixed;
top: 0px;
left: 30px;
right: 30px;
}
.bottom{
background-color: blue;
/*相对于浏览器定位*/
position: fixed;
bottom: 0px;
left: 30px;
right: 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="test1">
定位1
</div>
<div class="test2">
定位2
</div>
<div class="test3">
定位3
</div>
</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</body>
</html>
```
## 2.标签的居中..
### 2.1水平居中
- **行内标签**和**行内-块级标签**水平居中
在父标签中设计:`text-align:center; ` 属性。是对**整个标签**水平居中
- **块级标签**水平居中
1.在父标签中设计:text-align:center; 属性。 是对子标签中的**内容(文字..)**水平居中
2.在自身标签中设计:`margin : 0px auto ; ` 属性。是对**整个块级标签**水平居中
**案例:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-水平居中</title>
<style>
#main{
width: 500px;
height: 400px;
background-color: red;
/*行内标签居中*/
text-align: center;
}
.test1{
background-color: yellow;
}
.test2{
background-color: blue;
width: 200px;
/*块级标签居中*/
/*margin-left: 150px;*/
margin: 0 auto;
}
.test3{
background-color: plum;
/*行内块级标签居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<button class="test3"> 行内-块级标签</button>
<p class="test2">块级标签</p>
<span class="test1">行内标签代表</span>
</div>
</body>
</html>
```
### 2.2垂直居中
- **行内标签**和**行内-块级标签**垂直居中
在父标签中设计:`line-heigth:xx px; ` 属性。是对**整个标签**水平居中
- **块级标签**垂直居中
1.在父亲标签中设计:`line-heigth:xx px;` 属性。 仅仅使**文字** 在**父标签**垂直居中
2.在自己标签中设计:`line-heigth:xx px; ` 属性。 仅仅使**文字**在**自己标签**垂直居中
**3.定位**
1.`子绝父相` ;
2.在子标签中设计相对`left:50% ; top:50% ;` ;
3.对子标签进行平移`transform:translate(-50% , -50%)`
**案例:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-水平居中和垂直居中</title>
<style>
#main{
width: 500px;
height: 400px;
background-color: red;
/*行内标签居中*/
text-align: center;
/*垂直居中,设计行高*/
line-height: 400px;
position: relative;
}
.test1{
background-color: yellow;
}
.test2{
background-color: blue;
width: 200px;
/*块级标签居中*/
/*margin-left: 150px;*/
margin: 0 auto;
height: 200px;
/*垂直居中,设计行高*/
line-height: 200px;
/*垂直居中,通过定位*/
position: absolute;
/*top: 100px;*/
/*left: 150px;*/
top:50%;
left: 50%;
transform:translate(-50% , -50%);
}
.test3{
background-color: plum;
/*行内块级标签居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<!--<button class="test3"> 行内块级标签</button>-->
<p class="test2">块级标签</p>
<!--<span class="test1">
行内标签代表
</span>-->
</div>
</body>
</html>
```
## 3.百度首页..
### 3.1新建一个项目(百度首页)
### 3.2引入外部样式
### 3.3盖房子(html)
糯米 新闻 hao123 地图 视频 贴吧 登录 设置 更多产品 9
!
#### 3中间内容和结构
#### 4尾部内容和结构
### 3.4装修房子(CSS)
#### 1.头部样式
- 默认设计
```css
/*默认*/
*{
margin: 0;
padding: 0;
}
```
- 头部子标签向右对齐
```css
#top{
/*头部子标签向右对齐*/
text-align: right;
}
```
- 设计上下外边框(margin)
```css
#top{
/*设计上下外边框*/
margin-top: 20px;
margin-bottom: 15px;
}
```
- 设计文字的样式(间距 , 颜色,粗细,字体,大小)
```css
#top a{
margin-right: 8px;
color: black;
/*粗细*/
font-weight: 300;
/*字体*/
font-family: Arial;
font-size: 15px;
}
#top a.no-weight{
/*粗细*/
font-weight: 100;
}
```
- 设计更多产品的样式(颜色,背景,内去除下划线,内边距)
```css
#top a.more-product{
color: white;
background-color: blue;
/*去除下划线*/
text-decoration: none;
/*内边距*/
padding:4px;
}
```
#### 2.搜索框的样式
- 设计百度Logo图片的大小
```css
/*logo*/
#middle .img-logo img{
width: 270px;
height: 129px;
}
```
- Logo水平居中
```css
#middle .img-logo{
/*logo水平居中*/
text-align: center;
}
```
- 设计整个搜索框的大小和水平居中
```css
#middle .ser{
background-color: red;
width: 600px;
height: 35px;
/*块级标签水平居中*/
margin: 0 auto;
margin-bottom: 30px;
}
```
- 给搜索框中的input标签添加浮动
```css
#middle .ser .int{
float: left;
}
#middle .ser .btn{
float: left;
}
```
- 设计编辑输入框的大小和改变盒子大小默认的计算方式等
```css
#middle .ser .int{
float: left;
width: 500px;
height: 100%;
/*添加盒子的边框*/
border: 1px solid #dddddd;
/*改变盒子的大小的计算方式*/
box-sizing: border-box;
font-size: 15px;
padding-left: 15px;
}
```
- 给input标签添加伪类选着器
```css
#middle .ser .int:hover{
/*border: 1px solid blue;*/
}
#middle .ser .int:focus{
/*去除外边线*/
outline: none;
/*重新添加外边线*/
border: 1px solid #33dddd;
}
```
- 设计百度一下的宽高,背景颜色和字体大小
```css
#middle .ser .btn{
float: left;
border: 0;
width: 100px;
height:100%;
color: white;
font-size: 16px;
background-color: #3385ff;
}
```
#### 3.图片样式
- 设计图片的大小和间距
```css
#middle .img-ser img{
width: 130px;
/*图片间距*/
margin: 0 5px;
margin-bottom: 10px;
}
```
- 设计图片水平居中
```css
#middle .img-ser{
/*水平居中*/
text-align: center;
}
```
- 设计图片的圆角
```css
#middle .img-ser img{
...
border-radius: 8px;
}
```
- 设计图片的伪类(不透明)
```css
#middle .img-ser img:hover {
/*设计透明度,0是不透明 100是全透明*/
opacity: 0.5;
}
```
#### 4.尾部样式
- 设计尾部水平居中和上下间距
```css
/*尾部*/
#bottom{
margin-top: 60px;
margin-bottom: 50px;
/*水平居中*/
text-align: center;
}
#bottom .bottom-top{
margin-bottom: 8px;
}
```
- 设计所有的字体颜色
```css
#bottom p{
color: gray;
}
#bottom a{
color: gray;
}
```
- 设a标签之间的间距
```css
#bottom a{
...
margin: 0 6px;
}
```
#### 5.背景样式
- 给body添加背景
```
body{
/*添加背景*/
background: url("../image/bg.jpg");
}
```
- 给背景设计尺寸(cover 跟随变化)
```
body{
...
/*设计背景尺寸*/
background-size: cover;
}
```
- 更换百度logo图片
```
<!--百度LOGO-->
<div class="img-logo">
<img src="image/logo_white_ee663702.png" alt="百度logo">
</div>
```
- 修改头部的高度和背景
```
/*头部*/
#top{
/*头部子标签向右对齐*/
text-align: right;
/*设计上下外边框*/
/*margin-top: 20px;*/
margin-bottom: 15px;
/*头部高度和背景*/
height: 45px;
background-color: rgba(0,0,0,0.4);
}
```
- 头部文字垂直居中和字体颜色
```
#top{
...
/*文字垂直居中*/
line-height:45px;
}
#top a{
...
color: white;
}
```
## 4.登陆界面..
### 4.1新建一个项目并引入样式
### 4.2盖房子(HTML)
#### 1.搭建整体框架
#### 2.头部内容和结构
#### 3.输入用户名和密码
#### 4.下次自动登陆和忘记密码
#### 5.登陆和注册
#### 6.尾部
### 4.3装修房子(CSS)
#### 1.设计背景样式
```css
/*默认配置*/
*{
margin: 0;
padding: 0;
}
body {
/*设计背景图片*/
background: url("../image/bg.jpg");
/*背景图片跟随缩放*/
background-size: cover;
}
```
#### 2.设计面板样式
- 设计面板背景颜色
```css
/*面板*/
#panel {
background-color: white;
}
```
- 改变面板标签类型为:行内块级标签
```css
/*面板*/
#panel {
...
/*改变标签类型*/
display: inline-block;
}
```
- 面板居中显示,面板的子标签靠左
```css
body {
...
/*面板居中*/
text-align: center;
}
/*面板*/
#panel {
...
/*靠左*/
text-align: left;
}
```
- 设计面板的上边距
```css
/*面板*/
#panel {
...
/*上边距*/
margin-top: 100px;
}
```
- 设计面板的内边距
```css
/*面板*/
#panel {
...
/*内边距*/
padding: 20px;
}
```
- 设计面板的圆角
```css
/*面板*/
#panel {
...
/*圆角*/
border-radius: 5px;
}
```
- 设计面板的快阴影
```css
/*面板*/
#panel {
...
/*块阴影效果: 0 0 代表是四周都要给阴影,70是阴影的范围*/
box-shadow: 0 0 70px white;
}
```
#### 3.面板头部样式
```css
#panel-top {
/*水平居中*/
text-align: center;
/*外边距*/
margin-bottom: 15px;
/*下边框*/
border-bottom: 1px solid #dddddd;
/*内边距*/
padding-bottom: 15px;
/*字体的颜色,h2会继承该字体颜色*/
color: gray;
}
```
#### 4.面板中间输入框样式
- 设计用户名与密码盒子之间的间距和高度
```css
#panel-center .user-pwd {
background-color: red;
/*用户与密码之间的间距*/
margin-bottom: 15px;
height: 38px;
}
```
- 定位用户名与密码左边的图片
```css
#panel-center .user-pwd {
...
/*定位:父相*/
position: relative;
}
#panel-center .user-pwd img{
/*定位:子绝*/
position: absolute;
left: 6px;
top:5px;
}
```
- 设计输入框的宽高
```css
#panel-center .user-pwd input{
width: 100%;
height:100%;
}
```
- 修改盒子默认大小的计算方式
```css
#panel-center .user-pwd input{
/*盒子大小的计算方式*/
box-sizing: border-box;
}
```
- 设计输入框内边距,圆角和边界
```css
#panel-center .user-pwd input{
padding-left: 38px;
border-radius: 3px;
border: 1px solid #dddddd;
}
```
- 设计输入框聚焦时样式
```css
#panel-center .user-pwd input:focus {
/*去掉外边框*/
outline: none;
/*外边框*/
border: 1px solid orange;
/*阴影效果*/
box-shadow: 0 0 5px orange;
}
```
#### 5.面板中间登陆与忘记密码样式
- 忘记密码右浮动,和该面板的下边距
```css
#setting .pull-rigth{
/**右浮动*/
float: right;
}
#setting{
/**下边距*/
margin-bottom: 10px;
}
```
- 统一字体颜色 ,去掉下划线和字体大小
```css
#setting a{
color: darkgrey;
/*去除下划线*/
text-decoration: none;
font-size: 13px;
}
```
#### 6.面板中间登陆样式
```css
#btn-login{
width: 100%;
height: 36px;
background-color: orange;
/*边框*/
border: 0px;
margin-bottom: 15px;
/*圆角*/
border-radius: 5px;
color: white;
font-size: 16px;
}
/*聚焦时*/
#btn-login:focus{
/*去除外边框*/
outline: none;
}
```
#### 7.面板中间注册样式
```
#reg{
/*水平居中*/
text-align: center;
margin-bottom: 15px;
}
#reg a{
/*去除下划线*/
text-decoration: none;
color: orange;
font-size: 15px;
}
```
#### 8.面板尾部样式
- 设计尾部面板和图片的高度
```
#panel-bottom{
height: 50px;
}
#panel-bottom img{
height: 40px;
}
```
- 设计文字垂直居中
```
#panel-bottom{
...
/*文字垂直居中*/
line-height: 50px;
}
```
- 设计图片垂直居中
```
#panel-bottom img{
....
/*图片垂直居中*/
vertical-align: middle;
}
```
## 5.宠物店..
#### 1.新建一个项目并引入样式
#### 2.搭建整体框架
#### 3.设计背景样式
```
*{
margin: 0;
padding: 0;
}
body{
/*设计背景,平铺效果*/
background: url("../image/pattern.gif");
}
```
#### 4.设计头部高度和背景
```
#top{
background-color: red;
height: 3px;
}
```
#### 5.实现头部导航栏的内容和结构
home about service gallery contact 5
#### 6.设计头部导航栏的样式
- 设计a标签的样式
```
a{
color: white;
/*去掉下划线*/
text-decoration: none;
}
```
- 清楚li标签的圆点
```
ul{
/*清楚圆点*/
list-style: none;
}
```
- 改变标签类型
```
#nav ul li{
/*改变标签类型*/
display: inline-block;
}
```
- 让标签居中
```
#nav{
/*让子标签居中*/
text-align: center;
}
```
- 设计a标签的宽高,字体大小,改变a标签的类型
```
#nav ul li a {
height: 40px;
width: 200px;
/*改变标签类型*/
display: inline-block;
font-size: 30px;
}
```
- 设计文字垂直居中
```
#nav ul li a {
...
/*垂直居中*/
line-height: 40px;
}
```
- 设计默认第一条item选中
1.改html布局 ,给第一个a标签添加一个class="selected"
```
<!--头部导航栏-->
<div id="nav">
<ul>
<!--添加一个-->
<li><a href="" class="selected">home</a></li>
<li><a href="">about</a></li>
<li><a href="">service</a></li>
<li><a href="">gallery</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
```
2.设计样式
```
#nav ul li a.selected {
background-color: white;
color: black;
}
```
- 给a标签添加伪类
```
#nav ul li a:hover{
background-color: white;
color: black;
}
```
- 设计a标签的外边距
```
#nav ul li a {
/*外边框*/
margin: 0 8px 8px 0;
}
```
#### 7.导入字体样式
css导入自定义字体 : http://blog.csdn.net/qq_17034925/article/details/53585153
```
/*导入字体*/
@font-face {
font-family: BebasNeue-webfont; /**字体的名称*/
src: url('../fonts/BebasNeue-webfont.ttf'); /**字体文件的位置*/
}
body{
/*应用字体*/
font-family: BebasNeue-webfont;
}
```
#### 8.实现中间列表内容和结构
#### 9.设计中间列表样式
- 修改love标签类型,背景颜色,宽度和重写父亲的字体
```
#content .love{
background-color: white;
/*该表标签类型*/
display: inline-block;
/*给图片宽度*/
width: 382px;
/*重新设计字体样式*/
font-family: sans-serif;
}
```
- 设计文字上下10px间距和首行缩进
```
#content .love p{
/*上下间距*/
margin: 10px 0;
/*首行缩进*/
text-indent: 28px;
}
```
- 设计read more的样式
```
#content .love button{
width: 120px;
height: 40px;
font-size: 23px;
color: #fff;
/*去除边框*/
border: 0;
/*设计背景*/
background-color: orange;
/*圆角*/
border-radius: 5px;
}
```
- 给read more 添加伪类
```
#content .love button:hover{
background-color: black;
color: white;
}
```
#### 10.实现多列表的内容和结构
复制多个item
#### 11.设计列表的样式
```
#content{
/*整个列表居中*/
text-align: center;
margin-top: 100px;
background-color: white;
}
#content .love{
...
/*重写父亲的属性*/
text-align: left;
/*设计盒子的间距*/
margin: 20px;
}
```
#### 12.实现底部的内容和结构
#### 12.设计底部的样式
```
#footer{
/*标签居中*/
text-align: center;
margin: 20px 0;
}
#footer ul li {
/*该表标签的类型*/
display: inline-block;
}
#footer ul li img{
/*图片之间的间距*/
margin: 5px 5px;
}
#footer ul li img:hover {
/*设计透明度*/
opacity: 0.5;
}
#footer h2{
color: white;
}
```
#### 13.响应性(自适应)布局
```
/*监听设备屏幕的最大值*/
@media screen and (max-width: 1092px){
/*如果屏幕设备的最大宽度等于1092px时,使用下面的样式*/
#nav ul li a {
width: 150px;
font-size: 25px;
}
}
/*监听设备屏幕的最大值*/
@media screen and (max-width: 860px){
/*如果屏幕设备的最大宽度等于860px时,使用下面的样式*/
#nav ul li a {
width: 90px;
font-size: 20px;
}
}
/*监听设备屏幕的最大值*/
@media screen and (max-width: 546px){
/*如果屏幕设备的最大宽度等于546px时,使用下面的样式*/
#nav ul li a {
width: 70px;
font-size: 15px;
}
#content{
margin-top: 60px;
}
#content .love{
width: 360px;
}
}
```
## 6.初识BootStrap
### 6.1什么是BootStarp
[Bootstrap](http://www.bootcss.com/)是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目
### 6.2项目集成BootStrap
### 6.3使用BootStrap
- 使用BootStrap中的样式控制button的样式
- 使用自己的样式控制button的样式
- 使用BootStrap 进度条 组件
- 使用BootStrap 中的文字图标 组件
## 8.总结:
1. CSS布局:
2. 标签的居中:
3. 百度首页:
4. 登陆界面:
5. 宠物店:
6. BootStrap入门:
## 1.CSS布局..
- 默认情况下,所有的网页标签都在**标准流**布局中
从上到下,从左到右
- **脱离标准流**的方法有:
float 属性 ( 让指定的标签浮动到父标签的左边-left或者右边-right )
position 属性 和 left、right、top、bottom 属性值
### 1.Float 浮动属性
**Float:**
可以指定的**子标签浮动在父标签**的左边和右边
**注意:**所有的标签一旦脱离标准流, 标签的类型就会自动变成**行内-块级**标签(行内-块级:同一行内可以存在多个标签,并可以设计标签的宽和高)
**Float:** 属性的常用值有
- **left**:`脱离标准流`,浮动在父标签的最左边
- **right**:`脱离标准流`,浮动在父标签的最右边
**案例:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float属性</title>
<!--
Float:
可以让子标签浮动在父标签的左边和右边
注意:所有的标签一旦脱离标准流, 标签的类型就会自动变成行内-块级标签
-->
<style>
#main{
width:400px;
height:300px;
background-color:red;
}
.test1{
background-color:blue;
/*float浮动*/
float:left;
/*行内块级标签*/
width: 100px;
height:30px;
}
.test2{
background-color:plum;
/*float浮动*/
float:right;
}
.test3{
background-color:green;
}
li{
float: left;
/*display: inline-block;*/
list-style: none;
}
</style>
</head>
<body>
<div id="main">
<div class="test1">
左边
</div>
<div class="test3">标签流布局</div>
<div class="test2">
右边
</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
```
### 2.Position 定位属性
**属性值:**
**用法:**
**子绝父相** :在子标签指定绝对布局(absolute)在父标签指定相对布局(relative)
**案例:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-position</title>
<!--子绝父相-->
<style>
*{
margin: 0;
padding: 0;
}
#main{
background-color: red;
width: 300px;
height: 300px;
/*相对(只要这个不是static就行)*/
position: relative;
margin-top: 20px;
}
.test1 {
background-color: yellow;
/*每一个标签内部都会有一个position的属性*/
/*position: static;*/
/*绝对*/
position: absolute;
/*定位*/
left: 30px;
top: 40px;
}
.test2{
background-color: green;
}
.test3 {
background-color: yellow;
/*绝对*/
position: absolute;
/*定位*/
bottom: 0px;
right: 0px;
}
.top{
background-color: purple;
/*相对于浏览器定位*/
position: fixed;
top: 0px;
left: 30px;
right: 30px;
}
.bottom{
background-color: blue;
/*相对于浏览器定位*/
position: fixed;
bottom: 0px;
left: 30px;
right: 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="test1">
定位1
</div>
<div class="test2">
定位2
</div>
<div class="test3">
定位3
</div>
</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</body>
</html>
```
## 2.标签的居中..
### 2.1水平居中
- **行内标签**和**行内-块级标签**水平居中
在父标签中设计:`text-align:center; ` 属性。是对**整个标签**水平居中
- **块级标签**水平居中
1.在父标签中设计:text-align:center; 属性。 是对子标签中的**内容(文字..)**水平居中
2.在自身标签中设计:`margin : 0px auto ; ` 属性。是对**整个块级标签**水平居中
**案例:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-水平居中</title>
<style>
#main{
width: 500px;
height: 400px;
background-color: red;
/*行内标签居中*/
text-align: center;
}
.test1{
background-color: yellow;
}
.test2{
background-color: blue;
width: 200px;
/*块级标签居中*/
/*margin-left: 150px;*/
margin: 0 auto;
}
.test3{
background-color: plum;
/*行内块级标签居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<button class="test3"> 行内-块级标签</button>
<p class="test2">块级标签</p>
<span class="test1">行内标签代表</span>
</div>
</body>
</html>
```
### 2.2垂直居中
- **行内标签**和**行内-块级标签**垂直居中
在父标签中设计:`line-heigth:xx px; ` 属性。是对**整个标签**水平居中
- **块级标签**垂直居中
1.在父亲标签中设计:`line-heigth:xx px;` 属性。 仅仅使**文字** 在**父标签**垂直居中
2.在自己标签中设计:`line-heigth:xx px; ` 属性。 仅仅使**文字**在**自己标签**垂直居中
**3.定位**
1.`子绝父相` ;
2.在子标签中设计相对`left:50% ; top:50% ;` ;
3.对子标签进行平移`transform:translate(-50% , -50%)`
**案例:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-水平居中和垂直居中</title>
<style>
#main{
width: 500px;
height: 400px;
background-color: red;
/*行内标签居中*/
text-align: center;
/*垂直居中,设计行高*/
line-height: 400px;
position: relative;
}
.test1{
background-color: yellow;
}
.test2{
background-color: blue;
width: 200px;
/*块级标签居中*/
/*margin-left: 150px;*/
margin: 0 auto;
height: 200px;
/*垂直居中,设计行高*/
line-height: 200px;
/*垂直居中,通过定位*/
position: absolute;
/*top: 100px;*/
/*left: 150px;*/
top:50%;
left: 50%;
transform:translate(-50% , -50%);
}
.test3{
background-color: plum;
/*行内块级标签居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<!--<button class="test3"> 行内块级标签</button>-->
<p class="test2">块级标签</p>
<!--<span class="test1">
行内标签代表
</span>-->
</div>
</body>
</html>
```
## 3.百度首页..
### 3.1新建一个项目(百度首页)
### 3.2引入外部样式
### 3.3盖房子(html)
#### 1.搭建整体框架
糯米 新闻 hao123 地图 视频 贴吧 登录 设置 更多产品 9
!
#### 3中间内容和结构
#### 4尾部内容和结构
### 3.4装修房子(CSS)
#### 1.头部样式
- 默认设计
```css
/*默认*/
*{
margin: 0;
padding: 0;
}
```
- 头部子标签向右对齐
```css
#top{
/*头部子标签向右对齐*/
text-align: right;
}
```
- 设计上下外边框(margin)
```css
#top{
/*设计上下外边框*/
margin-top: 20px;
margin-bottom: 15px;
}
```
- 设计文字的样式(间距 , 颜色,粗细,字体,大小)
```css
#top a{
margin-right: 8px;
color: black;
/*粗细*/
font-weight: 300;
/*字体*/
font-family: Arial;
font-size: 15px;
}
#top a.no-weight{
/*粗细*/
font-weight: 100;
}
```
- 设计更多产品的样式(颜色,背景,内去除下划线,内边距)
```css
#top a.more-product{
color: white;
background-color: blue;
/*去除下划线*/
text-decoration: none;
/*内边距*/
padding:4px;
}
```
#### 2.搜索框的样式
- 设计百度Logo图片的大小
```css
/*logo*/
#middle .img-logo img{
width: 270px;
height: 129px;
}
```
- Logo水平居中
```css
#middle .img-logo{
/*logo水平居中*/
text-align: center;
}
```
- 设计整个搜索框的大小和水平居中
```css
#middle .ser{
background-color: red;
width: 600px;
height: 35px;
/*块级标签水平居中*/
margin: 0 auto;
margin-bottom: 30px;
}
```
- 给搜索框中的input标签添加浮动
```css
#middle .ser .int{
float: left;
}
#middle .ser .btn{
float: left;
}
```
- 设计编辑输入框的大小和改变盒子大小默认的计算方式等
```css
#middle .ser .int{
float: left;
width: 500px;
height: 100%;
/*添加盒子的边框*/
border: 1px solid #dddddd;
/*改变盒子的大小的计算方式*/
box-sizing: border-box;
font-size: 15px;
padding-left: 15px;
}
```
- 给input标签添加伪类选着器
```css
#middle .ser .int:hover{
/*border: 1px solid blue;*/
}
#middle .ser .int:focus{
/*去除外边线*/
outline: none;
/*重新添加外边线*/
border: 1px solid #33dddd;
}
```
- 设计百度一下的宽高,背景颜色和字体大小
```css
#middle .ser .btn{
float: left;
border: 0;
width: 100px;
height:100%;
color: white;
font-size: 16px;
background-color: #3385ff;
}
```
#### 3.图片样式
- 设计图片的大小和间距
```css
#middle .img-ser img{
width: 130px;
/*图片间距*/
margin: 0 5px;
margin-bottom: 10px;
}
```
- 设计图片水平居中
```css
#middle .img-ser{
/*水平居中*/
text-align: center;
}
```
- 设计图片的圆角
```css
#middle .img-ser img{
...
border-radius: 8px;
}
```
- 设计图片的伪类(不透明)
```css
#middle .img-ser img:hover {
/*设计透明度,0是不透明 100是全透明*/
opacity: 0.5;
}
```
#### 4.尾部样式
- 设计尾部水平居中和上下间距
```css
/*尾部*/
#bottom{
margin-top: 60px;
margin-bottom: 50px;
/*水平居中*/
text-align: center;
}
#bottom .bottom-top{
margin-bottom: 8px;
}
```
- 设计所有的字体颜色
```css
#bottom p{
color: gray;
}
#bottom a{
color: gray;
}
```
- 设a标签之间的间距
```css
#bottom a{
...
margin: 0 6px;
}
```
#### 5.背景样式
- 给body添加背景
```
body{
/*添加背景*/
background: url("../image/bg.jpg");
}
```
- 给背景设计尺寸(cover 跟随变化)
```
body{
...
/*设计背景尺寸*/
background-size: cover;
}
```
- 更换百度logo图片
```
<!--百度LOGO-->
<div class="img-logo">
<img src="image/logo_white_ee663702.png" alt="百度logo">
</div>
```
- 修改头部的高度和背景
```
/*头部*/
#top{
/*头部子标签向右对齐*/
text-align: right;
/*设计上下外边框*/
/*margin-top: 20px;*/
margin-bottom: 15px;
/*头部高度和背景*/
height: 45px;
background-color: rgba(0,0,0,0.4);
}
```
- 头部文字垂直居中和字体颜色
```
#top{
...
/*文字垂直居中*/
line-height:45px;
}
#top a{
...
color: white;
}
```
## 4.登陆界面..
### 4.1新建一个项目并引入样式
### 4.2盖房子(HTML)
#### 1.搭建整体框架
#### 2.头部内容和结构
#### 3.输入用户名和密码
#### 4.下次自动登陆和忘记密码
#### 5.登陆和注册
#### 6.尾部
### 4.3装修房子(CSS)
#### 1.设计背景样式
```css
/*默认配置*/
*{
margin: 0;
padding: 0;
}
body {
/*设计背景图片*/
background: url("../image/bg.jpg");
/*背景图片跟随缩放*/
background-size: cover;
}
```
#### 2.设计面板样式
- 设计面板背景颜色
```css
/*面板*/
#panel {
background-color: white;
}
```
- 改变面板标签类型为:行内块级标签
```css
/*面板*/
#panel {
...
/*改变标签类型*/
display: inline-block;
}
```
- 面板居中显示,面板的子标签靠左
```css
body {
...
/*面板居中*/
text-align: center;
}
/*面板*/
#panel {
...
/*靠左*/
text-align: left;
}
```
- 设计面板的上边距
```css
/*面板*/
#panel {
...
/*上边距*/
margin-top: 100px;
}
```
- 设计面板的内边距
```css
/*面板*/
#panel {
...
/*内边距*/
padding: 20px;
}
```
- 设计面板的圆角
```css
/*面板*/
#panel {
...
/*圆角*/
border-radius: 5px;
}
```
- 设计面板的快阴影
```css
/*面板*/
#panel {
...
/*块阴影效果: 0 0 代表是四周都要给阴影,70是阴影的范围*/
box-shadow: 0 0 70px white;
}
```
#### 3.面板头部样式
```css
#panel-top {
/*水平居中*/
text-align: center;
/*外边距*/
margin-bottom: 15px;
/*下边框*/
border-bottom: 1px solid #dddddd;
/*内边距*/
padding-bottom: 15px;
/*字体的颜色,h2会继承该字体颜色*/
color: gray;
}
```
#### 4.面板中间输入框样式
- 设计用户名与密码盒子之间的间距和高度
```css
#panel-center .user-pwd {
background-color: red;
/*用户与密码之间的间距*/
margin-bottom: 15px;
height: 38px;
}
```
- 定位用户名与密码左边的图片
```css
#panel-center .user-pwd {
...
/*定位:父相*/
position: relative;
}
#panel-center .user-pwd img{
/*定位:子绝*/
position: absolute;
left: 6px;
top:5px;
}
```
- 设计输入框的宽高
```css
#panel-center .user-pwd input{
width: 100%;
height:100%;
}
```
- 修改盒子默认大小的计算方式
```css
#panel-center .user-pwd input{
/*盒子大小的计算方式*/
box-sizing: border-box;
}
```
- 设计输入框内边距,圆角和边界
```css
#panel-center .user-pwd input{
padding-left: 38px;
border-radius: 3px;
border: 1px solid #dddddd;
}
```
- 设计输入框聚焦时样式
```css
#panel-center .user-pwd input:focus {
/*去掉外边框*/
outline: none;
/*外边框*/
border: 1px solid orange;
/*阴影效果*/
box-shadow: 0 0 5px orange;
}
```
#### 5.面板中间登陆与忘记密码样式
- 忘记密码右浮动,和该面板的下边距
```css
#setting .pull-rigth{
/**右浮动*/
float: right;
}
#setting{
/**下边距*/
margin-bottom: 10px;
}
```
- 统一字体颜色 ,去掉下划线和字体大小
```css
#setting a{
color: darkgrey;
/*去除下划线*/
text-decoration: none;
font-size: 13px;
}
```
#### 6.面板中间登陆样式
```css
#btn-login{
width: 100%;
height: 36px;
background-color: orange;
/*边框*/
border: 0px;
margin-bottom: 15px;
/*圆角*/
border-radius: 5px;
color: white;
font-size: 16px;
}
/*聚焦时*/
#btn-login:focus{
/*去除外边框*/
outline: none;
}
```
#### 7.面板中间注册样式
```
#reg{
/*水平居中*/
text-align: center;
margin-bottom: 15px;
}
#reg a{
/*去除下划线*/
text-decoration: none;
color: orange;
font-size: 15px;
}
```
#### 8.面板尾部样式
- 设计尾部面板和图片的高度
```
#panel-bottom{
height: 50px;
}
#panel-bottom img{
height: 40px;
}
```
- 设计文字垂直居中
```
#panel-bottom{
...
/*文字垂直居中*/
line-height: 50px;
}
```
- 设计图片垂直居中
```
#panel-bottom img{
....
/*图片垂直居中*/
vertical-align: middle;
}
```
## 5.宠物店..
#### 1.新建一个项目并引入样式
#### 2.搭建整体框架
#### 3.设计背景样式
```
*{
margin: 0;
padding: 0;
}
body{
/*设计背景,平铺效果*/
background: url("../image/pattern.gif");
}
```
#### 4.设计头部高度和背景
```
#top{
background-color: red;
height: 3px;
}
```
#### 5.实现头部导航栏的内容和结构
home about service gallery contact 5
#### 6.设计头部导航栏的样式
- 设计a标签的样式
```
a{
color: white;
/*去掉下划线*/
text-decoration: none;
}
```
- 清楚li标签的圆点
```
ul{
/*清楚圆点*/
list-style: none;
}
```
- 改变标签类型
```
#nav ul li{
/*改变标签类型*/
display: inline-block;
}
```
- 让标签居中
```
#nav{
/*让子标签居中*/
text-align: center;
}
```
- 设计a标签的宽高,字体大小,改变a标签的类型
```
#nav ul li a {
height: 40px;
width: 200px;
/*改变标签类型*/
display: inline-block;
font-size: 30px;
}
```
- 设计文字垂直居中
```
#nav ul li a {
...
/*垂直居中*/
line-height: 40px;
}
```
- 设计默认第一条item选中
1.改html布局 ,给第一个a标签添加一个class="selected"
```
<!--头部导航栏-->
<div id="nav">
<ul>
<!--添加一个-->
<li><a href="" class="selected">home</a></li>
<li><a href="">about</a></li>
<li><a href="">service</a></li>
<li><a href="">gallery</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
```
2.设计样式
```
#nav ul li a.selected {
background-color: white;
color: black;
}
```
- 给a标签添加伪类
```
#nav ul li a:hover{
background-color: white;
color: black;
}
```
- 设计a标签的外边距
```
#nav ul li a {
/*外边框*/
margin: 0 8px 8px 0;
}
```
#### 7.导入字体样式
css导入自定义字体 : http://blog.csdn.net/qq_17034925/article/details/53585153
```
/*导入字体*/
@font-face {
font-family: BebasNeue-webfont; /**字体的名称*/
src: url('../fonts/BebasNeue-webfont.ttf'); /**字体文件的位置*/
}
body{
/*应用字体*/
font-family: BebasNeue-webfont;
}
```
#### 8.实现中间列表内容和结构
#### 9.设计中间列表样式
- 修改love标签类型,背景颜色,宽度和重写父亲的字体
```
#content .love{
background-color: white;
/*该表标签类型*/
display: inline-block;
/*给图片宽度*/
width: 382px;
/*重新设计字体样式*/
font-family: sans-serif;
}
```
- 设计文字上下10px间距和首行缩进
```
#content .love p{
/*上下间距*/
margin: 10px 0;
/*首行缩进*/
text-indent: 28px;
}
```
- 设计read more的样式
```
#content .love button{
width: 120px;
height: 40px;
font-size: 23px;
color: #fff;
/*去除边框*/
border: 0;
/*设计背景*/
background-color: orange;
/*圆角*/
border-radius: 5px;
}
```
- 给read more 添加伪类
```
#content .love button:hover{
background-color: black;
color: white;
}
```
#### 10.实现多列表的内容和结构
复制多个item
#### 11.设计列表的样式
```
#content{
/*整个列表居中*/
text-align: center;
margin-top: 100px;
background-color: white;
}
#content .love{
...
/*重写父亲的属性*/
text-align: left;
/*设计盒子的间距*/
margin: 20px;
}
```
#### 12.实现底部的内容和结构
#### 12.设计底部的样式
```
#footer{
/*标签居中*/
text-align: center;
margin: 20px 0;
}
#footer ul li {
/*该表标签的类型*/
display: inline-block;
}
#footer ul li img{
/*图片之间的间距*/
margin: 5px 5px;
}
#footer ul li img:hover {
/*设计透明度*/
opacity: 0.5;
}
#footer h2{
color: white;
}
```
#### 13.响应性(自适应)布局
```
/*监听设备屏幕的最大值*/
@media screen and (max-width: 1092px){
/*如果屏幕设备的最大宽度等于1092px时,使用下面的样式*/
#nav ul li a {
width: 150px;
font-size: 25px;
}
}
/*监听设备屏幕的最大值*/
@media screen and (max-width: 860px){
/*如果屏幕设备的最大宽度等于860px时,使用下面的样式*/
#nav ul li a {
width: 90px;
font-size: 20px;
}
}
/*监听设备屏幕的最大值*/
@media screen and (max-width: 546px){
/*如果屏幕设备的最大宽度等于546px时,使用下面的样式*/
#nav ul li a {
width: 70px;
font-size: 15px;
}
#content{
margin-top: 60px;
}
#content .love{
width: 360px;
}
}
```
## 6.初识BootStrap
### 6.1什么是BootStarp
[Bootstrap](http://www.bootcss.com/)是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目
### 6.2项目集成BootStrap
### 6.3使用BootStrap
- 使用BootStrap中的样式控制button的样式
- 使用自己的样式控制button的样式
- 使用BootStrap 进度条 组件
- 使用BootStrap 中的文字图标 组件
## 8.总结:
1. CSS布局:
2. 标签的居中:
3. 百度首页:
4. 登陆界面:
5. 宠物店:
6. BootStrap入门:
阅读全文
0 0
- HTML5基础知识2
- html5基础知识
- HTML5 基础知识
- html5基础知识
- html5基础知识
- HTML5 基础知识
- HTML5基础知识
- 【HTML5】基础知识
- HTML5基础知识
- html5基础知识
- html5基础知识
- HTML5基础知识
- HTML5基础知识
- html5基础知识
- HTML5基础知识
- HTML5基础知识
- HTML5的新特性--基础知识(2)
- html5 css3基础知识
- jstree刷新数据
- kafka exactly once 的实现原理解析
- iOS应用内部实现App Store评分功能
- 下一代区块链技术 | 硅谷线下活动
- 笔记本电脑i7和i5有什么区别
- HTML5基础知识2
- idea创建spring boot项目
- 深入理解javascript原型和闭包(13)-【作用域】和【上下文环境】
- WEB项目部署到服务器,验证码无法刷新
- Rosonblatt线性感知器
- LINTCODE——Number of Subsequences of Form a^i b^j c^k
- ucgui按键工作的流程
- RK3399(2)
- Android Studio 导入 Sweet-alert-dialog