day 14
HTML+CSS的项目实战
项目准备：
项目使用的是外链式样式表，然后根据各个样式表新建自己的文件，然后统一放到css文件夹中，其他类型的文件，分类创建自己的文件夹
（外链式样式表）
关于清除默认样式，使用reset.css来清除页面默认样式。Reset.css文件内部的内容都是一些关于标签默认样式的清除，需要注意的是，清除默认样式的文件一定要在该html的所有link标签的最顶部
html文件的命名，首页命名为index.html，其他的HTML文件根据页面的作用进行命名
版心
一个页面的中心内容都是居中显示的，居中的宽度就是一个页面的版心
补充知识：
- display:inline;转换为行内元素
行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
行内元素特征：(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
- display:block;转换为块状元素
块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
块状元素特征：(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
- display:inline-block;转换为行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
4.display：none；作用是不显示
今日代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- header开始 -->
<div class="header">
<div class="header_c inner_c">
<h1>
<a href="#">
青竹商城
</a>
</h1>
<div class="all_pro">
<a href="#">查看所有类别<span></span></a>
<div class="product"></div>
</div>
</div>
</div>
<!-- header结束 -->
</body>
</html>
/* 版心 */
.inner_c{
width: 1140px;
margin: 0 auto;
}
a{
text-decoration: none;
color:#333;
}
/* header部分 */
.header{
width: 100% ;
line-height: 68px;
text-align: center;
height: 68px;
border-bottom:1px solid black;
box-shadow:4px 0px 2px 2px rgba(0,0,0,0.4);
position: relative;
}
.header .header_c{
height: 68px;
}
.header .header_c h1{
height: 68px;
width: 140px;
padding:0 15px;
float: left;
}
.header .header_c h1 a{
display:block;
text-indent: -100em;
overflow:hidden;
background:url(../images/logo.png) no-repeat center center;
}
.header .header_c .all_pro{
width: 168px;
float: left;
margin : 0 10px;
}
.header .header_c .all_pro a {
display:block;
}
.header .header_c .all_pro a span{
display:inline-block;
width: 0;
height: 0;
border:5px solid transparent;
border-top-color:#333;
/* 边框的组成是楔形的，给一个宽高都为0的盒子加边框，边框的楔形就会近似为三角形，需要哪个方向的三角形直接设置border-top（例）-color：颜色，然后将border本来的颜色设置为透明，transparent */
position: relative;
top:3px;
left:5px;
}
/* 这里给.header .header_c .all_pro设置hover伪类而不给a设置是因为a标签的hover伪类后面显示的只能是文字，而我们弹出来的页面需要文字和图片一起，所以直接给pro设置hover伪类 */
.header .header_c .all_pro:hover span{
border-top-color:transparent;
border-bottom-color: #333;
top:-3px;
/*此时border-top-color已经设置成了透明的，所以当鼠标移动到这里时，只会显示border-bottom-color的颜色，但是显示的位置不对，所以直接设置top：-3px；相当于向下走了3px走到了正确的位置。*/
/* 这里可以直接设置top属性的原因是上面已经对span标签设置了相对定位，所以这里的span标签继承了上面的相对定位，无须再将其设置一次定位。 */
}
.header .header_c .all_pro .product{
width: 100%;
height: 300px;
background: pink;
position: absolute;
left: 0;
top: 68px;
/* 如果不设置子绝父相的话，因为product盒子没有脱标，所以只会继承pro盒子的宽度，此时给该合资设置和header盒子子绝父相，则会继承header盒子的宽度。 */
display:none;
/* 此时先隐藏这个下拉盒子 */
}
/* 当鼠标移上pro时，hover伪类属性就会让product盒子执行下列代码，从而显示出来。 */
.header .header_c .all_pro:hover .product{
display:block;
}
效果：
浙公网安备 33010602011771号