html+css
html部分
http跳转的是外部链接
div盒子默认占用一行
margin:auto只针对元素的居中有效果
1.display:block 块级元素 div 有高度宽度 占用一整行空间
2.display:inline-block 行内块级元素 有宽度高度 共用一整行空间
可以当做文字处理
3.display:inline 行内元素 公共一行 没有宽度高度
body是最外层的盒子，指的是浏览器。
选择页面的标签有两种选择器 一种类选择器 二种标签选择器
div表示一个盒子
样式在css书写
div盒子默认占据一整行
border表示边框
input样式
input type=“text”--------------------文本框
input type=“password” ----------密码框
input type=“submit” ------------提交按钮
input type=“reset” ------------- 重置按钮
input type=“radio” ----------------单选框
input type=“checkbox” ----------复选框
input type=“button” -----------普通按钮
input type=“file” ----------文件选择控件
input type=“hidden” ------------- 隐藏框
input type=“image” -----------图片按钮
css部分
body是最外层的盒子，指的是浏览器。
选择页面的标签有两种选择器 一种类选择器 二种标签选择器
*表示所有的标签 body ul li css reset
color是文字颜色 background是背景颜色
和文字相关的样式都在font集合里面
和文本相关在样式都在text集合里面
~表示兄弟选择器 选择兄弟 但是只能选择到弟弟 空格表示后代选择器
基线
只有display：inline-block的盒子才有基线 基线默认是在顶部 vertical-aglin来调整
鼠标移入效果使用
例如：
:hover {
background: #252947;
color: aliceblue;
}
如果想要过渡样式可以使用-transition
overflow：hidden:超出隐藏
margin
margin-auto:分配可用空间
margin-left/margin-right；auto是分配可以用的空间
margin-top、maring-bottom：auto，相当于 margin-top、maring-bottom：0px
四个方向都auto 上下auto=0
margin：auto让盒子居中的原理
定位
之前接触的float 抽出文档流
定位有三个重要的记忆点 定位 relative相对定位 absolute绝对定位 fixed固定定位
1.定位的标签会抽出文档流
2.定位一定要配合left right top bottom的方向名词使用
3.定位，一定要弄清楚定位点在哪里
一.相对定位 positon：relative
1.作用：做微调
2.定位点：本身位置的左上角
3.关于抽出文档流：相对定位是半抽出文档流, 本体还在文档流里面占着位置，分身脱离文档流飞出去流
二、固定定位 position:fixed
1.作用：把盒子固定到浏览器的某个位置
2.定位点:浏览器窗口的左上角
3.关于抽出文档流：绝对抽出文档流
三、绝对定位 position：absolute
position：absolute 不能单独用
口诀是：子绝父相（子集绝对，父集相对）
1.作用： 灵活布局----盖印效果
2.定位点：父集的左上角
3.关于抽出文档流：绝对抽出文档流
权值
每一个css的选择器都有一个相对的重要程度值，也就是权重的值。css选择规则的优先级 是按照 css选择器的权值的比较来确定的。
优先的规则：
1.css选择规则的权值不同时，权值高的优先；
2.css选择规则的权值相同时，后定义的规则优先；
3. css属性后面加 !important 时，无条件绝对优先；
html代码范例
网站题目
CSS部分代码范例
*
{
margin: 0px;
padding: 0px;
list-style: none;
}
.box
{
display: inline-block;
font-size: 14px;
width: 90px;
/* px是像素单位 */
height: 60px;
background:#191d3a;
text-align: center;
color: rgba(219, 214, 214, 0.651);
/* 控制水平 */
/*行间距*/
line-height: 60px;
/* line-height和height一样 */
}
.box:hover
{
/* 鼠标移入的效果 */
background: #252947;
color: aliceblue;
}
.nav
{
/* 外边有个固定宽度在盒子保护 */
width: 800px;
height: 60px;
margin: auto;
font-size: 0px;
line-height: 60px;
background:#191d3a;
}
/* .box就是表示box的类名 */
.nav_box
{
width: 100%;
height: 60px;
background:#191d3a;
/* 百分比表示的是集成父级的百分之多少 */
}
.btn
{
width: 90px;
height: 50px;
background: #193e68;
border: none;
outline: none;
border-radius: 10px;
color: rgba(219, 214, 214, 0.651);
cursor: pointer;
}
.btn:hover
{
/* 鼠标移入的效果 */
background: #000000;
color: rgb(255, 255, 255);
}
.logo,.box,.btn
/* ,并集选择器 */
{
vertical-align: middle
}
.logo
{
display: inline-block;
height: 35px;
/* line-height: 60px; 行间距 */
}
.logo img
{
width: 160px;
}
#banner1,#banner2,#banner3,#banner4
{
vertical-align:text-top
}
#banner1:checked~.banner>ul:nth-child(2)
{
margin-left: 0;
}
#banner2:checked~.banner>ul:nth-child(2)
{
margin-left: -100%;
}
#banner3:checked~.banner>ul:nth-child(2)
{
margin-left: -200%;
}
#banner4:checked~.banner>ul:nth-child(2)
{
margin-left: -300%;
}
.banner
{
width: 100%;
overflow: hidden;
min-width:800px;
position: relative;
}
.banner>ul:nth-child(2)
{
width: 400%;
transition: margin-left 1s;
}
.banner>ul:nth-child(2)>li
{
float: left;
width: 25%;
}
.banner>ul:nth-child(2)>li>img
{
width: 100%;
}
input
{
display: none;
}
.banner>ul:nth-child(1)
{
position: absolute;
left: 45%;
top: 90%;
}
label
{
display: inline-block;
width: 20px;
height: 10px;
background: rgb(255, 255, 255);
border-radius: 20px;
}
.banner>ul:nth-child(1)>label:hover
{
background: rgba(219, 214, 214, 0.651);
}