IFE2015-task1-07

最新推荐文章于 2020-04-29 14:43:17 发布
最新推荐文章于 2020-04-29 14:43:17 发布
阅读量2.6k 收藏 1
点赞数 1
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li_zhuoqing/article/details/53363414
版权

2015百度前端技术学院任务一的第7部分，第一次写，结构还是很乱，以后有时间再重写吧。代码的github地址戳这里 点击打开链接。

今天学会怎么把本地HTML文件生成网址了呢，用的是Github-Pages，虽然还没有详细学，先放上来，效果戳这里戳这里：在线演示、

1、Index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="header">
        <div class="header-centerbody">
            <h1 class="ylg">YourLOGO</h1>
            <ul class="header-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="blog.html">文章</a></li>
                <li><a href="gallery.html">作品</a></li>
                <li><a href="about.html">关于</a></li>
            </ul>
        </div>
        <a class="git" href="http://github.com">
            <img src="https://github.com/baidu-ife/ife/blob/master/2015_spring/task/task0001/design/icon-github.png?raw=true" alt="icon-github">
        </a>
    </div>
    <div class="pic">
        <img src="https://github.com/baidu-ife/ife/blob/master/2015_spring/task/task0001/design/banner-bg.jpg?raw=true" alt="banner">
        <div class="description">
            <h2>标题1</h2>
            <p>  这里设置了白色背景的透明度渐变，通过ragb来设置css样式。这里是正文，学习使我快乐，呵呵呵。这里是正文，学习使我快乐，呵呵呵。这里是正文，学习使我快乐，呵呵呵。</p>
        </div>
    </div>
    <div id="mainbody">
        <div class="wrap">
            <div class="block1">
                <img src="F:\壁纸\liuchutian1.jpg" alt="p1">
                <div class="block1-body">
                    <p>  这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。<br>  这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。</p>
                </div>
            </div>
            <div class="block2">
                <img src="F:\壁纸\liuchutian5.jpg" alt="p2">
                <div class="block2-body">
                    <p>  这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。<br>  这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。</p>
                </div>
            </div>
            <div class="block3">
                <img src="F:\壁纸\liuchutian9.jpg" alt="p3">
                <div class="block3-body">
                    <p>  这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。<br>  这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。</p>
                </div>
            </div>
        </div>
    </div>
    <div id="person">
        <img src="F:\壁纸\liuchutian3.jpg" alt="leopard">
        <h2>Hi, I'm Liuchutian</h2>
        <p>
                   这是一段很长很长很长很长很长的自我介绍，这是一段很长很长很长很长很长的自我介绍。这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。这里是正文，学前端使我快乐，今天下雪啦，刘楚恬好可爱。我觉得微软雅黑更好看。
        </p>
    </div>
    <div id="footer">
        <div class="menu">
            <ul class="footer-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="blog.html">文章</a></li>
                <li><a href="gallery.html">作品</a></li>
                <li><a href="about.html">关于</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li class="title">学习资料</li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">Nover时样式</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
            <ul>
                <li class="title">友情链接</li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">Nover时样式</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
            <ul>
                <li class="title">学习资料</li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">Nover时样式</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
            <ul>
                <li class="title">学习资料</li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">Nover时样式</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
            <ul class="last">
                <li class="title">友情链接</li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">Nover时样式</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
        </div>
        <div class="copyright">
            <p>版权信息</p>
            <a href="http://github.com/Gaohaoyang">
                <img src="https://github.com/baidu-ife/ife/blob/master/2015_spring/task/task0001/design/icon-github.png?raw=true" alt="icon-github">
            </a>
        </div>
    </div>
</body>
</html>

2、blog.html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
        <div class="header-centerbody">
            <h1 class="ylg">YourLOGO</h1>
            <ul class="header-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="blog.html">文章</a></li>
                <li><a href="gallery.html">作品</a></li>
                <li><a href="about.html">关于</a></li>
            </ul>
        </div>
        <a class="git" href="http://github.com">
            <img src="https://github.com/baidu-ife/ife/blob/master/2015_spring/task/task0001/design/icon-github.png?raw=true" alt="icon-github">
        </a>
    </div>
    <div id="main-blog">
    <div class="wrap">
   <div class="wrap-left">
    <div class="left">
    <div class="box1">11.24</div>
    <div class="box2">CSS</div>
    <h1>Web前端入门之静态页面</h1>
    <h2>这是我切的第二张图</h2>
    <p>       学习总结见博客 <a class="myblog" href="http://write.blog.csdn.net/postlist">Zoe的CSDN博客</a> 
    HTML和CSS部分看起来很简单，亲自动手写起来还是挺麻烦的。但熟能生巧，多用多练，常用的一些CSS样式要随时记下来，浮动，定位，盒模型的设置方法，布局技巧等。切完task1的图，就开始认真学JavaScript啦。学前端使我快乐呵呵呵，相对来说还是挺喜欢干这些简单无脑的事情hhh没救了。<br>       这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文。<br>       这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文。<br>       这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文。
    <br>       这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文。</p>
    <p class="author">Zoe 发表于2016年11月24日</p>
    </div>
    <div class="left">
    <div class="box1">11.24</div>
    <div class="box2">CSS</div>
    <h1>这里是这篇文章的标题</h1>
    <h2>这里是这篇文章的副标题</h2>
    <p>       这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文。<br>       这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文，这里是正文
最低0.47元/天 解锁文章
Zoe_慕子晴
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VisualInfoMap:百度IFE 2015的任务存储库。来源github.combaidu-ifeifetreemaster2015_summer
05-17
VisualInfoMap Task Repository for Baidu IFE 2015 #备忘 ##任务日程： 热身任务：7月15日 至 7月17日 任务一实践：7月18日 至 7月26日 任务二实践：7月27日 至 8月9日 中期交叉Review及教学：8月10日 至 8月14日 自由命题任务实践：8月15日 至 9月7日 任务评比：9月7日 至 9月15日 ##约定的编码规范 ##热身任务 ##任务一
学习笔记-ife2015task0001(一)
饮tom的博客
04-23 423
学习笔记-ife2015task0001(一) 极慢速学习前端一个月。最近在做百度ife的task0001的7综合练习，记下遇到的问题。 然后就是任务中要求：不需要写任何JavaScript，只需要关注HTML、CSS。所以都是用css和html实现的 初始，题目就有一个要求： 页面实际内容宽度为980px，头部背景、大图、底部背景均为100%宽，当浏览器宽度低于980px时，页面宽度不变，允许出...
ife2015spring-task0001笔记总结
Capgras的博客
04-29 354
盒模型及定位 6.1 任务描述 Q1. 用两种方法来实现一个背景色为红色、宽度为960px的DIV在浏览器中居中 效果图： 方法一：巧用margin <div id="method1"></div> <!--方法一：巧用margin--> div#method1 { background-color: red; width:960px; ...
IFE2015-task1
Zoe_慕子晴的博客
11-19 3501
1、用HTML实现如下简单界面 html代码： task0001 MyGithubAccountName Homepage Blog 这是二级标题 这是我的第一个HTML页面，这里有一个文字段落 2、用CSS为上面界面增加样式 css代码： h1{color:blue;} h2{font-size: 14px
百度IFE前端学院2016年任务习题汇总
热门推荐
PkJY
05-10 1万+
2016年的学院貌似只开春季一季就不再办了，这里是github地址， 百度IFE前端学院任务Github地址 16年的任务分为4大阶段，15年的则是分为了春季和秋季两季。 具体内容可以查看github里面每一阶段的readme.md。个人Github：http://pkjy.github.io 欢迎互相学习交流。
baidu-ife-task
05-05
【压缩包子文件的文件名称列表】"baidu-ife-task-master" 暗示这是一个Git仓库的主分支，可能包含了所有任务的源代码、测试用例、文档和其他资源。参与者可能需要克隆这个仓库，按照任务要求编写代码，并提交他们的...
ife-ria-task1
05-18
我们是参加2015年百度暑期前端学习夏令营的WebApp杨帆班的一支队伍 ##我们要完成什么任务呢 建立一个Github的项目仓库，在这个项目中建立一个自己队伍的介绍网站，网站中需要包括队伍介绍的内容、每个队员介绍的内容...
2016ife-task:2016百度前端技术学院任务
05-11
这个训练计划的附件源码“2016ife-task-master”很可能包含了每个任务的示例代码，供学员参考和学习。通过分析和修改这些代码，学员可以深入理解各个知识点，并逐步提高自己的前端开发能力。 总的来说，这个任务...
ife-task0002:生活任务0002评论
06-02
【ife-task0002:生活任务0002评论】这个标题可能指的是一个编程学习项目，其中"ife"可能是“互联网金融工程师”（Internet Finance Engineer）训练营或课程的缩写，而"task0002"则代表该项目中的第二个任务。...
ife-task9暂存
09-20
ife task9暂存
ife-kimoji.github.io:ife2015暑假培训启航班warm up-kimoji小队的首页
05-19
homepageOfkimoji ife2015暑假培训启航班warm up-kimoji小队的首页 #Team member -dennisleung -LenHeartLin -eggholiday
百度ife2015-小白的弯路1
weixin_30597269的博客
05-10 98
header部分 遇到的问题： 1.设置背景宽度为100%时，当浏览器低于980px时，出现横向滚动条，滚动滚动条，发现背景颜色是白色，而不是紫色 由于只设置了header的背景颜色，而没有设置header-main的背景颜色，其默认为透明的；而header的背景颜色的宽度为实际浏览器的宽度，超出浏览器宽度的位置自然为默认的颜色，故需重新给header-main添加背景颜色。 2.当浏览器低于98...
百度前端技术学院（IFE）2017春-热身任务
Abby同学思考的地方
02-17 2687
第0关 第1关 F12后看代码，找到一串奇怪的字符，后来的同学可以直接find"text-panel" 根据后面奇怪的“==”，将这串字符用Base64解码 第2关 F12后，拖动浏览器改变大小，突然就well done了，我也很懵Σ(っ °Д °;)っ 第3关 第4关 妄图回头吃新增的
html学习笔记——ife task0001
weixin_30292843的博客
04-27 130
花了两三天大概看完html和css基本用法，但到自己布局的时候还是很懵不知道从哪里入手啊，就找了个简单的任务（ife2015 spring）试一下。 之前不涉及到布局的跳过，从涉及到position和float的开始，这一块看的有点晕，结合下面的例子搞懂了。 例：用两种方法来实现一个背景色为红色、宽度为960px的<DIV>在浏览器中居中。我用了三种方法。代码如下： &...
(HTML+CSS基础)ife-task0001 总结！
岁暮少年玻璃心
11-13 666
第一次写这样的总结，轻喷！！！写写这个任务里面遇到的自己遇到的问题和解决办法！！ 因为不是边写代码边写总结的，所以想到什么写什么了！！
ife 2015 task2记录（1）
weixin_42481639的博客
12-28 345
1. 数据类型 // 判断arr是否为一个数组，返回一个bool值 function isArray(arr) { // your implement } // 判断fn是否为一个函数，返回一个bool值 function isFunction(fn) { // your implement } 思路：基本类型的判别用typeOf(),引用类型的判别用instanceOf() ...
百度ife前端2015春task练习记录02
xinluo3710的专栏
09-08 434
百度前端学院（IFE）2015春练习记录02
百度ife前端2015春task练习记录01
xinluo3710的专栏
09-08 501
百度前端学院（IFE）2015春练习记录
html右边折叠面板,2017IFE-使用CSS实现折叠面板
最新发布
05-13
1. `.panel-container` 设置容器的宽度和高度，并设置为相对定位，以便内部元素进行定位。 2. `.panel-header` 设置折叠面板的标题栏样式，包括高度、背景色、边框和光标样式。 3. `.panel-header h3` 设置标题栏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值