HTML学生个人网站作业设计:(宠物官网8页)——bootstarp响应式含有轮播图,响应式页面

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业,Web大学生网页

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示






HTML学生个人网站作业设计:(宠物官网8页)——bootstarp响应式含有轮播图,响应式页面_第1张图片

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:;">[email protected]a>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>
                        <div class="cont">
                            <h3 class="white-text margin-0">动物是人类的朋友h3>
                            <p>从分享你我的养宠心情到爱宠人之间的经验交流,从网上购物到在线医疗,宠物生活中涉及的方方面面,都在不断努力将它们做到最好。在这里,每一个热爱宠物的人,不但能找到他们想要的,而且能得到比他们想要的更多。p>
                            <a href="about.html" title="Shop Flowers Now" class="btn btn-default btn-transparent btn-rounded pull-right">了解更多a>
                        div>
                        <div class="friend">
                            <img alt="" src="picture/dog2.png">
                            <a href="about.html" title="" class="btn-all">了解更多 <i class="vc_btn3-icon fa fa-chevron-right">i>a>
                        div>
                    div>
                div>
            div>
        div>
        
        <footer class="footer">
            <div class="site-footer">
                <div class="container">
                    <div class="row">
                        
                        <div class="col-md-3 bot footer_widget">
                            <h5>关于我们h5>
                            <div class="footer-logo margin-20">
                                <a href="about.html" title="Obsequy"><img src="picture/logo.png" alt="Obsequy">a>
                            div>
                            <p>让天下宠物得到人间关爱<br>是XX始终不变的企业愿景<br>这就是XX步步领先的秘诀所在p>
                        div>
                        
                        <div class="col-md-3 bot footer_widget">
                            <h5>我们的服务h5>
                            <div class="menu-services">
                                <ul>
                                    <li><a href="kinds.html" title="Burial Services">宠物品种a>li>
                                    <li><a href="blog.html" title="Catering Services">萌宠资讯a>li>
                                    <li><a href="shop.html" title="Celebrating a Life">宠物用品a>li>
                                    <li><a href="contact.html" title="Funeral Services">联系我们a>li>
                                ul>
                            div>
                        div>
                        
                        <div class="col-md-3 bot footer_widget">
                            <h5>萌宠品种h5>
                            <div class="recent-post">
                                <ul>
                                    <li>
                                        <div class="recent-post-imgb">
                                            <a href="kinds.html" title="recent post"><img src="picture/kinds(2).jpg">a>
                                        div>
                                        <div class="recent-post-txtb">
                                            <h6><a href="kinds.html" title="Why you should plan ahead">法国斗牛犬a>h6>
                                            <span>聪明敏捷  开朗不常吠span>
                                        div>
                                    li>
                                    <li>
                                        <div class="recent-post-imgb">
                                            <a href="kinds.html" title="recent post"><img src="picture/kinds(3).jpg">a>
                                        div>
                                        <div class="recent-post-txtb">
                                            <h6><a href="kinds.html" title="What to do when a death occurs">金毛系列a>h6>
                                            <span>热情友善  自信且不怕生span>
                                        div>
                                    li>
                                    <li>
                                        <div class="recent-post-imgb">
                                            <a href="kinds.html" title="recent post"><img src="picture/kinds(4).jpg">a>
                                        div>
                                        <div class="recent-post-txtb">
                                            <h6><a href="kinds.html" title="Funeral Etiquettes you should remember">萨摩系列 a>h6>
                                            <span>乖巧可爱  微笑天使span>
                                        div>
                                    li>
                                ul>
                            div>
                            <div class="spacer-30">div>
                        div>
                    div>
                div>
            div>
            
            <div class="site-footer-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <p>XXX. XXX.p>
                        div>
                        <div class="col-md-6 col-sm-6">
                            <div class="social-icons-colored pull-right">
                                <ul>
                                    <li class="facebook"><a href="#" title="facebook"><i class="fa fa-facebook">i>a>li>
                                    <li class="twitter"><a href="#" title="twitter"><i class="fa fa-twitter">i>a>li>
                                    <li class="youtube"><a href="#" title="youtube"><i class="fa fa-youtube">i>a>li>
                                ul>
                            div>
                        div>
                    div>
                div>
            div>
        footer>
        
        <a id="back-to-top"><i class="fa fa-arrow-up">i>a>
    div>
    <script src="js/jquery-2.2.3.min.js">script>
    
    <script src="js/jquery.magnific-popup.min.js">script>
    
    <script src="js/ui-plugins.js">script>
    
    <script src="js/helper-plugins.js">script>
    
    <script src="js/owl.carousel.min.js">script>
    
    <script src="js/bootstrap.js">script>
    
    <script src="js/init.js">script>
    
    <script src="js/jquery.flexslider.js">script>
    
    

body>

html>


学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

你可能感兴趣的:(web期末作业设计网页,web网页设计与开发,HTML5期末大作业,html,宠物,javascript,前端)