html+css+jquery----简单博客网页练习

目录

注意事项

详细解释

源码部分

HTML文件：

CSS文件：

JS文件：

---

跟着自学网的教程，敲的一个自学网的网页。

先上gif图：

因为原图太大不能上传，压缩了一下清晰度......

有导航栏，内容区，侧边栏，按钮动画，还有回到顶部的小事件。

注意事项

jQuery可以下载好一起放入文件夹里直接引用的，免得网络问题不能用。

看起来挺简单的一个页面还是有很多可以注意到的事项，记录一下：

1.导航栏使用ul同时向右浮动时，可以将标签倒着写，这样不会出错；

2.设置float后，父元素的高度就消失了，如果页面下面还有内容，就会错位，需要将样式清除；

3.span不能设置高宽，需要将其display设置成inline-block后才能设置，最好还是采用其他可以设置的元素，比如div；

4.margin和padding：前者是外边距，后者是内边距，若带有背景色，使用padding可以将背景色一同撑大，margin则会留白；

5.每次写项目前，可以先网上找一份清除浏览器样式的CSS文件复制进去，保证浏览器的样式不会影响自己设置的样式，这里CSS的前30几行就是清除浏览器样式用的；

6.CSS中>,+,~，空格，逗号等符号连着选择器一起使用还挺多，需要大量练习才行；

7.按钮的动画CSS就能完成，CSS3提供了好多动画啊，还有好多参数……

详细解释

实现步骤如下：

1.整个页面分成了三部分：头部、内容区、尾部
2.整个的包裹id定义为wrap，内容区的class定义为content，尾部的class定义为footer
3.紧跟着的mask为整个页面设置遮罩：当右侧菜单栏弹出时，整个页面加上遮罩
4.slider为侧边栏菜单
5.top为右下角"回到顶部"的按钮

最后面有源码，前面截图的为了讲解用的，复制部分代码太烦了，要不停改格式，我懒得改。

先来讲头部header。 

头部包括导航栏和第0个透明介绍部分：

按钮是有动画的，我做了个GIF图，不能浪费，这里生硬的放进来。

 如图显示，整个的背景为wrap，

/*整个页面最外层的包裹*/
#wrap {
    /*背景使用banner的图片，不重复的显示，居中，固定在页面上，就可以不随滚动条而变化*/
    /*同时设置整个页面的文字*/
    background: url("./img/banner.jpeg") no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,"WenQuanYi Micro Hei",Verdana,sans-serif,"\5B8B\4F53";
}

整个header如下，包括导航栏和第0个透明介绍部分： 

 导航栏样式如下：

/*logo单独设置靠左的li元素，可以单独添加样式*/
.logo {
    float: left;
    margin-left: 40px;
}
/*class为logo的li元素下的a标签样式----即"博客"二字*/
.logo a {
    font-size: 20px;
    color: white;
    font-weight: 700;
    /*文字中间的空隙*/
    letter-spacing: 2px;
}

第0部分样式如下：

.banner {
    height: 600px;
}
/*设置第0部分的内容样式*/
.banner .inner {
    /*全部使用白色，居中对齐，并设置一个最大的宽度*/
    color: white;
    text-align: center;
    margin: 0 auto;
    max-width: 400px;
    /*设置relative就会随着鼠标上下滚动，fixed就会固定在页面上，跟背景图一样*/
    position: relative;
    top:160px;
}

/*设置文本上下的线条的样式*/
.line {
    /*这个宽度为父元素inner的宽度400px*/
    width: 100%;
    /*设置了一个高度为2px的白色背景作为线条*/
    height: 5px;
    background: white;
    margin: 10px 10px;
}

/*inner里面的p元素设置样式*/
.banner .inner p {
    line-height: 30px;
    font-size: 18px;
    letter-spacing: 1px;
}

/*给按钮设置样式*/
.banner .inner button {
    margin-top: 20px;
    /*使用margin会留白，padding会带着背景色一起撑开*/
    padding: 10px 20px;
    background: #e85e17;
    /*设置圆角*/
    border-radius: 5px;
   /*去除按钮的边框*/
    border: none;
    color: white;
   /*去掉按钮点击时的边框*/
    outline: none;
}

/*鼠标悬浮到按钮上时，按钮的动作*/
.banner .inner button:hover {
    /*鼠标经过时，开始旋转720°动画，并放大2倍，持续时间2s*/
    transform: rotate(720deg) scale(2);
    transition: 2s;
}

.banner .inner .more {
    margin-top: 140px;
}

再给导航栏设置个active的样式，选中当前标签时，下方出现白色加粗的横线，right-menu除外。样式如下：

选中main：

选中blog： 

网页一打开默认选中的是main。

样式如下：

.active {
    position: relative;
}
/*同样设置了4px高度的白色背景框作为短横线*/
/*因为4个标签中main、web、blog都添加了span标签*/
/*right-menu没有添加*/
.active span {
    position: absolute;
    height: 4px;
    background: white;
    bottom: 5px;
    left: 0;
    width: 100%;
}

添加点击动作：

 // 1.鼠标移到标签上时，当前标签有一个白色的下划线，其他的兄弟标签样式取消
    $('.nav-ul li').click(function () {
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
    })

 当然你也修改为其他动作，随你开心。 

 最后还有个side-bar的class放到后面解释。

 第二部分为内容content区，分了三块：

 先看part-one：

几行文字和一条线，还有几个图片+旋转的边框，背景色记得设置透明度：

 

 CSS样式如下：

/*中间的内容整个设置为透明度0.9，保证滚动条滑动时，主背景可以透出来，*/
/*同时主背景用的是fixed，不随滚动条而移动*/
.content{
    opacity: .9;
}

/*设置第一部分整体的样式*/
.part-one {
    text-align: center;
    color: white;
    background: rgba(67,178,165,1);
    padding-top: 65px;
    opacity: 0.95;
}

.wraper {
/*margin这样设置可以居中*/
    margin: 0 auto;
    max-width: 1080px;
}

.wraper h2 {
    padding: 15px 0;
}

.wraper .line {
    /*居中可以这样设置margin*/
    margin: 15px auto;
    width: 40%;
    height: 5px;
    background-color: #666666;
}

.wraper p {
    margin: 25px 0;
    font-size: 18px;
}

.icon {
    margin: 30px auto;
    margin-bottom: 0;
    padding-bottom: 30px;
}
/*给3个图标设置边框*/
/*宽度2px实线、绿色，80*80px，旋转45°*/
.icon .item{
    border: 2px solid green;
    /*因为span不可以调整宽高，所以先将display设置成如下*/
    display: inline-block;
    height: 80px;
    width: 80px;
    margin-right: 50px;
    transform: rotate(45deg);
}

/*设置宽和高为100%，适应父元素item的宽和高，就不会超出item的border，
同时img继承了item的旋转，需要纠正回来*/
.icon .item img{
    width: 100%;
    height: 100%;
    transform: rotate(-45deg);
}

第二部分为分栏的显示，有重复的3个分栏，可以先做一个，然后复制3份：