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>
输出：
python_13(前端—cs)的更多相关文章
- Gulp压缩前端CS,JS,图片文件
Gulp 基于Node.js的前端构建工具,Gulp有许多插件(这里是插件),使用Gulp可以实现前端代码的编译(sass.less).压缩.图片的压缩等,当然主要是前端工程化,不过我目前只是需要压缩 ...
- 一个初学者的辛酸路程-前端cs
一.主要内容 继续CSS 二.CSS 第一个: postion 网页有一类就是返回顶部,一直在右下角,还有打开一个网页顶部有个菜单,滚动滑轮,顶部永远在上面. position: fiexd == ...
- WPF listbox 实现动态滚轮下拉定位
private ObservableCollection<keymodel> _listlua; public ObservableCollection<keymodel> l ...
- aspx页面前端使用js 调用aspx.cs后台的方法,不回传
本次使用 Ajax.dll,AjaxPro.dll 两个类库 1.首先添加引用:Ajax.dll,AjaxPro.dll 文件在 Libiary 目录下 2.配置 WebConfig 属性 将 下面2 ...
- 前端系列-CS与BS的区别
现在的系统架构有B/S与C/S之分. C/S,即Client/Server(客户端/服务器).我们一般使用的软件架构都是C/S架构,比如各个系统版本中的软件如qq管家.腾讯qq.office等.C/S ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]
系列目录 前言 为了符合后面更新后的重构系统,本文于2016-10-31日修正一些截图,文字 我们有了一系列的解决方案,我们将动手搭建新系统吧. 后台系统没有多大的UI视觉,这次我们采用的是标准的左右 ...
- Asp.Net Core 项目实战之权限管理系统（1） 使用AdminLTE搭建前端
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- 【干货分享】前端面试知识点锦集02（CSS篇）——附答案
二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding ...
- 【原】作为前端需要了解的B/S架构
其实B/S架构是属于后台方面的东西,不过作为一个前端,也是需要了解一下滴 C/S架构简要介绍 在了解什么是B/S架构之前,我们有必要了解一下什么是C/S架构: C/S架构是第一种比较早的软件架构,主要 ...
随机推荐
- Client should know only resource URIs and that’s all.
REST Principles and Architectural Constraints – REST API Tutorial https://restfulapi.net/rest-archit ...
- hihocoder #1039 : 字符消除 ( 字符串处理类 ) 好久之前做的题目，具体的算法代码中阅读吧
#1039 : 字符消除 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最近在玩一个字符消除游戏.给定一个只包含大写字母"ABC"的字符串s,消 ...
- HUST1017 Exact cover —— Dancing Links 精确覆盖 模板题
题目链接:https://vjudge.net/problem/HUST-1017 1017 - Exact cover 时间限制:15秒 内存限制:128兆 自定评测 7673 次提交 3898 次 ...
- 包、修饰符、内部类、匿名内部类(java基础知识十)
1.package关键字的概述及作用 * A:为什么要有包 * 将字节码(.class)进行分类存放 * B:包的概述 * * C:包的作用 * 包名要定义在第一行, ...
- MYSQL进阶学习笔记四：MySQL存储过程之定义条件，处理过程及存储过程的管理！（视频序号：进阶_11，12)
知识点五:MySQL存储过程之定义条件和处理过程及存储过程的管理(11,12) 定义条件和处理: 条件的定义和处理可以用来定义在处理过程中遇到的问题时相应的处理步骤. DECLARE CONTINUE ...
- iOS NSString拼接字符串
NSString* str_C; // 结果字符串NSString* str_A, str_B; //已存在的字符串,需要将str_A和str_B连接起来 //方法1 str_C = [NSStrin ...
- 随机生成50个字段的elasticsearch的测试程序输入
词典位置:https://raw.githubusercontent.com/jonbcard/scrabble-bot/master/src/dictionary.txt import json f ...
- open调用过程
1. 首先传到vfs的do_sys_open,在open.c中. long do_sys_open(int dfd, const char __user *filename, int flags, u ...
- 书写优雅的shell脚本（插曲）- /proc/${pid}/status
Linux中/proc/[pid]/status详细说明 博客分类: OS Linux多线程 [root@localhost ~]# cat /proc/self/status Name: cat ...
- UIButton常见属性和方法
一.创建,两种方法: 1. 常规的 initWithFrame UIButton *btn1 = [[UIButton alloc]initWithFrame:CGRectMake(10, 10, 8 ...