全网营销的六大优势,安徽网络seo,wordpress获得菜单,零基础免费学编程目录 一#xff0c;作品介绍
二.运用知识
三.作品详情
四.部分作品效果图
我的#xff1a;编辑 五.部分源代码
六.文件目录 七.源码 一#xff0c;作品介绍
作品介绍#xff1a;该作品是一个是一个关于影视作品的网页#xff0c;一共有五个页面#xff0c;主页作品介绍
二.运用知识
三.作品详情
四.部分作品效果图
我的编辑 五.部分源代码
六.文件目录 七.源码 一作品介绍
作品介绍该作品是一个是一个关于影视作品的网页一共有五个页面主页最新排行我的联系我们
二.运用知识
1.HTML是超文本标记语言是为浏览器设计的语言用于在Web上传输信息。HTML的编写比较简单只要记住基本的语法就可以。
2.CSS是由W3C组织制定的一种用来定义样式规则(如字体、颜色和位置)的语言能让网页制作者有效地定制、改善网页的显示效果。
3.JavaScript是一种轻型的脚本语言它与HTML相结合可以增强功能提高与用户之间的交互性。主要利用的是Java来进行编写。JSP全称Java Server Page是由HTML语句和嵌套在其中的Java代码构成的文件文件扩展名为jsp。浏览器访问JSP页面时Web容器把HTML原封不动地发送给浏览器嵌套在%之间的Java代码被解释执行其中outprint(或println)语句输出的内容则被按顺序插入到该对%在JSP文件中的出现位置处同HTML-同输出给浏览器。
三.作品详情
1.首页主打影视内容的网站有导航栏通过导航栏可进入不同的页面还有搜索框可搜索自己想要寻找的内容接着分为两部分一部分是热播剧一部分是电影电影也有分类可根据自己的爱好去选择。
2.我的点击进去之后可以登录页面一旁有一个跳转到注册页面的按钮如果你没有账号就可以点击这个按钮跳转到注册页面跳转到注册页面后就可以注册注册成功后也会跳转到登录页面注册页面旁边也有一个可以跳转到登录页面如果你已经注册了可以直接跳转到登录页面登录登录成功后就可以跳转到首页。
3.联系我们这个页面有一些表格你可以写下自己的信息和意见如果你对于这个网页的内容有感到不满意的地方可以填写意见侧栏还有一些关于内容的提示。
4.最新里面的内容是最新更新的一些影视剧有最新的更新日期和排行在前的更新剧。
5.排行里面是一些大家热爱的剧根据热度排行。
四.部分作品效果图
首页
排行
我的 五.部分源代码
HTML
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0 link relstylesheet hrefhttps://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.cssscript srchttps://cdn.staticfile.org/jquery/3.2.1/jquery.min.js/script script srchttps://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js/scriptlink relstylesheet href/CSS/common.csslink relstylesheet href/CSS/index.csstitle主页/title
/head
bodydiv classcontainernav classnavbar navbar-expand-lg navbar-light bg-lightdiv classcontainer-fluida classnavbar-brand hrefindex.html主页/abutton classnavbar-toggler typebutton data-bs-togglecollapse data-bs-target#navbarSupportedContent aria-controlsnavbarSupportedContent aria-expandedtrue aria-labelToggle navigation data-toggledropdownspan classnavbar-toggler-icon data-toggledropdown/span/buttondiv classcollapse navbar-collapse idnavbarSupportedContentul classnavbar-nav me-auto mb-2 mb-lg-0li classnav-itema classnav-link active aria-currentpage hrefranking.html排行/a/lili classnav-itema classnav-link hreflogin.html我的/a/lili classnav-itema classnav-link hrefnew.html最新/a/lili classnav-itema classnav-link hrefcontact.html联系我们/a/lidiv classpulldown-boxli classnav-item dropdowna classnav-link dropdown-toggle href# idnavbarDropdown rolebutton data-toggledropdown aria-expanded全部/aul classdropdown-menu aria-labelledbynavbarDropdownlia classdropdown-item href#电视/a/lilia classdropdown-item href#动漫/a/lilihr classdropdown-divider/lilia classdropdown-item href#Something else here/a/li/ul/li/div/ulform classd-flexinput classform-control me-2 typesearch placeholderSearch aria-labelSearchbutton classbtn btn-outline-success typesubmitSearch/button/form/div/div/navdiv classnavigation_barpHit/ppBroadcast/p/divdiv classmaina hrefhttps://wujicloud.cn/voddetail/42265.htmlimg src/images/p1.png altp我们的歌/p/img/aa hrefhttps://wujicloud.cn/voddetail/43534.htmlimg src/images/p2.png altp名侦探学院/p/img/aa hrefhttps://wujicloud.cn/voddetail/42999.htmlimg src/images/p3.png altp我在你的未来吗/p/img/aa hrefhttps://wujicloud.cn/voddetail/42950.htmlimg src/images/p4.png altp大湾仔的夜第二季/p/img/aa hrefhttps://wujicloud.cn/voddetail/42847.htmlimg src/images/p5.png altp再见爱人第二季/p/img/a/divdiv classnavigation_bar1pMovie/ppChannel/pdiv classcategorya hrefhttps://wujicloud.cn/vodshow/6-----------.htmlp动作片/p/aa hrefhttps://wujicloud.cn/vodshow/7-----------.htmlp喜剧片/p/aa hrefhttps://wujicloud.cn/vodshow/8-----------.htmlp爱情片/p/aa hrefhttps://wujicloud.cn/vodshow/9-----------.htmlp科幻片/p/aa hrefhttps://wujicloud.cn/vodshow/10-----------.htmlp恐怖片/p/a/div/divdiv classmain1a hrefhttps://wujicloud.cn/voddetail/43694.htmlimg src/images/p6.png altp世纪虫/p/img/aa hrefhttps://wujicloud.cn/voddetail/43693.htmlimg src/images/p7.png altp我的遗憾和你有关/p/img/aa hrefhttps://wujicloud.cn/voddetail/43690.htmlimg src/images/p8.png altp分贝/p/img/aa hrefhttps://wujicloud.cn/voddetail/28589.htmlimg src/images/p9.png altp坏家伙们2019/p/img/aa hrefhttps://wujicloud.cn/voddetail/28588.htmlimg src/images/p10.png altp白头山/p/img/a/div/div
/body
/html
CSS:
.container{max-width: 100%;min-height: 500px;}
a.navbar-brand{background-color: green;
}
.navigation_bar {height: 40px;}
.navigation_bar p {padding: 5px;display: inline-block;margin-left: 30px;font-size: 40px;
}
.navigation_bar p:first-letter{color:#9ACD32 ;
}
.main{padding-top: 10px;margin: 30px;height: 260px;transition: all 3s;display: flex;justify-content: space-around;
}
.main a{text-decoration: none;
}
.main a:hover{box-shadow: 0 16px 32px 0 rgba(67, 23, 154, 0.15);/* 鼠标悬浮时盒子出现的阴影 */transform: translate(0, 5px);
}
.main img{width:200px;height: 260px;
}
.main p{font-size: 20px;color: #9ACD32;
}.navigation_bar1 {height: 50px;display: flex;}
.navigation_bar1 p {padding: 8px;display: inline-block;margin-left: 30px;font-size: 40px;
}
.navigation_bar1 p:first-letter{color:#9ACD32 ;
}
.category{padding: 15px;
}
.category a{text-decoration: none;
}
.category p{font-size: 20px;color: #9ACD32;border: 2px #151515 solid;border-radius: 15px;}
.main1{padding-top: 10px;margin: 30px;height: 260px;transition: all 3s;display: flex;justify-content: space-around;
}
.main1 a{text-decoration: none;
}
.main1 a:hover{box-shadow: 0 16px 32px 0 rgba(67, 23, 154, 0.15);/* 鼠标悬浮时盒子出现的阴影 */transform: translate(0, 5px);
}
.main1 img{width:200px;height: 260px;
}
.main1 p{font-size: 20px;color: #9ACD32;
}
media (max-width: 480px){.displayNone{display: none} .navigation_bar p{font-size: 30px;}.navigation_bar1 p{font-size: 30px;}.category{display: none;}.main{display: inline-block;width: 100%;justify-content: space-around;text-align: center;}.navigation_bar{height: 20px;}.main1{display: inline-block;width:100% ;justify-content: space-around;text-align: center;}
}
JS
function getStorage(){let namedocument.getElementById(name).value;let str localStorage.getItem(name);let data JSON.parse(str);if(!data){//alert(请你先注册);document.getElementById(msg).innerHTML请先a hrefregister.html注册!/a;return false;}else{let pwdocument.getElementById(password).value;if(data.passwordpw){document.location.hrefindex.html;return false;}else{document.getElementById(msg).innerHTML密码错误;return false;}}}
六.文件目录 七.源码
百度网盘
链接https://pan.baidu.com/s/1xADvNBBKL6avRlZrskXbug 提取码6463
