昨日内容回顾
-
form表单补充说明
1.基于form表单获取用户数据的标签 至少应该有name属性 并且选择类型的标签还应该有value属性 针对没有name属性的标签 就算获取了数据数据form表单也不会发送 2.针对input标签飘颜色需要加label标签配合使用 3.标签可以有默认的属性也可以有自定义的属性 针对默认的属性 如果属性名和属性值相等 那么可以简写 4.如何让选择类型的标签默认选中 checked selected 5.如何让单选的变为多选的 multiple -
CSS简介
1.标签的两大重要属性 class属性、id属性 2.css语法结构 选择器 { 样式属性名:样式值; 样式属性名:样式值; } 3.注释语法 /**/ 4.三种引入方式 1.head内style标签内部直接编写 2.head内link标签href属性引入外部css资源 3.标签内部直接使用默认属性style编写 -
CSS如何查找标签
1.基本选择器 标签选择器(div)、类选择器(.c1)、id选择器(#d1)、通配符选择器(*) 2.组合选择器 后代选择器(空格)、儿子选择器(>)、毗邻选择器(+)、弟弟选择器(~) 3.分组与嵌套 选择器1,选择器2,选择器3 .c1,#d1,span div.c1,p#d1,span 4.属性选择器 [属性名] [属性名=属性值] 选择器[属性名=属性值] 5.伪类与伪元素选择器 p:before a:hover 6.选择器优先级 就近原则、精确度 '''ps:我们也可以打破选择器优先级 !important''' -
CSS如何调整样式
字体样式 font-size:24px font-weight:lighter color:red text-align:center text-decoration:none text-indent:32px 背景属性 background:red url('') no-repeat center center
今日内容概要
- 边框
- 盒子模型
- 浮动
- 定位
- 补充说明
- 简易博客页面搭建
今日内容详细
边框
/*border-left-width: 5px;*/
/*border-left-style: dotted;*/
/*border-left-color: #0000ff;*/
/*border-left: 3px solid black;*/
border: 10px solid orange;
画圆
border-radius: 50%;
display
"""
行内标签是无法设置长宽 只有块儿级可以设置
"""
display:none 彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
visibility: hidden 隐藏的不彻底
盒子模型
我们可以将标签看成是一个盒子(快递盒)
1.快递包里面的实际物体 content(内容)
2.物体与内部盒子墙的距离 padding(内边距、内填充)
3.快递盒的厚度 border(边框)
4.快递盒之间的距离 margin(外边距)
/* !*padding: 20px; 上下左右*!*/
/* !*padding: 20px 40px; 上下 左右*!*/
/* !*padding: 10px 20px 30px;上 左右 下*!*/
/* !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致
针对标签的嵌套 水平方向可以居中
margin: 0 auto;
浮动
浮动就是用来做页面布局的
浮动的现象
float:left\right
浮动带来的影响
浮动的元素是脱离正常文档流的 会造成父标签塌陷
如何解决浮动的影响
clear
解决浮动带来的影响终极方法
先提前写好样式类
.clearfix:after {
content: '';
display: block;
clear: both;
}
谁塌陷了 就给谁添加clearfix样式类就可以了
ps:浏览器会优先展示文本内容(如果被挡住)
溢出
div {
height: 150px;
width: 150px;
border: 5px solid greenyellow;
border-radius: 50%;
overflow: hidden;
}
div img {
max-width: 100%;
}
定位
标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签原来的位置)
3.absolute绝对定位(基于某个定位过的父标签做定位)
4.fixed固定定位(基于浏览器窗口固定不动)
.c1 {
background-color: red;
height: 100px;
width: 100px;
position: relative;
}
.c2 {
background-color: greenyellow;
height: 100px;
width: 200px;
position: absolute;
top: 100px;
left: 100px;
}
.c1 {
border: 5px solid black;
height: 100px;
width: 100px;
position: fixed;
right: 100px;
bottom: 200px;
}
z-index
body {
margin: 0;
}
.cover {
background-color: rgba(127,127,127,0.5);
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: 100;
}
.modal {
height: 200px;
width: 400px;
background-color: white;
z-index: 101;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
简易博客页面搭建
1.分析页面结构
利用布局标签div和span搭建架子
2.先编写网页骨架
HTML
3.再编写CSS
4.最后编写JS
作业
1.整理今日内容及博客
2.复习面向对象即MySQL
3.尝试练习前端页面搭建
4.预习JavaScript编程语言