第十天作业：博客首页
作业页面效果见视频链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面</title>
<link href="main1.css" type="text/css" rel="stylesheet" />
</head>
<script src="jquery-1.11.1.min.js"></script>
<script src="unslider.min.js" type="text/javascript"></script>
<body>
<div id="head"> <!--头部-->
<div id="head1"> <!--图标-->
<a href="../个人介绍界面/japhi.html"><img src="cangjian.png" style="vertical-align:middle" class="container"/></a>
<span style="color:#FFFF00">旧时微风拂旧城</span> <span>首页 下载app</span>
<input type="text" class="sousuo" placeholder="搜索" />
</div>
<div id="head2"> <!--按钮-->
<i class="writebtn">写文章</i>
<a class="hsignup">注册</a>
<a class="hlogin">登录</a>
</div>
</div>
<div id="first"> <!--主界面-->
<div id="article"> <!--内容-->
<div class="banner" id="b04"> <!--轮播图-->
<ul class="bannerBox">
<li><img src="lunbo01.jpg" alt=""/></li>
<li><img src="lunbo02.jpg" alt=""/></li>
<li><img src="lunbo03.jpg" alt=""/></li>
<li><img src="lunbo04.jpg" alt=""/></li>
<li><img src="lunbo05.jpg" alt=""/></li>
</ul>
<a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a>
<a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a>
</div>
<script>
$(document).ready(function(e) {
var unslider04 = $('#b04').unslider({
dots: true
}),
data04 = unslider04.data('unslider');
$('.unslider-arrow04').click(function() {
var fn = this.className.split(' ')[1];
data04[fn]();
});
});
</script>
</div>
<div id="article2"> <!--内容块-->
<div id="listc"> <!--文章分类-->
<a class="collection" target="_blank" href="https://www.zhihu.com/topic/19554827/hot">
<img src="sports.png" /><div class="name">体育</div>
</a>
<a class="collection" target="_blank" href="https://www.zhihu.com/topic/19550429/hot">
<img src="moives.png" /><div class="name">电影</div>
</a>
<a class="collection" target="_blank" href="http://jx3.xoyo.com/">
<img src="games.png" /><div class="name">游戏</div>
</a>
<a class="collection" target="_blank" href="https://www.zhihu.com/topic/19559052/hot">
<img src="soccer.jpg" /><div class="name">足球</div>
</a>
<a class="collection" target="_blank" href="https://www.zhihu.com/topic/19552832">
<img src="python.png" /><div class="name">python</div>
</a>
<a class="collection" target="_blank" href="https://www.zhihu.com/topic/19550517">
<img src="internet.png" /><div class="name">互联网</div>
</a>
<a class="collection" target="_blank" href="https://www.zhihu.com/explore">
<img src="more.jpg" />
</a>
</div>
<div id="content"> <!--内容-->
<div class="content1">
<div class="conauthor"> <!--作者-->
<a target="_blank"><img src="shadiren.jpg" class="pic"/></a>
<a target="_blank" class="authorname">沙地人</a>
<a target="_blank" class="guanzhu">关注</a>
</div>
<div style="height:288px"> <!--图片-->
<img src="shadirenc.jpg" style="padding:0 9px"/>
</div>
<div class="jieshao"> <!--介绍-->
<p>我已记不清画过几次海边了，其中有外婆家的海边，梦里的海边，更多的是脑海中的海边。</p>
</div>
</div>
<div class="content1">
<div class="conauthor"> <!--作者-->
<a target="_blank"><img src="mowan.jpg" class="pic"/></a>
<a target="_blank" class="authorname">莫挽离人手</a>
<a target="_blank" class="guanzhu">关注</a>
</div>
<div style="height:288px"> <!--图片-->
<a href="http://www.jianshu.com/p/113c1df6968d"><img src="lasha.jpg" style="padding:0 9px"/></a>
</div>
<div class="jieshao"> <!--介绍-->
<p>四季之中，日月晨昏，西藏每时每刻都变幻着不同的魅力。因为它有美丽的拉萨啊。</p>
</div>
</div>
<div class="content1">
<div class="conauthor"> <!--作者-->
<a target="_blank"><img src="zhuansanqian.jpg" class="pic"/></a>
<a target="_blank" class="authorname">专三千</a>
<a target="_blank" class="guanzhu">关注</a>
</div>
<div style="height:288px"> <!--图片-->
<a href="http://www.jianshu.com/p/4f96e0cb8198"><img src="xiyou.jpg" style="padding:0 9px"/></a>
</div>
<div class="jieshao"> <!--介绍-->
<p>情不深才浅 话不少字垣 颜不高腿欠 身不动神远 </p>
</div>
</div>
<div class="content1">
<div class="conauthor"> <!--作者-->
<a target="_blank"><img src="sanshu.jpg" class="pic"/></a>
<a target="_blank" class="authorname">三俗哥</a>
<a target="_blank" class="guanzhu">关注</a>
</div>
<div style="height:288px"> <!--图片-->
<a href="http://www.jianshu.com/p/01d787735cb2"><img src="bicycle.jpg" style="padding:0 9px"/></a>
</div>
<div class="jieshao"> <!--介绍-->
<p>共享单车，是不是“侵贪国家巨额财产”？是不是“城市的毒瘤”？ </p>
</div>
</div>
<div class="content1">
<div class="conauthor"> <!--作者-->
<a target="_blank"><img src="super.jpg" class="pic"/></a>
<a target="_blank" class="authorname">Super安浅浅</a>
<a target="_blank" class="guanzhu">关注</a>
</div>
<div style="height:288px"> <!--图片-->
<a href="http://www.jianshu.com/p/ec2ba2be3732"><img src="yourname.jpg" style="padding:0 9px"/></a>
</div>
<div class="jieshao"> <!--介绍-->
<p>即使我忘记你的名字，忘记你的样子，但我不会忘记我爱你，你的过去梦中的我依稀参与。</p>
</div>
</div>
<div class="content1">
<div class="conauthor"> <!--作者-->
<a target="_blank"><img src="langwang.jpg" class="pic"/></a>
<a target="_blank" class="authorname">狼王KG</a>
<a target="_blank" class="guanzhu">关注</a>
</div>
<div style="height:288px"> <!--图片-->
<a href="http://www.jianshu.com/p/92cd09c5f524"><img src="c.jpg" style="padding:0 9px"/></a>
</div>
<div class="jieshao"> <!--介绍-->
<p>我唯有努力到让人难以望我项背，才能使那些旁观者对我的所有质疑，变成可笑的庸人自扰。</p>
</div>
</div>
</div>
</div>
<div class="v"> <!--竖条-->
</div>
<div id="article3"> <!--内容右导航块-->
<div id="notice"> <!--榜单-->
<a class="notice1" target="_blank" style="background-color:#FF6633">日榜
</a>
<a class="notice1" target="_blank" style="background-color:#FFCC00">周榜
</a>
<a class="notice1" target="_blank" style="background-color:#00CC00">月榜
</a>
</div>
<div id="author1"> <!--推荐作者-->
<p>推荐作者</p>
<ul class="list1">
<li><a href="http://www.jianshu.com/u/eea405145fd4" target="_blank"><img src="yelinglang.jpg" /><div class="name" style="background-color:#FFFFFF">夜灵狼</div></a></li>
<li><a href="http://www.jianshu.com/u/62478ec15b74" target="_blank"><img src="huaizuotongx.jpg" /><div class="name" style="background-color:#FFFFFF">怀左同学</div></a></li>
<li><a href="http://www.jianshu.com/u/af9d9c4db83d" target="_blank"><img src="liangziguniang.jpg" /><div class="name" style="background-color:#FFFFFF">凉子菇娘</div></a></li>
<li><a href="http://www.jianshu.com/u/45a15c9b5a22" target="_blank"><img src="lixiaomao.jpg" /><div class="name" style="background-color:#FFFFFF">狸小猫</div></a></li>
<li><a href="http://www.jianshu.com/u/142e2fb13ad1" target="_blank"><img src="yichoulan.jpg" /><div class="name" style="background-color:#FFFFFF">一酎蓝</div></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="boot"> <!--尾部-->
<p style="text-align:center" style="color:#FF3366">旧时微风拂旧城 版权所有！<br />地址：武汉市武昌区友谊大道368号 邮编：430062 邮箱：749215365@qq.com</p>
</div>
</body>
</html>
第十天作业：博客首页相关推荐
- 【SpringBoot搭建个人博客】- 博客首页显示（十）
博客地址:ONESTARの客栈 源码领取方式一: 扫一扫文末二维码,关注公众号[编程日刊],后台回复[博客],即可领取源码 源码领取方式二: 前端页面源码地址:https://github.com/o ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）...
缘起 书说前两篇文章< 十五 ║ Vue前篇:JS对象&字面量&this>和 < 十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面 ...
- #我要上首页# 新版博客首页来了，做明星博主还会远吗？
千呼万唤始出来,新版博客首页终于如期与大家相见了! 这一次首页改版,除了发布全新LOGO,提升UI视觉体验外,更重要的是我们开疆扩土,增加了很多新分类,同时极大的开拓了原创文章的展示空间! 那么问题来 ...
- 怎么发表博客，还不能显示在自己的博客首页上，这还不如玩单机！
怎么发表博客,还不能显示在自己的博客首页上,这还不如玩单机! 怎么发表博客,还不能显示在自己的博客首页上,这还不如玩单机! 怎么发表博客,还不能显示在自己的博客首页上,这还不如玩单机! 转载于:htt ...
- Django 博客开发教程 6 - 真正的 Django 博客首页视图
在此之前我们已经编写了 Blog 的首页视图,并且配置了 URL 和模板,让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应.不过我们仅仅在首页返回了一句话:欢迎访问我的博客 ...
- 装饰博客全攻略（如何在博客首页或博客中插入图片、音乐、视频等）
一.在博客中插入图片. 以下是代码: <img src="http://图片地址" border="0" width="344" he ...
- Wordpress博客首页能打开 子页打不开解决办法
刚安装了wordpress最新版本3.8.2,结果wordpress博客首页倒是能打开,但是子页面,分类页面,tag页面都打不开,全部是404错误,这是什么原因呢? Wordpress博客首页能打开 ...
- vuepress-theme-reco@1.x 解决博客首页 与 仓库README不兼容问题
问题描述 基于 vuepress-theme-reco 可以搭建简介优雅的博客,利用github pages进行自动化部署,非常方便,而且无需额外成本.示例网站参考:https://www.dukti ...
- 运用HTML+CSS做CSDN博客首页
原标题:运用前端知识做CSDN博客首页 文章目录 原标题:运用前端知识做CSDN博客首页 1. 看一下实现的代码效果 2.怎样实现 2.1 导航栏 2.2 盒子一 2.3 盒子二 2.3 盒子三 3. ...
- Hexo+gitee，NexT主题搭建个人博客首页图标为方框问题
Hexo+gitee,NexT主题搭建个人博客首页图标为方框问题 1.问题描述 使用Hexo+gitee搭建个人博客时,NexT主题使用的图标显示为方框 2.原因 Access to font at ...
最新文章
- 蹭了BCH热度，还来诋毁BCH，这些跳梁小丑到底在玩什么阴谋？
- Broadcast应用场景分析
- HASHSET不能预留容量问题
- CentOS x64上Matlab R2015b的镜像安装方法与卸载
- wp7 通过后台代码给ListBoxItem添加ContextMenu 属性
- 【转】Java 枚举7常见种用法
- mysqli模块的安装
- HTML5移动端音乐播放器（启蒙篇）
- 重构-改善既有代码的设计(1)
- html的学习思维导图
- CentOS上搭建Nginx + Mono 运行 asp.net
- 小波说雨燕 第三季 构建 swift UI 之 度假清单 学习笔记
- 布丰投针试验的仿真和误差估计
- 3. PSR-3 --- 日志接口
- 数学建模之统计回归模型详解
- 大数据培训：hadoop基础教程
- python微博_Python脚本实现自动发带图的微博
- 借助云开发实现小程序朋友圈的发布与展示
- php 没有读取权限能不能复制,“需要提供管理员权限才能复制此文件夹”怎么办...
- 新配置的https证书提示无效