day3学习笔记
CSS
浏览器
右键检查 F12
Elements --> 网页代码
通用选择器
通用选择器 * 的 权重为0
* { /* 可以选中任何标签，包括html 和 body */
}
body * {
color: #666666；
font-size: 12px;
font-family: "微软雅黑";
border:1px solid red;
}
群组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
body>p,a,#bid{ }
相邻选择器和兄弟选择器
相邻元素选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
<style type="text/css">
/* 相邻选择器，下家选择器 找自己下面的一个*/
#sid2+div{
border:1px solid red;
}
/* 兄弟选择器，小弟选择器 找自己下面的*/
#sid~div{
background-color:yellow;
}
</style>
<div id="father">
<div class="son" id="sid1"> son1 </div>
<div class="son" id="sid2"> son2 </div>
<div class="son" id="sid3"> son3 </div>
<div class="son" id="sid4"> son4 </div>
<div class="son" id="sid5"> son5 </div>
<div class="son" id="sid6"> son6 </div>
</div>
代码效果
div盒子
div是一个纯粹的块级元素，不像p,h1~6等块级元素有子代的样式，div没有多余的样式，方便做页面布局。它不会像p标签等出现嵌套中样式出不来的尴尬。
div 块级元素的高度和宽度需要使用height, width设置
没有设置，默认高度为0或由内容决定， 宽度100%
块级元素独占一行
行内元素
不可以设置高度和宽度，只能由内容决定（除了img 和 marquee
和其他行内元素和文字共享一行
span 纯粹的行内元素， a b s ... span没有多余的样式
通常情况下：块级元素包着行内元素，避免不必要的麻烦，除了a标签以外（a标签可以包天包地）
使用div实现页面布局
<style type="text/css">
#shortcut-out{
backgroud-color:red;
}
#shortcut-in{
height:30px;
width:1190px; /* 1000~1200之间 */
background-color:yellow;
margin: auto; //外边距样式 auto 实现了当前标签相对父级元素显示居中效果
}
#header-out{
backgroud-color:pink;
}
#heade-in{
height:100px;
width:1190px; /* 1000~1200之间 */
background-color:green;
margin: auto; //外边距样式 auto 实现了当前标签相对父级元素显示居中效果
}
#main-out{
backgroud-color:blueviolet;
}
#main-in{
height:600px;
width:1190px; /* 1000~1200之间 */
background-color:green;
margin: auto; //外边距样式 auto 实现了当前标签相对父级元素显示居中效果
}
#left{
height:470px;
width:190px;
background-color:palegreen;
float:left;/*让块级元素横向排布，共享一行
margin-right: 10px; /* 外边距，元素和元素之间的距离 */
}
#center{
height:470px;
width:790px;
background-color:yellow;
float:left;
margin-right: 10px;
}
#right{
height:470px;
width:190px;
background-color:cyan;
float:left;
}
</style>
<div id="shortcut-out">
<div id="shortcut-in"> </div>
</div>
<div id="header-out">
<div id="header-in"> </div>
</div>
<div id="main-out">
<div id="main-in">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</div>
字体样式
<style type="text/css">
div {
/* 字体类型：什么字体 */
/* 通常情况下，网页习惯使用微软雅黑 */
font-family:"微软雅黑"； 、
font-family:"宋体"；
font-family:"楷体"；
/* 字体大小: 默认14px 网页通常使用12px */
font-size:50px;
font-size:14px;
/* 字体风格:斜体 */
font-style:italic;
/* 字体粗细 100-600-->正常粗细 700-900,bold,bolder-->加粗*/
font-weight: 700;
font-weight:bold;
font-weight:bolder；
/* 简写:注意顺序 斜体-->粗细-->大小-->字体类型 */
/* 必选项 字体大小和字体类型
font: italic bold 40px "微软雅黑" ;
文本样式
<style type="text/css">
div {
/* 字体大小 */
font-size:20px;
/* 字体颜色 */
color:red;
/* 行高 */
line-height=40px;
}
#did 2{
/* 字体大小 */
font-size:20px;
/* 字体颜色 */
color:red;
/* 行高: 文字垂直居中*/
line-height=40px;
/* 水平对齐方式 left center right */
text-align:center;
/* 首行缩进 px em:单位为当前字体的大小*/
text-indent:40px;
/* 文本装饰 overline：上划线 underline:下划线 line-through:删除线
none: 取消装饰*/
text-decoration:none;
}
#did 1{
height:60px;
border:1px soild red;
/* 行高 */
line-height=60px;
}
a {
color:black;
/* 取消a标签的下划线 */
text-decoration:none;
}
a:hover{
color: blue;
}
<div>
</div>
<a> 百度一下</a>
行高使用
鼠标样式
img{
cursor: pointer; // 小手
cursor: text; // 工
cursor: defalut; // 指针
cursor: crosshair; // 十字型
}
<a href="#">百度一下</a> // 小手
背景样式
<style type="text/css">
div {
width: 100px;
height:100px;
background-color:red; //背景颜色
background-image:url(img/img.jpg);
background-repeart:no-repeat; //背景图片不重复
/* 背景图片定位 */
/* x方向 y方向 */
background-position:100px 200px;
/* 第一个参数：水平方向 left center right
* 第二个参数：垂直反向 top center bottom
*/
background-position:right bottom;
background-position:10%; // 使用百分比
/* 设置背景图片大小 高 宽 */
background-size:100px auto;
/* 简写 顺序-->颜色-->图片源-->定位-->是否重复 */
background:green url(img/img.png) 100px 100px repeat-x;
}
商品分类练习
<style type="text/css">
#info {
width:200px;
background-color:red;
line-height:30px;
font-size:16px;
text-indent:16px;
color:white;
font-weight:700;
/*
background-image:url(img/arow.png);
background-repeat:no-repeat;
background-position:90%;
*/
background: red url(img/arow.png) 90% no-repeat;
background-size:18px;
}
</style>
<div id="info"> 全部商品样式 </div>
列表样式
ul,ol {
/* 常用：none */
list-style-type:none; /* 不显示任何的序号或序列 */
list-style-type:decimal; /* 阿拉伯数字 */
list-style-type:disc;/* 实心圆 */
list-style-type:lower-romen; /* 小写罗马数字 */
/* 设置图片作为前面列表标记 */
list-style-image:url(img/img.jpg);
/* 设置标记的定位 */
/* 在li里面 */
list-style-postion: inside;
/* 在li外面 */
list-style-postion: outside;
}
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ol>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
列表样式和背景样式练习 导航栏
#catagory{
width:200px;
background-color:red;
}
#category>ul{
list-style-image:url(img/书本.png);
list-style-postion:inside;
}
#category>ul>li{
line-height:30px;
background-image:url(img/箭头.png);
background-position:90%；
background-size:16px;
}
#category>ul>li>a {
color:white;
text-decoration: none;
font-weight:bold;
}
/* hover的权重是10 */
#category>ul>li>a:hover{
color:yellow;
}
<div id="catagory">
<ul>
<li><a>家用电器</a></li>
<li><a>手机 数码</a></li>
<li><a>电脑、办公</a></li>
<li><a>家居</a> <a>家具</a>  ；<a>厨具</a></li>
</ul>
</div>
div {
height:200px;
width:200px;
background-color:yellow;
border-color:red;
border-width:2px;
/* solid：实线(直线) dashed：虚线 dotted:点线 double:双线
border-style:solid;
/* 简写 没有要求顺序*/
border: 1px solid blue;
/* 可以单独设置四个方向的边框样式 */
border-top:5px solid blueviolet;
border-bottom:5px solid blueviolet;
border-left:5px solid blueviolet;
border-right:5px solid blueviolet;
/* 也可以设置某个方向的边框的某个样式 */
border-left-color:cryan;
}
span行内样式，不能设置高度宽度，由内容决定
举例
#one {
height:20px;
width: 70px;
border-bottom: 5px solid red;
float:left;
}
#two {
height:20px;
width: 70px;
border-bottom: 5px solid black;
float:left;
}
<div id="one">aaaaa</div>
<div id="two">bbbbb</div>
内边距
div {
width:200px;
border: 1px solid red;
/* 上下左右的内边距均为5px */
padding: 5px;
/* 也可以单独设置（以此类推) */
padding-left:10px;
/* 简化 上下 左右*/
padding: 10px 20px;
/* 上 右 下 左 */
padding: 10px 20px 30px 40px;
}
外边距
#father {
border:1px solid red;
width:500px;
height:500px;
background-color:yellow;
}
#father>div {
border:1px solid blue;
width: 100px;
height:100px;
background-color:pink;
margin:5px;
padding:5px; //内容离得太近就用padding
}
#father>#son2 {
margin-top：20px;
}
<div id="father">
<div id="son"> </div>
<div id="son"> </div>
<div id="son"> </div>
<div id="son"> </div>
</div>
盒子浮动
#father {
border:1px solid red;
width:500px;
// height:500px;
background-color:yellow;
/* 父级元素设置溢出隐藏 会和 子元素浮动产生某种特效 */
overflow:hidden;
}
#father>div {
border:1px solid blue;
width: 100px;
height:100px;
background-color:pink;
margin:5px;
padding:5px; //内容离得太近就用padding
float:left;
}
# father>p {
height:50px;
background-color:black;
/* float:left */
/* 清除浮动: 清除前面几个浮动元素对他的影响 */
clear:both;
}
/* 浮动最怕的情况叫做：卡住 */
#father>#son22{
margin-bottom:10px;;
}
<div id="father">
<div id="son"> </div>
<div id="son"> </div>
<div id="son"> </div>
<div id="son"> </div>
</div>
浮动：让块元素能够横着排
1. 没有占位，父级元素会认为没有子元素，容易出现父级元素的高度设置的
解决方案：
1。父级元素设置：overflow:hidden;
2.或者可以在浮动后面，加一个普通块级元素（div),给这个标签加上clear: both;
特别小心："卡住了"情况
浮动后的标签
1. 两个浮动元素之间的外边距是相加（普通的外边距是以最大为准）
"26.html"
#body {
background-color:#f4f4f4;
margin:0px; //body自带外边距8px
}
#shops-out {
background-color: royalblue;
margin-top: 10px;
}
#shops-in {
/*height: 470px;*/
width: 1190px;
background-color: darkseagreen;
margin: auto;
overflow:hidden;
}
#shops-in>.shop{
width: 188px;
height: 200px;
background-color: yellow;
float: left;
margin: 5px;
text-align: center;
}
<div id="shops-out">
<div id="shops-in">
<div class="shop">
<img src="img/img.png" />
<h4>美女写真。。。</h4>
</div>
<div class="shop"></div>
<div class="shop"></div>
<div class="shop"></div>
<div class="shop"></div>
<div class="shop"></div>
</div>
</div>
定位
固定定位
#main {
height:1000px;
width:200px;
background-color:yellow;
}
#ewm {
/* 设置为固定定位 参考点：浏览器 没有占位*/
position:fixed:
/* 还需要设置位置 相对于浏览器的右侧*/
right:10px;
/* 相对于浏览器的底部 */
bottom:10px;
}
<div id="main"> </div>
<div id="ewm">
<img src="img/sysgz.jpg"/>
</div>
相对定位
/* 更多情况下是为绝对定位服务的 */
#father>#son2 {
/* 相对定位 有占位的 相对于原来的位置进行偏移 参考点：原位置 */
position:relative;
left:10px;
top:10px;
}
绝对定位
#father>#son2{
/* 绝对定位：没有占位 没有设置偏移位置，默认为原位置
* 参考点需要满足两个条件：
* 1.父级元素（包括他的直接和间接的父级元素）
* 2.同时还要满足，父级元素必须设置position样式
* (建议： position:relative;)
*/
postion:abolute;
left:40px;
}
吾生也有涯，而知也无涯。
