-
HTML学生个人网站作业设计：(宠物官网8页)——bootstarp响应式含有轮播图，响应式页面
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业，Web大学生网页-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
前端学习路线
（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）网页基本结构
(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
网页演示
HTML结构代码
DOCTYPE HTML> <html class="no-js" lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hometitle> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/magnific-popup.css" rel="stylesheet" type="text/css"> <link href="css/owl.carousel.css" rel="stylesheet" type="text/css"> <link href="css/owl.theme.css" rel="stylesheet" type="text/css"> <link href="css/color1.css" rel="stylesheet" type="text/css"> <link href="http://www.ylcp.shop/files/files/1649494603089/css/custom.css" rel="stylesheet" type="text/css"> <script src="js/modernizr.js">script> head> <body class="home"> <div class="body"> <header class="topbar"> <div class="container"> <div class="header-info-col"> <i class="fa fa-phone">i> <strong>0512-57995109 strong> div> <div class="header-info-col"> <i class="fa fa-envelope-o">i> <strong><a href="javascript:;">Cindy@kindjob.cna>strong> div> <div class="header-info-col"> <i class="fa fa-map-marker">i> <strong>昆山市庆丰西路639号智谷创意工业园301strong> div> div> header> <header class="site-header-wrapper"> <div class="site-header"> <div class="container"> <div class="site-logo"> <a href="" title="Obsequy" class="default-logo"><img src="picture/logo.png" alt="Obsequy">a> div> <a href="#" id="menu-toggle"> <i class="fa fa-bars">i> a> <nav class="main-navigation pull-right"> <ul class="dd-menu sf-menu"> <li class="active"> <a href="" title="Home"><span>首页span>a> li> <li> <a href="kinds.html" title="About"><span>宠物品种span>a> li> <li> <a href="shop.html" title="Shop"><span>宠物用品span>a> li> <li> <a href="blog.html" title="Services"><span>萌宠资讯span>a> li> <li> <a href="about.html" title="Blog"><span>关于我们span>a> li> <li> <a href="contact.html" title="Send Flowers"><span>联系我们span> <img src="picture/flower-e1476975452944.png" alt="">a> li> ul> nav> div> div> header> <div class="hero-slider heroflex flexslider" data-autoplay="yes" data-pagination="no" data-arrows="yes" data-style="slide"> <ul class="slides"> <li style="background-image:url(picture/bg_slide2.jpg);"> li> <li style="background-image:url(picture/bg_slide3.jpg);"> li> ul> div> <div class="secondary-bg cta"> <div class="container"> <a href="contact.html" class="btn btn-default btn-transparent btn-rounded pull-right">联系我们a> <h3 class="white-text margin-0">我们的宠物服务更涵盖了宠物的衣食住行医疗等方面。h3> div> div> <div class="main" role="main"> <div id="content" class="content full"> <div class="container"> <div class="row"> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——span>我们的服务<span>——span>h2> <p>美好的陪伴来自温暖的生命p> div> <img src="picture/gou.png" alt=""> <div class="spacer-50">div> div> div> <div class="parallax parallax1 padding-tb75" style="background:url(picture/b1.jpg);"> <div class="container"> <div class="row no-gutters secondary-bg"> <div class="col-md-3"> <div class="padding-all27"> <p class="white-text"> 动物是人类的朋友。在这里，每一个热爱宠物的人<br>不但能找到他们想要的，而且能得到比他们想要的更多。p> <a href="kinds.html" title="" class="btn-all">所有品种 <i class="vc_btn3-icon fa fa-chevron-right">i> a> div> div> <div class="col-md-9 bg-white"> <div class="carousel-area"> <div class="carousel-wrapper-outer"> <h2>萌宠展示h2> <div class="carousel-wrapper"> <div class="row"> <ul class="owl-carousel carousel-fw" data-columns="3" data-autoplay="" data-pagination="no" data-arrows="yes" data-single-item="no" data-items-desktop="3" data-items-desktop-small="3" data-items-tablet="2" data-items-mobile="1"> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/img4-350x500.jpg" alt="">a> <div class="grid-item-content"> <h3>法国斗牛犬h3> <hr class="sm"> <span class="meta-data">聪明敏捷 开朗不常吠span> div> div> li> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/img5-350x500.jpg" alt="">a> <div class="grid-item-content"> <h3>金毛犬 h3> <hr class="sm"> <span class="meta-data">热情友善 自信且不怕生span> div> div> li> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/depositphotos_125040540_original-350x500.jpg" alt="">a> <div class="grid-item-content"> <h3>萨摩耶 h3> <hr class="sm"> <span class="meta-data">乖巧可爱 微笑天使span> div> div> li> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/Depositphotos_6699049_original-350x500.jpg" alt="">a> <div class="grid-item-content"> <h3>布偶猫h3> <hr class="sm"> <span class="meta-data">温顺好静 对人友善span> div> div> li> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/Depositphotos_67927599_original-350x500.jpg" alt="">a> <div class="grid-item-content"> <h3>短毛猫h3> <hr class="sm"> <span class="meta-data">生性聪明 性格温顺span> div> div> li> ul> div> div> div> div> div> div> div> div> <div class="container"> <div class="spacer-70">div> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——span>我们的保障<span>——span>h2> div> <div class="spacer-35">div> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="icon-box ibox-center ibox-secondary ibox-outline ibox-effect ibox-plain"> <div class="ibox-icon"> <i class="fa fa-microphone">i> div> <h3>设备先进h3> <p>设施完备，设备先进，为他们提供了最大化的日常生活便利。p> div> div> <div class="col-md-4 col-sm-4"> <div class="icon-box ibox-center ibox-secondary ibox-outline ibox-effect ibox-plain"> <div class="ibox-icon"> <i class="fa fa-gavel">i> div> <h3>专业团队h3> <p>拥有多位教学经验丰富的A级宠物美容老师和注册宠物兽医师任教p> div> div> <div class="col-md-4 col-sm-4"> <div class="icon-box ibox-center ibox-secondary ibox-outline ibox-effect ibox-plain"> <div class="ibox-icon"> <i class="fa fa-anchor">i> div> <h3>优质宠物用品h3> <p>涉及囊括了宠物食品、医疗保健品、洗护用品、用品用具、窝包服饰、宠物玩具、美容工具等 p> div> div> div> <div class="spacer-35">div> div> <div class="banner parallax parallax2" style="background-image:url(picture/b2.jpg);"> <div class="accent-overlay">div> <div class="banner-caption text-align-center"> <div class="container"> <h2 style="font-weight: 100;">宠物之恋，在于关爱，让你的爱宠享受家的感觉h2> div> div> div> <div class="gray-bg"> <div class="container"> <div class="spacer-90"> <div class="spacer-90"> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——span>我们的团队<span>——span>h2> <p>凭借阵容强大的专家团队、媲美港台的医疗设备、遵循规范、严谨的作业流程，p> div> div> div> <div class="carousel-wrapper" style="margin-top: 70px;"> <div class="row"> <ul class="owl-carousel carousel-fw" data-columns="4" data-autoplay="" data-pagination="no" data-arrows="no" data-single-item="no" data-items-desktop="4" data-items-desktop-small="4" data-items-tablet="2" data-items-mobile="1"> <li class="item"> <div class="grid-item service-grid-item service-carousel-item format-standard"> <a class="media-box"><img src="picture/image4-500x320.jpg" alt="">a> <div class="grid-item-content"> <h3 class="post-title"> <a>某某某a> h3> <hr class="sm"> <p>执业兽医师，国际认证资深宠物美容导师。p> div> div> li> <li class="item"> <div class="grid-item service-grid-item service-carousel-item format-standard"> <a class="media-box"><img src="picture/image1-500x320.jpg" alt="">a> <div class="grid-item-content"> <h3 class="post-title"> <a>某某某a> h3> <hr class="sm"> <p>B级美容师，注册兽医师，理论与实践经验丰富。p> div> div> li> <li class="item"> <div class="grid-item service-grid-item service-carousel-item format-standard"> <a class="media-box"><img src="picture/image5-500x320.jpg" alt="">a> <div class="grid-item-content"> <h3 class="post-title"> <a>某某某a> h3> <hr class="sm"> <p>A级宠物美容师，擅长泰迪的各种造型。p> div> div> li> <li class="item"> <div class="grid-item service-grid-item service-carousel-item format-standard"> <a class="media-box"><img src="picture/image6-500x320.jpg" alt="">a> <div class="grid-item-content"> <h3 class="post-title"> <a>某某某a> h3> <hr class="sm"> <p>宠物医院主诊，宠物美容培训中心讲师。p> div> div> li> ul> div> div> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——span>萌宠资讯<span>——span>h2> <p>从分享你我的养宠心情到爱宠人之间的经验交流p> div> <div class="spacer-35">div> <div class="our-services"> <div class="carousel-wrapper padding-tb0"> <div class="row"> <ul class="owl-carousel carousel-fw" data-columns="2" data-autoplay="5000" data-pagination="yes" data-arrows="no" data-single-item="no" data-items-desktop="2" data-items-desktop-small="2" data-items-tablet="2" data-items-mobile="1"> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="#" class="media-box"> <img src="picture/img17-600x400.jpg"> a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08span> <span class="post-month">Novspan> div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="blog-show.html">幼犬为什么容易得犬瘟和细小a> h3> <p>刚从狗贩子手里买来的小狗，抵抗力弱、环境恶劣、护理不当，身体基础很差。到家后...p> div> div> div> li> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="blog-show.html" class="media-box"> <img src="picture/new.jpg"> a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08span> <span class="post-month">Novspan> div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="#">如何给猫咪驱虫a> h3> <p>猫咪定期驱虫，是保障猫咪身体健康的一个重要的环节。尤其是刚进家的流浪猫...p> div> div> div> li> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="blog-show.html" class="media-box"> <img src="picture/new1.jpg"> a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08span> <span class="post-month">Novspan> div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="#">如何通过牙齿推断猫咪的年龄a> h3> <p>猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定...p> div> div> div> li> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="blog-show.html" class="media-box"> <img src="picture/img17-600x400.jpg"> a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08span> <span class="post-month">Novspan> div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="#">如何通过牙齿推断猫咪的年龄a> h3> <p>猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定...p> div> div> div> li> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="blog-show.html" class="media-box"> <img src="picture/img17-600x400.jpg"> a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08span> <span class="post-month">Novspan> div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="#">如何通过牙齿推断猫咪的年龄a> h3> <p>猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定...p> div> div> div> li> ul> div> div> <div class="spacer-60">div> div> div> div> <div class="secondary-bg cta clearfix "> <div class="container"> <div class="pic"> <img src="picture/dog.png" alt=""> div> -