HTML5+CSS大作业——程序员个人博客(6页) 关于制作网页主题论述
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
🧡作者主页-更多源码
🧡HTML期末大作业文章专栏
文章目录
- HTML5+CSS大作业——程序员个人博客(6页) 关于制作网页主题论述
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="plugin/layui/css/layui.css">
<link rel="stylesheet" href="css/common.css">
<script>
var articleId=30;
</script>
</head>
<body>
<header>
<div class="layui-row header-bigimg"></div>
<div class="layui-row subject-color nav-row">
<div class="main-content nav-menu">
<div class="layui-row">
<div class="layui-col-md2 logo-box">
<a href="#" title="首页，聚繁分享">
<img src="imgs/canreplace/logo.png" alt="logo">
</a>
</div>
<div class="layui-col-md7 menu-box">
<ul class="menu-ul">
<a href="index.html">
<li>首页</li>
</a>
<a href="columntype.html">
<li>技术文章</li>
</a>
<a href="#">
<li>程序人生</li>
</a>
<a href="#">
<li>生活</li>
</a>
<a href="content.html">
<li>内容页</li>
</a>
<a href="#">
<li>关于我、关于博客</li>
</a>
</ul>
</div>
<div class="layui-col-md3 search-box">
<div class="search-input-div">
<div class="layui-row">
<div class="layui-col-md10 input-box">
<input class="search-input" placeholder="请输入关键字进行搜索">
</div>
<div class="layui-col-md2 search-btn-box">
<img src="imgs/icon/search.png" height="36" width="36"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="main-content item-box">
<div class="item-left">
<div class="layui-row carousel-box">
<div class="layui-carousel" id="my-carousel" lay-filter="carouselimg">
<div carousel-item>
<div><img src="imgs/carousel1.jpg"/></div>
<div><img src="imgs/carousel2.jpg"/></div>
<div><img src="imgs/carousel3.jpg"/></div>
<div><img src="imgs/carousel4.jpg"/></div>
<div><img src="imgs/carousel5.jpg"/></div>
</div>
</div>
</div>
<div class="layui-row box-bg lunbo-textbox">
<a href="#" class="font-size2 font-color1 cursor-pointer">每个强者都会有背后的辛酸挫折</a>
</div>
<div class="three-pane-box layui-row layui-col-space20">
<div class="layui-col-md4">
<div class="col-nei-div cursor-pointer pane-radius">
<img src="imgs/carousel1.jpg"/>
</div>
<div class="item-text-div bottom-radius layui-elip">
<a href="#" class="cursor-pointer">每个强者都会有背后的辛酸挫折</a>
</div>
</div>
<div class="layui-col-md4">
<div class="col-nei-div cursor-pointer pane-radius">
<img src="imgs/carousel2.jpg"/>
</div>
<div class="item-text-div bottom-radius layui-elip">
<a href="#" class="cursor-pointer">之所以洒脱，是因为懂得取舍</a>
</div>
</div>
<div class="layui-col-md4">
<div class="col-nei-div cursor-pointer pane-radius">
<img src="imgs/carousel3.jpg"/>
</div>
<div class="item-text-div bottom-radius layui-elip">
<a href="#" class="cursor-pointer">弱水三千只取一瓢</a>
</div>
</div>
</div>
<div class="one-sharetype-box layui-row box-bg">
<div class="layui-col-md5">
<div class="item-img-box">
<img src="imgs/carousel5.jpg"/>
</div>
</div>
<div class="oneshare-content layui-col-md7">
<h3 class="font-bold2 font-size3 font-color4 layui-elip">Windows10 专业版系统下载</h3>
<div class="oneshare-msg-row layui-row font-color3 font-size1">
<p>Windows 10将会让搜索和使用信息更加简单，包括本地、网络和互联网搜索功能,直观的用户体验将更加高级,还会整合自动化应用程序提交和交叉程序数据透明性。
Windows 10操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之间搭建沟通桥梁,同时也会开启企业级的数据保护和权限许可。
Windows 10大幅缩减了Windows 的启动速度，系统加载时间一般不超过20秒,开机速度相比Windows 其他的操作系统提升了28%，更加安全可靠！</p>
</div>
<div class="look-more layui-row">
<a href="#" class="layui-btn layui-btn-sm pane-radius subject-color">查看更多</a>
<a href="#" class="layui-btn layui-btn-sm layui-btn-normal pane-radius">免费获取</a>
</div>
</div>
</div>
<div class="heng-guangao layui-row box-bg">
<img src="imgs/hengguangao.jpg">
</div>
<div class="type-module layui-row layui-col-space20">
<div class="layui-col-md6">
<div class="type-module-item layui-row">
<div class="item-title-row layui-row row-align">
<div class="layui-col-md10 row-align font-size2">
<div class="left-icon"></div>
<span class="font-bold">编程分享</span>
</div>
<div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
<a href="#">更多</a>
</div>
</div>
<div class="item-ul-row layui-row">
<ul>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="type-module-item layui-row">
<div class="item-title-row layui-row row-align">
<div class="layui-col-md10 row-align font-size2">
<div class="left-icon"></div>
<span class="font-bold">程序人生</span>
</div>
<div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
<a href="#">更多</a>
</div>
</div>
<div class="item-ul-row layui-row">
<ul>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="layui-col-md9 layui-elip font-size2">> <a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
<div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
</div>
</li>
<li>
<div class="ul-li-div layui-row row-align">
<div class="main-content">
<strong>Copyright</strong> 2019.01.16 by <a href="#">大BUG</a><span>备案号：<a href="http://www.miitbeian.gov/" target="_blank">蜀ICP备16031990号-2</a></span>
</div>
</div>
</footer>
<script src="plugin/layui/layui.js"></script>
<script>
layui.use(['carousel','jquery','layer'], function(){
var carousel = layui.carousel;
var $=layui.$;
var layer=layui.layer;
//建造实例
carousel.render({
elem:'#my-carousel',
width:'100%',
height:'300px',
anim:'fade',
interval:5000
});
//监听轮播切换事件
var carouselTextArr=[
'每个强者都会有背后的辛酸挫折',
'之所以洒脱，是因为懂得取舍',
'弱者，任思想控制行为，强者，让行为控制思想',
'弱水三千只取一瓢',
'随图片轮播切换的文字'
];
carousel.on('change(carouselimg)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
console.log(obj.index); //当前条目的索引
console.log(obj.prevIndex); //上一个条目的索引
console.log(obj.item); //当前条目的元素对象
$(".lunbo-textbox a").text(carouselTextArr[obj.index]);
});
});
</script>
</body>
</html>
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
更多推荐
HTML5+CSS大作业——程序员个人博客(6页) 关于制作网页主题论述
发布评论