python_13(前端—cs)
第1章 前端三大标准：
1.1 三大标准介绍
1.2 html标签一览表
第2章 结构标准 html
2.1 html结构
2.2 html常用标签
2.2.1 h1-h6
2.2.2 span
2.2.3 span 高级用例
2.2.4 div
2.2.5 span
2.3 导入图片
2.3.1 <a href="#"> 显示超链接
第3章 style
3.1 margin
3.2 设置banner区域
3.3 外边距设置
3.4 设置板式style
3.5 设置边框样式
3.6 继承
第4章 仿照小米（练习）
4.1 设置外边框距离和字体
4.2 设置内边框距离及banner
4.3 设置导航栏的背景色
4.4 高级选择器
4.5 text-decoration
第5章 flot
5.1 浮动特性
5.2 浮动
5.3 导航栏左移
5.4 编辑购物车
5.5 导航栏调试
5.6 li元素横向排布
5.7 组合选择器
5.8 list-style：none;
第6章 浮动产生的问题
6.1 浮动问题1
6.2 浮动问题2
6.2.1 问题解释：
6.2.2 解决方案：
6.2.3 问题截图
6.2.4 解决方法四种:
6.3 修改盒模型
6.3.1 练习：
6.4 padding 46
6.5 double/ solid
6.6 border-radius
6.7 margin-top
第7章 写表单交互
7.1 登录页面（练习）
脑图链接https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c
第1章 前端三大标准：
1.1 三大标准介绍
n 结构标准： html （没有逻辑）
n 样式标准： css （没有逻辑）
n 行为标准： javascript
1.2 html标签一览表
|
标准 |
作用位置 |
标签种类 |
用途 |
注释 |
|
html结构标签 |
head |
title |
显示网站的标题 |
|
|
meta |
提供有关网页的原信息 |
|
||
|
style |
定义内部样式表 |
|
||
|
link |
链接css资源文件，网站图标 |
|
||
|
script |
链接脚本js文件 |
|
||
|
body |
h1-h6 |
标题标签 |
|
|
|
p |
段落标签 |
|
||
|
ul |
无序列表标签 |
|
||
|
ol |
有序列表标签 |
|
||
|
div |
盒子标签 |
|
||
|
teble |
表格标签 |
|
||
|
from |
表单标签 |
|
||
|
img |
图片标签 |
|
||
|
br |
换行标签 |
|
||
|
hr |
分割线标签 |
|
||
|
|
空格字符 |
|
||
|
a |
超链接标签 |
|
||
|
span |
行内标签 |
|
||
|
button |
|
|
||
|
概念 |
行内标签 |
apan,a |
在一行内显示；不能设置宽高 |
|
|
行内块 |
img input |
也属于行内标签，在一行内显示，可以设置宽高 |
||
|
块级标签 |
div h1-h6,ul,li |
独占一行，可以设置宽高，不设置集成父亲100% |
||
|
标准文档流 |
UI设计前端稿件，任意提地方来画，按照一定规则来作站 |
|||
第2章 结构标准 html
主要是包含语义化的标签
标签均为闭合标签
标签样式:html + tab ctl+/ 注释
2.1 html结构
例：
<!DOCTYPE html> è类型
<html lang="en"> è可翻译
<head> è内容头部
<meta charset="UTF-8"> è字符集
<title>学习html</title>è浏览器显示名称
</head>
<body> è内容文本
<!--<html>注释样式</html>--> è注释方式
开始前端第一课，不断学习，让自己优秀！è文本主体
</body>
</html>
输出：
2.2 html常用标签
参考：https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c
n 块及标签：独占一行的标签 h1-h6,div，display：block
独占一行的标签：h1-h6,div
可以设置宽高，默认它的宽度时父亲的100%
n 行内标签：一行内显示的标签 span a，display：inline;display:inline-block
在一行内显示的标签：span a
不能设置宽高，如果不设置默认是字体的大小
n 行内块标签
在一行内显示，可以设置宽高
2.2.1 h1-h6
解释：文本大小
特点：独占一行
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习html</title>
</head>
<body>
<!--<html>注释样式</html>-->
<h1>开始前端第一课，不断学习，让自己优秀！</h1>
<h2>开始前端第一课，不断学习，让自己优秀！</h2>
<h3>开始前端第一课，不断学习，让自己优秀！</h3>
<h4>开始前端第一课，不断学习，让自己优秀！</h4>
<h5>开始前端第一课，不断学习，让自己优秀！</h5>
<h6>开始前端第一课，不断学习，让自己优秀！</h6>
开始前端第一课，不断学习，让自己优秀！
</body>
</html>
输出：
2.2.2 span
解释：小跨域的标签，在一行显示
<body>
<!--<html>注释样式</html>-->
<h1>开始前端第一课，不断学习，让自己优秀！</h1>
<h2>开始前端第一课，不断学习，让自己优秀！</h2>
<h3>开始前端第一课，不断学习，让自己优秀！</h3>
<h4>开始前端第一课，不断学习，让自己优秀！</h4>
<h5>开始前端第一课，不断学习，让自己优秀！</h5>
<h6>开始前端第一课，不断学习，让自己优秀！</h6>
开始前端第一课，不断学习，让自己优秀！
<span>让自己优秀</span>
</body>
</html>
输出
2.2.3 span 高级用例
<!DOCTYPE html>
<html lang="en">
<style>
.gaibian{
color:gold;
}
</style>
<head>
<meta charset="UTF-8">
<title>学习html</title>
</head>
<body>
<!--<html>注释样式</html>-->
开始前端第一课，不断学习，让自己优秀！
<span class="gaibian">让自己优秀</span>
</body>
</html>
输出：
2.2.4 div
解释：division 分割，块区域
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>学习style</title>
</head>
<body>
<div class="top">
<!--<div class="container">-->
top 黑色区域
<!--</div>-->
</div>
</body>
</html>
存在默认margin外边框8px
2.2.5 span
解释：行内标签；实例添加菜单分割线
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单栏</title>
</head>
<body>
<div class="container">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
</div>
</body>
</html>
输出：
2.3 导入图片
2.3.1 <a href="#"> 显示超链接
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片导入</title>
</head>
<body>
<div class="box">
<span>学习过程</span>
<a href="#">
<img src="./01.jpg" alt="学习" width="400">
</a>
<img src="./01.jpg" alt="学习" width="400">
</div>
</body>
</html>
输出：
第3章 style
3.1 margin
解释：margin的意思是元素的外边距区域值，即该元素外面要留白的距离。它的值可以设置为三种，一种是使用数值，例如：30px，还有一种是使用百分比（相对父元素的百分比），以及第三种：auto。
例：
.container{
width: 1226px;
height: 100%;
/*两个值： 上下 左右*/
/*三个值： 上 左右 下*/
/*四个值： 上 右 下 左*/
/*一个值： */
margin: 0 auto;
}
3.2 设置banner区域
解释：设置banner区域的规格12226，是为了用户体验更好
方法：
n 为每个div增加一个container
n container设置方法
列：
<!DOCTYPE html>
<html lang="en">
<style>
body{
/*让外边框距离为0*/
margin: 0;
}
.top{
width: 100% ;
height: 40px;
background-color: black;
color: #fff;
/*让文本水平居中*/
text-align: center;
/*让文本垂直居中*/
line-height: 40px;
}
.header{
width: 100%;
height: 100px;
background-color: red;
}
.content{
width: 100%;
/*height: 2000px;*/
background-color: mediumpurple;
}
.footer{
width:100%;
height: 400px;
background-color: grey;
}
/*.hei{*/
/*width: 100px;*/
/*height: 40px;*/
/*background-color: red;*/
/*overflow: hidden;*/
/*}*/
.container{
width: 1226px;
height: 100%;
background-color: transparent; è设置背景透明
/*让盒子水平居中*/
margin-left: auto;
margin-right: auto;
}
</style>
<head>
<meta charset="UTF-8">
<title>学习style</title>
</head>
<body>
<div class="top">
<div class="container">
top 黑色区域
</div>
</div>
<div class="header">
<div class="container">
导航区域
</div>
</div>
<div class="content">
<div class="container">
主体内容区域
</div>
</div>
<div class="footer">
<div class="container">
脚后跟
</div>
</div>
</body>
</html>
输出
3.3 外边距设置
解释：屏幕左上角为00点是坐标起始点
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
选择器: 基础选择器 和高级选择器
标签选择器
*/
html{
/*css的继承 只有个别的属性 color font-xxx text-xxx line-**/
color: #fff;
font-size: 14px;
/*text-align: center;*/
}
body{
margin: 0;
}
.top{
width: 100% ;
height: 40px;
background-color: black;
color: #fff;
/*让文本水平居中*/
/*text-align: center;*/
line-height: 40px;
}
.header{
width: 100%;
height: 100px;
background-color: red;
}
.content{
width: 100%;
/*height: 2000px;*/
background-color: mediumpurple;
}
.footer{
width:100%;
height: 400px;
background-color: grey;
}
/*.hei{*/
/*width: 100px;*/
/*height: 40px;*/
/*background-color: red;*/
/*overflow: hidden;*/
/*}*/
.container{
width: 1226px;
height: 100%;
/*background-color: transparent;*/
/*让盒子水平居中*/
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!--
1.独占一行的标签：h1~h6,div
2.在一行内显示的标签：span
-->
<div class="top">
<div class="container">
top黑色区域
</div>
</div>
<div class="header">
<div class="container">
导航区域
</div>
</div>
<div class="content">
<div class="container">
主体内容区域
</div>
</div>
<div class="footer">
<div class="container">
脚后跟
</div>
</div>
</body>
</html>
输出：
默认margin：8px
3.4 设置板式style
<style>
body{
/*让外边框距离为0*/
margin: 0;
}
.top{
width: 100% ;
height: 40px;
background-color: black;
color: #fff;
/*让文本水平居中*/
text-align: center;
/*让文本垂直居中*/
line-height: 40px;
}
</style>
输出：
3.5 设置边框样式
解释：16进制表示（000是黑色 fff是白色）
设置宽高及背景色
.container{
width: 1226px;
height: 100%;
/*background-color: transparent;*/
/*让盒子水平居中*/
margin-left: auto;
margin-right: auto;
}
水平垂直居中
body{
margin: 0; è 清除外部边框
}
.top{
width: 100%; è宽适应屏幕
height: 40px; è 高40
background-color: black; è背景色黑色
color: #fff; è 字体颜色白色
/*让文本水平居中*/
text-align: center;
/*让文本垂直居中*/
line-height: 40px
}
3.6 继承
解释：html标签中的样式，会自动继承给全局元素
html{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
font-size: 14px;
}
body,ul{
margin: 0;
padding: 0;
}
第4章 仿照小米（练习）
4.1 设置外边框距离和字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单栏</title>
<style type="text/css">
html{
font-size: 14px;
}
body{
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
</div>
</div>
</body>
</html>
输出
4.2 设置内边框距离及banner
设置边框距离方式：
.container{
width: 1226px;
height: 100%;
/*两个值： 上下 左右*/
/*三个值： 上 左右 下*/
/*四个值： 上 右 下 左*/
/*一个值： */
margin: 0 auto;
}
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单栏</title>
<style type="text/css">
.container{
width: 1226px;
height:100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
</div>
</div>
</body>
</html>
输出：
4.3 设置导航栏的背景色
注意：a标签的颜色并不能继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单栏</title>
<style type="text/css">
html{
font-size: 14px;
}
body{
margin: 0;
}
.top{ è设置背景色及行高
idth: 100%;
height: 40px;
background-color: #333;
line-height: 40px;
}
.container{ è设置中心banner及高度
width: 1226px;
height:100%;
margin: 0 auto;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="top">
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
</div>
</div>
</div>
</body>
</html>
输出：
4.4 高级选择器
解释：设置分割线的距离，加空格表示后代继承
代码：
/*高级选择器 后代选择器*/
.top a{
color: #b0b0b0;
}
.top .sep{
color: #424242;
margin: 0 6px;
}
输出
4.5 清除下划线text-decoration
代码
a{
text-decoration: none;
}
第5章 flot
5.1 浮动特性
n 浮动可以使元素脱离文档流，不占位置
n 浮动会使元素提升层级
n 浮动可以使块元素在一行排列，不设置宽高的时候，可以使元素适应内容
n 浮动可以使行内元素支持宽高
n 浮动可以是元素脱离文档流，它可以是元素并排显示，
1.有贴边现象
2.有收缩现象（块元素转换成行内元素）
3.只要盒子浮动了，不管是行内标签还是块级标签，可以任意设置宽高，但是遵循要浮动一起浮动要不一起不浮动的原则。
5.2 浮动
代码
<body>
<div class="top">
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
</div>
</div>
</div>
<div>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</body>
输出：
5.3 导航栏左移
代码：
/*.top-info{*/ è浮动到最左边
/*float:left;*/
/*}*/
</style>
</head>
<body>
<div class="top">
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
</div>
输出
并且区域也自动变成合适距离
代码
………
.top-login{
float:right; è右浮动
margin-right: 20px; è右边距
width: 200px; è宽度
height: 40px;è行高
}
</style>
…….
<div>
<div class="top-login">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
输出：
5.4 编辑购物车
代码：
<style type="text/css">
.top-cart{
float: right;
color: red;
}
</style>
……
<div>
<div class="top-cart">购物车</div>
<div class="top-login">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">消息通知</a>
</div>
………
</div>
输出：
设置浮动区块
代码
}
body,ul{
margin: 0;
padding: 0;
}
</style>
….
<div class="content">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
5.5 导航栏调试
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
font-size: 14px;
}
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.top{
width: 100%;
height: 40px;
background-color: #333;
line-height: 40px;
/*color: #b0b0b0;*/
}
.container{
width: 1226px;
height: 100%;
/*两个值： 上下 左右*/
/*三个值： 上 左右 下*/
/*四个值： 上 右 下 左*/
/*一个值： */
margin: 0 auto;
}
/*高级选择器 后代选择器*/
.top a{
color: #b0b0b0;
}
.top .sep{
color: #424242;
margin: 0 6px;
}
.top-info{
float:left;
}
.top-cart{
float: right;
color: red;
}
.top-login{
float:right;
margin-right: 20px;
width: 200px;
height: 40px;
}
.content {
width: 100%;
}
.content ul li{
float: left;
width: 25%;
height: 300px;
background-color: grey;
}
/*.ttt{*/
/*float:left;*/
/*width: 100px;*/
/*height: 100px;*/
/*line-height: 100px;*/
/*}*/
</style>
</head>
<body>
<!--
1.独占一行的标签：h1~h6,div
2.在一行内显示的标签：span a
-->
<div class="top">
<div class="container">
<div class="top-info">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">loT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">金融</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
<a href="#">小爱开放平台</a>
<span class="sep">|</span>
<a href="#">政企服务</a>
</div>
<div class="top-cart">购物车</div>
<div class="top-login">
<a href="#">登陆</a>
<span class="sep">|</span>
<a href="#">注册</a>
<span class="sep">|</span>
<a href="#">消息通知</a>
</div>
</div>
</div>
<div class="content">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<!--<span class="ttt">个哈哈哈哈</span>-->
</body>
</html>
输出：
5.6 li元素横向排布
代码：
………
.container ul li{
float: left;
}
</style>
……
<div class="content">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
5.7 组合选择器
body,ul{
margin: 0;
padding: 0;
}
解释:表示body和ul组合选中
5.8 list-style：none;
代码：
<style type="text/css">
html{
font-size: 14px;
}
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
<div class="content">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
第6章 浮动产生的问题
6.1 浮动问题1
ul的子元素必须是li
<div class="content">
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
6.2 浮动问题2
6.2.1 问题解释：
在页面布局中，一般情况父元素的高度不是设置的，通过子元素来填充它的高度，但是子元素设置浮动之后，不会撑开父元素的高度，因为子元素不占位置
6.2.2 解决方案：
n 给父盒子设置固定高度
缺点：不够灵活
n 给附送元素最后一个子元素添加一个空的块元素，且该元素不浮动，设置clear：both
缺点：结构冗余，无缘无故添加了一个块级元素
n 官方写法：建议这样写给父盒子设置
.wrap:after{visbility:hidden:both;display:block;c ontent*.*;height:0}
n 给父元素添加owerflow:hidden 推荐使用
6.2.3 问题截图
浮动上移问题如下：
下图可见子元素并不在li盒子的下面显示：
下图可见：可见1、2、3、4 四个li高度不为零，但ul高度为零，证明并没有撑起ul.
原始代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>li标签的用法</title>
<style type="text/css">
html{
font-size: 14px;
}
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.container{
width: 1226px;
height: 100%;
margin: 0 auto;
}
.content {
height: 100%;
margin: 0 auto;
}
body,ul{
margin:0;
padding: 0;
}
.content ul .item{
float: left;
width: 25%;
height: 100px;
background-color: blueviolet;
}
.uuu{
width: 100px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="container">
<ul>
<!--<ul class="clearfix"> -->
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<!--<li class="clearfix"></li>-->
</ul>
<!--<div class="clearfix"></div>-->
</div>
</div>
<div class="uuu"></div>
<span class="ttt">个哈哈哈哈</span>
</body>
</html>
6.2.4 解决方法四种:
1）例：给父盒子设置固定高度(和写小米的顶部top栏一样)，不实用,只适合万年不变导航栏的写法
代码：
.content {
width: 1226px;
height: 50px;
background-color: yellow;
/*height: 100%;*/
margin: 0 auto;
}
</style>
输出：
2）给附属元素最后一个子元素添加一个空的块元素，且该元素不浮动，设置clear：both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>li标签的用法</title>
<style type="text/css">
html{
font-size: 14px;
}
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.container{
width: 1226px;
height: 100%;
margin: 0 auto;
}
.content {
height: 100%;
margin: 0 auto;
}
body,ul{
margin:0;
padding: 0;
}
.content ul .item{
float: left;
width: 25%;
height: 100px;
background-color: blueviolet;
}
.uuu{
width: 100px;
height: 400px;
background-color: red;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="content">
<div class="container">
<ul>
<!--<ul class="clearfix"> -->
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<!--<div class="clearfix"></div>--> è放在li的下面即可，放里面和外面都行
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="uuu"></div>
<span class="ttt">个哈哈哈哈</span>
</body>
</html>
3）伪元素清除法：推荐使用
解释：原理其实就是后面加个元素，将元素变成块并隐藏）
代码：
}
.clearfix:after{
content: '.'; è在content块下追加一个"."元素
clear: both; è清空追加后的盒子
display: block;è将追加后的“.”元素变成块
visibility: hidden; è隐藏块
height: 0;è将隐藏后的块高度设置为0
}
</style>
</head>
<body>
<div class="content">
<div class="container">
<ul class="clearfix">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
</div>
</div>
<div class="uuu"></div>
<span class="ttt">个哈哈哈哈</span>
</body>
</html>
输出：
4）给父元素添加owerflow:hidden 推荐使用
解释：方法参数是清除多余浮动内容，简单方便实用
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>li标签的用法</title>
<style type="text/css">
html{
font-size: 14px;
}
body,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.container{
width: 1226px;
height: 100%;
margin: 0 auto;
}
.content {
height: 100%;
margin: 0 auto;
}
body,ul{
margin:0;
padding: 0;
}
.content ul .item{
float: left;
width: 25%;
height: 100px;
background-color: blueviolet;
}
.uuu{
width: 100px;
height: 400px;
background-color: red;
}
ul{
overflow: hidden;
}
</style>
</head>
<body>
<div class="content">
<div class="container">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
</div>
</div>
<div class="uuu"></div>
<span class="ttt">个哈哈哈哈</span>
</body>
</html>
输出：
6.3 修改盒模型
解释: 重要作用于每个盒子之间的距离调整，及盒子中的内容格式调整
作用：/*如果保持盒模型不变，加padding，就要减内容的宽高*/
6.3.1 练习：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 180px;
height: 180px;
background-color: green;
/*padding: 20px;*/
padding-top: 20px; è
padding-left: 20px;
/*border: 1px double red;*/
/*如果保持盒模型不变，加padding，就要减内容的宽高*/
border-radius: 5px ;
/*margin垂直方向会出现塌陷问题，避免问题的问题只设置一个标准文档流的盒子的垂直方向的margin*/
margin-bottom: 100px;
/*盒子的宽度= 内容的宽度+ 2*padding + 2*border*/
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box">alex</div>
<div class="box2">wusir</div>
</body>
</html>
6.4 padding
解释：margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）
参数：
padding: 20px; 以内边框焦点处
/*padding-top: 20px; */ 以内边上上边处
/*padding-left: 20px;*/ 以内边框左边处
例：
padding:20px;
<style>
.box{
width: 180px;
height: 180px;
background-color: green;
padding: 20px;
padding:100px
6.5 double/ solid
解释：double增加边框
solid 实心展示
参数：border: 1px double red;
border: 1px solid red;
例：
.box{
width: 180px;
height: 180px;
background-color: green;
padding: 20px;
border: 1px double red;
输出
6.6 border-radius
解释：设置圆角一般5就可以
.box{
width: 180px;
height: 180px;
background-color: green;
padding: 20px;
border-radius: 5px ;
输出
6.7 margin-top
参考：
http://blog.51cto.com/dengshuangfu/1713937
第7章 写表单交互
7.1 登录页面（练习）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
/**{*/
/*padding: 0;*/
/*margin: 0;*/
/*}*/
.reg{
width: 720px;
height: 400px;
/*background-color: darkgrey;*/
}
.reg p{
margin-bottom: 20px;
width: 720px;
height: 42px;
}
.reg p label{
float:left;
height: 42px;
width: 65px;
margin-right: 10px;
line-height: 42px;
font-size: 14px;
color: #666;
font-weight: 700;
text-align: right;
}
.reg p .a{
border:0;
float:left;
/*font-size: 20px;*/
height: 42px;
width: 313px;
padding-left: 15px;
margin-right: 10px;
border: 1px solid #ddd;
font-size: 14px;
color: #666;
}
.reg p .b{
width: 156px;
}
.reg p .code{
border: none;
width: 145px;
height: 42px;
padding-left: 0;
text-align: center;
border-radius: 3px;
background: #f7f7f7;
border: 1px solid #ddd;
font-weight: 400;
}
.regs{
margin-left: 81px;
}
.regs a input{
width: 270px;
height: 42px;
border: none;
/*background-color:rgba(0,0,0,.6);*/
background-color: #3f89ec;
border-radius: 5px;
color: rgb(255,255,255);
}
</style>
</head>
<body>
<div class="reg">
<form action="">
<p>
<label for="user">用户名</label>
<input type="text" name="username" id="user" placeholder="请输入用户名" class="a">
</p>
<p>
<label for="phone">手机号</label>
<input type="text" name="phone" id="phone" class="a">
</p>
<p>
<label for="pwd">密码</label>
<input type="password" name="pwd" id="pwd" class="a">
</p>
<p>
<label for="verifyCode">验证码</label>
<input type="text" name="verifyCode" id="verifyCode" class="a b">
<input type="button" value="获取短信验证码" class="code">
</p>
<p class="regs">
<!--p只能放 span a 表单控件-->
<a href="#">
<input type="submit" value="注册">
</a>
</p>
</form>
</div>
</body>
</html>
输出：
