HTMLday3
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
css
层叠样式表 修饰网页的
css的语法
1.行内样式的语法
2.内部样式表和外部样式表的语法
css的使用方式
1.行内样式
2.内部样式表
3.外部样式表
4.外部导入样式
css选择器
ID选择器
class选择器
标签选择器
组合选择器
子代选择器
后代选择器
通用选择器
伪类选择器 :hover鼠标悬浮上去的样式
css样式的优先级
1.根据权重来确定
2.如果权重相同，就近原则（后定义原则）
权重：仅仅只是一个参考的值，并没有实际的含义
内联 1000
id 100
class 10
伪类 10
标签 1
通用 0
!important 只要出现就以这个为主
注意：计算权重的时候不需要去管子代、后代。直接加起来就OK
颜色的三种表示方法
1.颜色英文单词
2.16进制
3.rgb 扩展 rgba
文本类样式
color
line-height 得确定里面有几行
text-align
text-decoration
font-size
font-style
font-family
font-weight
元素的显示方式
display
inline 行内元素
inline-block
block
none 隐藏
元素的隐藏
visibility:hidden
轮廓
主要用在input标签中，只需要清空即可
列表
list-style：none 即可
鼠标的样式
cursor
透明度
opacity: 0.1; 取值：0-1之间 可以为0和1 0表示全透，1表示全不透
rgba(255,0,0,0.1)
面试题
visibility:hidden 和 display:none 的区别？
都是隐藏
但是visibility：hidden隐藏以后还会继续保留位置
display：none 隐藏以后就不会占位置
opacity和rgba的区别？
opacity针对整个元素的，包括里面的背景颜色，图片，文字...
rgba只针对背景颜色
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
border: 1px solid #f00;
display: inline-block;
}
.div01{
/*visibility: hidden;*/
display: none;
}
</style>
</head>
<body>
<div>1</div>
<div class="div01">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景类样式</title>
<link rel="stylesheet" href="css/day03.css" />
</head>
<body>
<!--
今天任务:
1.css背景类样式
2.框模型
3.css布局
-->
<!--
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的重复
repeat-y 只允许在y轴重复
repeat-x 只允许在x轴重复
no-repeat 不重复，只显示一次
background-position 背景图片的定位
取值： 两个，分别表示x和y方向。如果只写一个，则两个值相等
例如：京东、淘宝 五星好评
雪碧图： 各个小图标的集合，使用的目的是减少http的请求
background 是把上面所有的全部合在一起
background : color image repeat position
background-size 背景图片的大小
-->
<div class="d03_01">
安防类似飞机来说大家发了时代峻峰老实交代法律手段见风使舵浪费
</div>
五星好评
<div class="d03_bgimg d03_02"></div>
四星
<div class="d03_bgimg d03_03"></div>
三星
<div class="d03_bgimg d03_03"></div>
两星
<div class="d03_bgimg d03_03"></div>
一星
<div class="d03_bgimg d03_03"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框模型</title>
<link rel="stylesheet" type="text/css" href="css/day03.css"/>
</head>
<body>
<!--
任何一个元素，都可以理解成一个盒子
盒子是可以装"东西"
里面东西跟"盒子的包装"有一定的空间
两个盒子或者说多个盒子，盒子之间是不是有一定的"距离"(空间)
盒子模型的组成
margin 外边距 盒子与盒子之间的距离
border 边框 包装盒
padding 内边距 填充物
content 内容 买好的东西
margin 合起来写的属性
4个
当你写一个的时候，四个全部相同
两个的时候，上右，对边补齐
三个的时候，上右下，对边补齐
margin-top margin-right margin-bottom margin-left
这四个属性可以单独的拿出来写
border 边框 合写的属性
border-color 颜色
border-top-color: ;
border-left-color:
border-style 样式
也分上下左右
border-width 宽度
也分上下左右
写的时候不需要区分顺序
padding
上右下左
对边补齐
定义的width和height只是content部分
padding和border会把盒子撑大
盒子的大小 content+padding+border
-->
<div class="d04_01">今天星期三</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<link rel="stylesheet" href="css/day03.css" />
</head>
<body>
<!--css布局的一种方式-->
<!--
定位 : top,left,right,bottom 只有元素增加定位的情况下才会使用
相对定位 老大
一般不要去用top,left,right,bottom
绝对定位 老二
元素会脱离文档流
一般不要去用margin，用top，left，right，bottom
虽然都能达到效果，但是为了开发的方便，代码的简洁。
固定定位 肯定不是同一个爹
元素会脱离文档流
使用场景：回到顶部
侧边栏的广告
纯种的野孩子。只有浏览器的窗口可以管的住
一般的情况下：相对定位和绝对定位是同时出现的
一般所有的下拉框都是绝对配合着相对定位完成的
position
-->
<div class="d05_01"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位和相对定位的使用方法</title>
<style type="text/css">
body{
height: 20000px;
}
.d1{
width: 700px;
height: 700px;
border: 1px solid #000;
}
.d2{
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.d3{
width: 300px;
height: 300px;
border: 1px solid #000;
position: absolute;
}
.d4{
width: 100px;
height: 100px;
/*border: 1px solid #000;*/
background-color: #0f0;
position: absolute;
/*position: fixed;*/
bottom: 0;
right: 0;
/*top: 0;*/
/*寻找他的亲哥（relative），才会去听亲哥的话，在他的亲哥眼皮底下活动
找的过程是依次往父元素上面进行查找，找不到就直接认body为亲哥，在body的范围内活动
相对定位的作用一般是用来管着绝对定位的
* */
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<div class="d3">
<div class="d4"></div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/07.css" />
</head>
<body>
<ul>
<li class="li01">
我的订单
<ul>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
</ul>
</li>
<li class="li01">
我的京东
<ul>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
</ul>
</li>
<li class="li01">
京东会员
<ul>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
</ul>
</li>
<li class="li01">
客户服务
<ul>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
</ul>
</li>
<li class="li01">
网站导航
<ul>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
<li>待处理订单</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.f1,.f2{
position:relative;
}
.d1,.d2,.d3{
width: 100px;
height: 100px;
border: 1px solid #ccc;
position: absolute;
top: 0;
left: 0;
}
.d1{
background: #f00;
z-index: 5; /*表示层级,层级的比较得看爹够不够厉害*/
}
.d2{
background: #0f0;
z-index: 10;
}
.d3{
background: #00f;
}
</style>
</head>
<body>
<div class="f1">
<div class="d1">123</div>
<div class="d2">456</div>
<div class="d3">789</div>
</div>
<div class="f2">
<div class="d1">123</div>
<div class="d2">456</div>
<div class="d3">789</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.d1,.d2,.d3{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.d1,.d2,.d3{
float: left;
/*clear: both;*/ /*清除所有的浮动*/
}
.d3{
clear: both;
}
</style>
</head>
<body>
<!--浮动
浮动分为两种，左浮动和右浮动
浮动会脱离文档流
难点在于清除浮动
清除浮动： 不是清除自身的浮动，而是清除上一个浮动对自身造成影响
-->
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;
border: 1px solid #000;
overflow: hidden; /*溢出隐藏，主要是用于清除浮动*/
}
li{
float: left;
width: 100px;
height: 100px;
border: 1px solid #ccc;
line-height: 100px;
text-align: center;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
overflow: scroll; /*溢出部分以滚动条显示*/
}
</style>
</head>
<body>
<ul >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<!--增加一个空的标签，清除所有的浮动，即可解决高度失效的问题-->
<p style="clear: both;"></p>
</ul>
<div>
熬枯受淡话费卡身份卡上的法拉时代峰峻拉丝机法拉盛龙卷风拉丝机地方垃圾的法拉可视对讲法拉盛地方
</div>
</body>
</html>
标签：待处理,HTMLday3,100px,height,订单,background,border 来源： https://www.cnblogs.com/MrWengQF/p/10945828.html