HTML部分内容补充
1、form表单补充
<h1>多选框</h1>
<form action=""method="get">
<h2>choose your favourite fruit!</h2>
1、apple <input type="checkbox" name="fruit" value="apple">
2、orange <input type="checkbox" name="fruit" value="orange">
3、banana <input type="checkbox" name="fruit" value="banana">
<input type="submit">
</form>
<form action=""method="get">
<h2>choose your SEX!!!</h2>
male: <input type="radio" name="sex" value="male" checked="checked">
female: <input type="radio" name="sex" value="female">
<h2><input type="submit"></h2>
</form>
<!-- checked="checked"默认选中 -->
<h1>Province</h1>
<form action=""method="get">
<select name="Province">
<option>beijing</option>
<option>shanghai</option>
<option>guangzhou</option>
</select>
<input type="submit">
</form>
<!-- form表单中想要提交数据 必须检查数据名 和数据值的格式是否正确 -->
2、专业素养知识
主流浏览器及其内核
IE Firefox GoogleChrome Safari Opera 分别对应以下内核
trident Gecko webkit/blink webkit presto
CSS
cascading style sheet 层叠样式表
1、引入css
1、行间样式 在标签中加上style属性 在style属性中写css样式代码
2、页面级css 在html文件的头部代码中写上style标签 然后写css代码作用于标签
3、外部文件css 在html文件中的head标签中写上link标签 href中放css文件的路径
2、样式选择器选择器
- id选择器 一对一的
- class选择器 多对多的
- 标签选择器 选中页面中所有的这个标签
- 通配符选择器 选中页面中所有的标签
- 属性选择器 选中有这个属性的所有标签的
- 父子选择器 / 派生选择器 选择一个父元素里边的子元素 父子选择器用什么选择器写都可以 只要父子关系成立就行
- 直接子元素选择器 选中父级元素下面的直接一级的子元素
- 并列选择器 用多个限制条件选中一个元素 并且不加空格 就是并列选择器
- 分组选择器 同时选中多个标签 以逗号隔开 同时作用多个标签
3、权重
/* !important>行间样式>id选择器>class选择器=属性选择器>标签选择器>通配符选择器 */
/* 权重 权重之间的进制是256制的
!important Infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
*/
4、css常用属性
/* 调整字体大小属性 设置的是字体的高度*/
font-size: 30px;
/* 设置字体加粗属性 */
font-weight: bold;
/* 设置字体斜体 */
font-style:italic;
/* 设置字体包 */
font-family: Arial, Helvetica, sans-serif;
/* 设置字体颜色 */
color:red;
/* 给容器加上外边框 */
border:1px solid black;
/* 设置容器的高度 */
height: 30px;
/* 设置字体颜色 */
color:blue;
border:1px solid red;
/* 设置字体的对齐方式 */
text-align: center;
/* 设置高度 */
height: 30px;
/* 设置文本的垂直居中 */
line-height: 30px;
/* 首行缩进 1em=1 font-size;=30px*/
text-indent: 2em;
/* 设置文本的上划线 中划线 喝下划线 和去掉下划线和中划线 */
text-decoration: none;
/* 设置鼠标为其他的提示符 */
cursor: pointer;
5、伪类选择器
作用:当鼠标移到这个元素上面的时候元素发生变化
语法:任意标签后面加上:hover{}大括号里写鼠标移上去之后样式变化的代码
6、专业素养与常识
- 1、body 天生自带8px的margin
- 行级元素 feature:内容决定元素所占位置 不可以通过css改变宽高 span strong em a del
- 块级元素 feature:独占一行 可以通过css改变宽高 div p ul li ol form address
- 行级块元素 feature:行级块元素内容决定大小 可以通过css改变宽高 img
- 可以通过display改变元素的元素的特点
7、图片之间有4px的间距bug
由于图片是行级块元素所以也有inline属性 也就是常说的文字属性 他的特点之一就是分割的作用
用margin-left暴力解决这个bug可能会导致 代码压缩打包了之后上线图片效果和开发时不一样
建议直接把图片标签之间的回车和空格都去掉。
8、自定义标签
很多标签刚出生的时候样式不是我们想要的样子,其实我们可以通过css来定义成我们想要的样子,
例如ul一出生的大圆点可以用list-style:none;去掉,a标签的下划线可以用text-decoration:none
去掉、颜色也可以用color:#424242改成正常的黑色,等等。
9、盒模型
- border 边框
- padding 内边距
- margin 外边距
- width+height 内容
远视图demo
html
<div class="wrapper">
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<div class="box5">
<div class="box6">
<div class="box7">
<div class="box8">
<div class="box9">
<div class="box10">
<div class="content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css
.content{
width:10px;
height: 10px;
background-color:#fff;
}
.box9{
width:10px;
height: 10px;
background-color:#0f0;
padding:10px;
}
.box8{
width:30px;
height: 30px;
padding:10px;
background-color:#fff;
}
.box7{
width:50px;
height: 50px;
padding:10px;
background-color: #0f0;
}
.box6{
width:70px;
height:70px;
padding:10px;
background-color: #fff;
}
.box5{
width: 90px;
height: 90px;
padding:10px;
background-color:#0f0;
}
.box4{
width:110px;
height: 110px;
background-color:#fff;
padding:10px;
}
.box3{
width:130px;
height: 130px;
background-color:#0f0;
padding:10px;
}
.box2{
width:150px;
height: 150px;
background-color:#fff;
padding:10px;
}
.box1{
width: 170px;
height: 170px;
background-color:#0f0;
padding:10px;
}
10、定位(层模型)
- absolute 绝对定位 脱离原来的位置进行定位 相对于最近的有定位的父级进行定位 如果没有那么相对于文档进行定位
- relative 相对定位 保留原来位置进行定位 相对于自己原来的位置进行定位
- 一般情况下 用relative用来做参照物 用absolute用来进行定位
- fixed 固定定位 无论页面怎么动 它都不动
- z-index大的元素会显示在最上面
层模型demo
html
<div class="nav">
<div class="xd"></div>
<div class="jd"></div>
</div>
css
.xd{
width:100px;
height: 100px;
position: absolute;
background-color:red;
opacity: 0.5;
}
.jd{
width:150px;
height: 150px;
background-color:green;
}
绝对定位和相对定位demo
html
<div class="wrapper1">
<div class="content1">
<div class="boxx"></div>
</div>
</div>
css
.wrapper1{
position: relative;
width: 200px;
height: 200px;
background-color:orange;
}
.content1{
width:100px;
height:100px;
background-color:black;
}
.boxx{
position: absolute;
left:50px;
width:50px;
height: 50px;
background-color:yellow;
}
相对定位 绝对定位 固定广告定位的应用 五环demo
html
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
css
.circle1,.circle2,.circle3,.circle4,.circle5{
width:100px;
height: 100px;
border-radius: 50%;
border:10px solid black;
position: absolute;
}
.circle1{
border-color:red;
left:0;
top:0;
}
.circle2{
border-color:green;
left: 130px;
top:0;
}
.circle3{
border-color:yellow;
left:260px;
top:0;
}
.circle4{
border-color:blue;
left:65px;
top:70px;
}
.circle5{
border-color:purple;
left:195px;
top:70px;
}
.plat{
height: 190px;
width:380px;
position: fixed;
left:50%;
top:50%;
margin-left:-190px ;
margin-top:-95px;
}
两栏布局demo
html
<div class="right"></div>
<div class="left"></div>
css
/* 两栏布局 */
.right{
position: absolute;
right:0;
width:100px;
height:100px;
background-color:#fcc;
}
.left{
border:none;
margin-right: 100px;
height:100px;
background-color:#ffc;
}
11、margin塌陷BUG
- 垂直方向的margin他们会基本粘合到一起取最大的值
- 触发bfc以解决margin塌陷的问题
- 如何触发bfc:
position:absolute;
display:inline-block;
flot:right/left;
overflow:hidden;
12、浮动模型 flout 及清除浮动的方法
浮动元素产生了浮动流
所有产生了浮动流的元素,块级元素看不到他们
产生了bfc的元素和文本类属性的元素,以及文本都能看到浮动元素
直接在父级上用清除浮动三连 就可以让下面的元素不受影响了
html
<div class="w">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
<div class="c">4</div>
<div class="c">5</div>
<div class="c">6</div>
<div class="c">7</div>
<div class="c">8</div>
<div class="c">9</div>
</div>
css
.w{
width:306px;
height:306px;
border:1px solid black;
}
/* 清除浮动三件套 */
.w::after{
content:"";
clear: both;
display: block;
}
.c{
float: left;
width:100px;
height: 100px;
background-color:black;
color:#fff;
margin:1px;
}
12、伪元素
before\after 每个元素都有这两个伪元素 但是要单独选出来才能修改 一般用伪元素来去除浮动流
导航栏demo
html
<ul class="nav">
<li class="list-item"><a href="#">天猫</a></li>
<li class="list-item"><a href="$">聚划算</a></li>
<li class="list-item"><a href="#">天猫超市</a></li>
</ul>
css
a{
text-decoration: none;
color:#f40;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
height:30px;
line-height: 30px;
padding:0 5px;
}
.nav .list-item{
list-style: none;
float: left;
margin:0 10px;
height: 30px;
line-height: 30px;
}
a:hover{
color:#fff;
background-color:#f40;
border-radius: 15px;
}
.nav::after{
content: "";
clear: both;
display: block;
}
13、文字溢出容器处理
单行文本超过容器的宽度的时候用…来展示
html
<h3 class="yc">单行文本超过容器的宽度的时候用...来展示</h3>
css
.yc{
width:200px;
/* 文字一到边界的时候不要换行 直接横着给我顶过去 */
white-space: nowrap;
/* 隐藏溢出部分 */
overflow: hidden;
/* 溢出部分的文字用...来展示 */
text-overflow: ellipsis;
}
多行文本不做打点只做截断 直接在文字后面手动加上…
html
<h3 class="yc1">多行文本不做打点只做截断 直接在文字后面手动加上...</h3>
css
.yc1{
margin:0;
padding:0;
overflow: hidden;
border:1px solid black;
width:150px;
height: 40px;
font-size: 16px;
}
14、背景图片处理
html
<div class="img"></div>
css
.img{
width:200px;
height:200px;
/* 引入背景图片 */
background-image: url(../img/10.jpg);
border:1px solid black;
/* 设置背景图片大小 */
background-size:50px;
/* 铺不满的时候不重复出现 */
background-repeat: no-repeat;
/* 背景图片定位 */
background-position: center center;/* 居中 */
/* background-position: top center; 上中 */
/* background-position: bottom center; 下中 */
/* background-position: left center; 左中 */
/* background-position: right center; 右中 */
}
15、以图换字
html
<a class="logo" href="https://www.taobao.com"></a>
css
.logo{
display: inline-block;
text-decoration: none;
color:#424242;
width:190px;
height: 90px;
background-image:url(../img/10.jpg)0 0 no-repeat;
background-size: 190px 90px;
border:1px solid black;
text-indent: -9999px;
white-space: nowrap;
overflow: hidden;
}
16、淘宝自适应布局
html
<div class="wrapper">
<div class="content"></div>
</div>
css
.wrapper{
height: 30px;
background-color:#123;
}
.content{
margin:0 auto;
width:1200px;
height: 30px;
background-color:#0f0;
}
17、设置了定位或者浮动了之后行级元素会自动转换为 行级块元素
18、一个文本类元素里面包含文字了 那么外面的文字就会和里面的文字底对齐
html
<span class="dq">123</span>呵呵
css
.dq{
display:inline-block;
width:100px;
height: 100px;
font-size: 50px;
background-color:red;
/* 调文本对齐线 */
vertical-align: middle;
}
19、淘宝顶部导航栏左右浮动 在一行显示的结构
html
<div class="nav1">
<ul class="contents">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="contents1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
css
.contents{
width:300px;
background-color:#0f0;
list-style: none;
float: left;
}
.contents1{
width:300px;
background-color:#0f0;
list-style: none;
float: right;
}
.contents li,.contents1 li{
float: left;
}
.nav1{
background-color:black;
width:auto;
height:50px;
line-height: 35px;
}