HTML5静态网页实战——个人blog首页
2017-04-15 15:59
253 查看
一、寻找模板
这次在慕课上寻找了模板二、构造div
三、目录
四、实战action
寻找到自己想要的图片。ps对图片大小根据需求进行调整（经过这次实战，ps需求挺大的）
这次花了一个下午+晚上(只能说自己不够熟练)
五、个人blog首页效果
六、gif浏览(ubuntu下制作)
七、源码(需要完整的可以联系我哈，记得关注我哈)（也可以点击这里——下载源文档）
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>XuLinJie_blog</title> <link href="扁平化个人blog.css" type="text/css" rel="stylesheet"> </head> <body> <div class="main"> <header> <nav> <ul> <li class="logo1"><a href="#"> 1779b 许林杰</a></li> <li><a href="#">联系我</a></li> <li><a href="#">关注我</a></li> <li><a href="#">赞赏我</a></li> <li><a href="#">首页</a></li> </ul> </nav><!--设置导航栏--> <div id="banner"> <div class="center1"> <h1>许林杰</h1> <p>welcome to XuLinJie_blog,Thank you.I'will paldsjsd sdnjks sndlk sdjsdsndjnjsndsd dksjdks</p> <button>了解我</button> <div class="more"> <a href="#center">更多</a> </div> </div> <a name="center"></a> </header><!--页头--> <div class="content"> <section class="green-area"> <div class="biaoti"> <h2>这是我</h2> <div class="hr"></div> <p>我是一个喜欢写博客，爱吃美食，喜欢旅游的男孩，我热爱这个世界，热爱这里</p> </div> <div class="tubiao"> <span class="item">item</span> <span class="item">item</span> <span class="item">item</span> </div> </section> <section class="gray-area"> <div class="one"> <div class="img"> <img src="two.jpg"> </div> <h2>行走世界</h2> <p>我喜欢走走看看这个世界，小居生活的美好，尽在眼前</p> </div> <div class="two"> <div class="img2"> <img src="three.jpg"> </div> <h2>火车街头</h2> <p>火车的街头，暗黑的黎明，没有人会拒绝任何喧嚣</p> </div> <div class="three"> <div class="img3"> <img src="four.jpg"> </div> <h2>远看世界</h2> <p>看看世界，寻找世界的奇迹，走一走</p> </div> </section> <section class="jianjie"> <div class="rongqi"> <div class="jianjie2"> <h2>不约</h2> <div class="hr"> </div> <div class="sub-heading"> <p>welcome to XuLinJie_blog,Thank you.I'will paldsjsd sdnjks sndlk sdjsdsndjnjsndsd dksjdksfd df dfdsw</p> </div> </div> <div class="card"> <h3>精通HTML5</h3> <p>iweiw wje oj rjoe oejfoejoej feof oejf oeofejf oje ojfeoj oej ojfo jof sdsdsddqwwfddfdfsdfwefwdf ff</p> </div> <div class="card"> <h3>精通C++</h3> <p>iweiw wje oj rjoe oejfoejoej feof oejf oeofejf oje ojfeoj oej ojfo jofof sdsdsddqwwfddfdfsdfwefwdf </p> </div> <div class="card"> <h3>熟练php</h3> <p>iweiw wje oj rjoe oejfoejoej feof oejf oeofejf oje ojfeoj oej ojfo jofof sdsdsddqwwfddfdfsdfwefwdf </p> </div> <div class="card"> <h3>熟练Linux</h3> <p>iweiw wje oj rjoe oejfoejoej feof oejf oeofejf oje ojfeoj oej ojfo jofof sdsdsddqwwfddfdfsdfwefwdf f fd</p> </div> </div> </div> </section> </div><!--内容--> <footer> <ul class="share"> <li><img src="运动.png"></li> <li><img src="男.png"></li> <li><img src="积分.png"></li> <li><img src="鲜花.png"></li> <li><img src="图片.png"></li> <li><img src="付款.png"></li> </ul> <div class="last"> <span>© 许林杰-2017</span> </div> </footer><!--页脚--> </div> </body> </html>
CSS
*{
margin: 0px;
padding: 0px;
font-family: 微软雅黑;
}
.hr{
width: 100%;
height: 2px;
margin: 0px auto;
}
h2{
font-size: 30px;
}
h3{
font-size: 20px;
}
nav{
background: transparent;
width: 100%;
height: 50px;
position: fixed;
}
#banner{
background: rgba(0,0,0,0.03);
height: 700px;
}
nav ul{
list-style: none;
margin: 0;
}
nav ul li{
display: inline-block;
line-height: 50px;
float: right;
margin-right: 20px;
}
nav ul li a{
text-decoration: none;
line-height: 50px;
display: inline-block;
height: inherit;
color: #f9f6f6;
}
.logo1{
float: left;
margin-left: 20px;
letter-spacing: 3px;
}
#banner .center1{
max-width: 290px;
margin: 0px auto;
text-align: center;
position: relative;
top: 200px;
}
#banner .center1 h1{
margin: 0;
margin-bottom: 20px;
}
button{
margin-top: 15px;
border: none;
background-color: #5b5a5a;
color: #faf8f8;
padding: 14px 60px;
cursor: pointer;/*鼠标触及变小手*/
}
#banner .center1 .more{
margin-top:180px;
}
#banner .center1 .more a{
text-decoration: none;
color: #9c2029;
font-size: 18px;
}
/*内容*/
.biaoti{
margin-bottom: 20px;
}
.content .green-area{
background: #089D80;
color: #fff;
text-align: center;
padding: 100px 0px;
height: 300px;
}
.green-area .hr{
background: #056470;
width: 50%;
margin-top: 22px;
margin-bottom: 22px;
}
.green-area .tubiao .item{
display: inline-block;
text-align: center;
height: 80px;
width: 80px;
background-color: #08866d;
transform: rotate(45deg);
margin: 25px;
}
.gray-area{
background: #4a4949;
width: 100%;
height: 900px;
}
.one{
background-color: #6e6c6c;
width: 100%;
height: 300px;
}
.one .img img{
width: 500px;
height: 300px;
float: left;
}
.one p{
float: left;
position: relative;
left: 50px;
top: 150px;
}
.one h2{
float:left;
position: relative;
left:150px;
top:100px;
}
.two{
background-color: #373636;
width: 100%;
height: 300px;
}
.two .img2 img{
clear:both;
width: 500px;
height: 300px;
float: right;
}
.two p{
float: left;
position: relative;
left: 50px;
top: 150px;
}
.two h2{
float: left;
position: relative;
left:150px;
top:100px;
}
.three .img3 img{
clear:both;
width: 500px;
height: 300px;
float: left;
}
.three p{
float: left;
position: relative;
left: 50px;
top: 150px;
}
.three h2{
float: left;
position: relative;
left:150px;
top:100px;
}
.last-area{
background: #4a4949;
}
.jianjie{
background: #443576;
color: #fff;
height: 750px;
padding:100px;
line-height: 70px;
}
.rongqi{
width: 1080px;
margin: 0px auto;
}
.rongqi .jianjie2 h2,.sub-heading{
text-align: center;
}
.jianjie2 .hr{
background: #1d0c1c;
width: 60%;
}
.rongqi .jianjie2 .sub-heading{
max-width: 600px;
margin-left: 240px;
}
.card{
float: left;
position: relative;
left: 40px;
width: 50%;
min-height: 300px;
/*max-width: 400px;*/
padding: 50px;
box-sizing: border-box;
/*border: 1px solid white;*/
}
.card:first-child{
background: rgba(0,0,0,0.01);
}
.card:nth-child(2){
background: rgba(0,0,0,0.05);
}
.card:nth-child(3){
background: rgba(0,0,0,0.09);
}
.card:nth-child(4){
background: rgba(0,0,0,0.13);
}
.card:nth-child(5){
background: rgba(0,0,0,0.19);
}
/*脚*/
footer{
background: #333;
color: #fff;
height: 200px;
}
.share li{
display: inline-block;
margin: 30px;
}
.share{
display: inline-block;
position: relative;
left:600px;
}
.last span{
position: relative;
left:900px;
display: inline-block;
}
.main{
background: #444 url(one.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}八、部分知识点解析
1.对hr整体定义（细化也是需要定义的）
.hr{width: 100%;
height: 2px;
margin: 0px auto;
}
2.背景是图片，导航栏改为透明transparent
nav{background: transparent;
width: 100%;
height: 50px;
position: fixed;
}
#banner{
background: rgba(0,0,0,0.03);
height: 700px;
}
3.对按钮的配置，可通过padding来对按钮调节大小
button{margin-top: 15px;
border: none;
background-color: #5b5a5a;
color: #faf8f8;
padding: 14px 60px;
cursor: pointer;/鼠标触及变小手/
}
4.重点在于rotate，选择一块区域，这里是旋转45度
.green-area .tubiao .item{display: inline-block;
text-align: center;
height: 80px;
width: 80px;
background-color: #08866d;
transform: rotate(45deg);
margin: 25px;
}
5.简介部分的四块区域背景透明度不同效果，若不了解rgba可点击这里——–点击这里了解rgba
.card:first-child{background: rgba(0,0,0,0.01);
}
.card:nth-child(2){
background: rgba(0,0,0,0.05);
}
.card:nth-child(3){
background: rgba(0,0,0,0.09);
}
.card:nth-child(4){
background: rgba(0,0,0,0.13);
}
.card:nth-child(5){
background: rgba(0,0,0,0.19);
}
6.对页面背景的配置（一开始看到的那个背景），background-attachment：fixed;的意思就是固定此背景，下拉不变
.main{background: #444 url(one.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
九、总结体会
ps基础需要掌握在布局中不需要用很多div
图片的像素分辨率要高
整体布局之前，需要画框架
多多练习
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5静态网页实战开发—企业网页
- 如何判断一个网页是不是一个Blog的首页？
- 31套基于CSS的网页模板,作个人BLOG非常的COOL
- 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面
- [置顶] 搭建静态网页-day8-个人学习笔记
- [小改进]个人Blog首页显示随笔摘要
- 个人静态网页设计制作个人家乡介绍html网页学生代做网页成品
- 个人静态blog
- 个人小作品之某公司首页静态页面的制作
- ElasticSearch实战：个人博客搜索和首页内容展示
- 网页技术革命：精美绝伦的 HTML5 个人作品集网站
- Android 实战 - 个人App乐逗项目(查看网页链接封装,播放视频封装)
- 静态网页和动态网页-个人学习理解
- AOP思想个人理解以及实战静态代理、JDK动态代理、CGlib动态代理
- html实战-制作静态网页
- 个人的网站 仅仅做了一个静态的网页
- 通过github建立免费的个人网页（纯静态）
- HTML网页开发（燕十八）-实战首页布局-作业
- 个人静态网页 Jekyll github
- 实战day10（三）----网页静态化