aspnet网站建设,学生制作网页教程,WordPress登录插件哪个好,wordpress 模板 知乎#x1f4c2;文章目录 二、✍️网站描述三、#x1f4da;网站介绍四、#x1f310;网站演示五、#x1f527; 网站代码#x1f9f1;HTML结构代码#x1f492;CSS样式代码 六、#x1f947; 如何让学习不再盲目七、#x1f381;更多干货 ❤ 【作者主页——#x1f525;… 文章目录 二、✍️网站描述三、网站介绍四、网站演示五、 网站代码HTML结构代码CSS样式代码 六、 如何让学习不再盲目七、更多干货 ❤ 【作者主页——获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——毕设项目精品实战案例】 # 一、网站题目 个人网页设计、♂️个人简历制作、简单静态HTML个人网页作品、个人介绍网站模板 、等网站的设计与制作。 二、✍️网站描述
⭐个人网页设计网站模板采用DIV CSS布局制作网页作品有多个页面如 :个人介绍文字页面、我的作品图片列表、个人技能图文页面、在线留言表单页面CSS样式方面网页整体采用左右布局结构制作了网页背景图片导航区域每个导航背景色不同导航背景色与页面背景呼应。 一套A的网页应该包含 (具体可根据个人要求而定)
页面分为页头、菜单导航栏最好可下拉、中间内容板块、页脚四大部分。所有页面相互超链接可到三级页面有5-10个页面组成。页面样式风格统一布局显示正常不错乱使用DivCss技术。菜单美观、醒目二级菜单可正常弹出与跳转。要有JS特效如定时切换和手动切换图片轮播。页面中有多媒体元素如gif、视频、音乐表单技术的使用。。页面清爽、美观、大方不雷同。 。不仅要能够把用户要求的内容呈现出来还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。 三、网站介绍
网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面计划采用最新的网页编程语言HTML5CSS3JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器已达到打开后就能即时看到网站的效果。
网站素材方面计划收集各大平台好看的图片素材并精挑细选适合网页风格的图片然后使用PS做出适合网页尺寸的图片。
网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
网页编辑方面网页作品代码简单可使用任意HTML编辑软件如Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作。 其中 1html文件包含其中index.html是首页、其他html为二级页面 2 css文件包含css全部页面样式,文字滚动, 图片放大等 3 js文件包含js实现动态轮播特效, 表单提交, 点击事件等等个别网页中运用到js代码。 四、网站演示 五、 网站代码
HTML结构代码 !DOCTYPE HTML
htmlheadtitleindex/titlemeta charsetutf-8/link hrefcss/index.css typetext/css relstylesheet/link hrefcss/Registered.css typetext/css relstylesheet/script srcjs/js.js/script/headbody!--div--------------------------------div iddiv!--login--------------------------------div classdivfontullia href# classsc onMouseOverctrlover() onMouseOutctrlout()收藏本页/a/lili|/lilia href#关于我们/a/lili|/lilia href# onclickRegisteredshowDiv()注册/a/lilia href# onclickloginshowDiv()登入/a/li/uldiv classbluebg/divdiv idctrl按下spanCtrlD/span收藏/div/div!--logo--------------------------------div classlogoa href#img srcimg/logo.png//a/div!--搜索框--------------------------------div classsearchdiv classz-index_threeform action# namesearchtable border0 cellpadding0 cellspacing0 idsearch_heighttrtdinput typetext nameq titleSearch classsearchinput idsearchinput onKeyDownif (event.keyCode13) {} onBlurif(this.value)value 搜你想搜 ; onFocusif(this.value 搜你想搜 )value; value 搜你想搜 size10//tdtda href# classbutton blue搜索/a/td/tr/table/form/divdiv classbg/div/div!--body--------------------------------div idbodydiv classtopa hrefimg.htmldiv classoverflowdivimg srcimg/bg1.jpg height140//divdiv classfont精选/divdiv classbg/div/div/a/divdiv classtop1a hrefimg.html target_blankdiv classoverflowdivimg srcimg/bg2.jpg height140//divdiv classfont动漫/divdiv classbg/div/div/a/divdiv classtop2a hrefimg.htmldiv classoverflowdivimg srcimg/bg3.jpg height140//divdiv classfont植物/divdiv classbg/div/div/a/divdiv classtop3a hrefimg.html target_blankdiv classoverflowdivimg srcimg/bg4.jpg height140//divdiv classfont壁纸/divdiv classbg/div/div/a/divdiv classtop4a hrefimg.html target_blankdiv classoverflowdivimg srcimg/bg5.jpg height140//divdiv classfont明星/divdiv classbg/div/div/a/divdiv classtop5a hrefimg.htmltarget_blankdiv classoverflowdivimg srcimg/bg6.jpg height200//divdiv classfont美女/divdiv classbg/div/div/a/divdiv classtop6a hrefimg.htmldiv classoverflowdivimg srcimg/bg7.jpg height140//divdiv classfont食物/divdiv classbg/div/div/a/divdiv classtop7a hrefimg.htmldiv classoverflowdivimg srcimg/bg8.jpg height140//divdiv classfont萌宠/divdiv classbg/div/div/a/divdiv classtop8a hrefimg.htmldiv classoverflowdivimg srcimg/bg9.jpg height140//divdiv classfont欧美风格/divdiv classbg/div/div/a/divdiv classtop9a hrefall.html target_blankdiv classoverflowdivimg srcimg/bg10.jpg height140//divdiv classfont更多/divdiv classbg/div/div/a/div!--透明背景--div classbg/div/div!--bottom--------------------------------div idbottomCopyright 2013-2014 duo duo photo br/多多图库 多多有限公司 版权所有/div!--login--------------------------------div idlogindiv classbox idboxbutton typebutton idover onclickloginhideDiv()X/buttonp classloginfontLogin/pform methodpost action#tabletrtd width300input typetext classinput placeholder帐号/td/trtrtdinput typepassword classinput placeholder密码/td/trtrtdbutton typesubmit idlogin-button登入/button/td/tr/table/form/divdiv classloginboxbg/divdiv classboxbackground/div/div!--Registered--------------------------------div idRegistereddiv classbox idboxbutton typebutton idover onclickRegisteredhideDiv()X/buttonspan classRegisteredfontRegistered/spanform methodpost action#tabletrtd width300input typetext classinput placeholder用户名/td/trtrtdinput typepassword classinput placeholder密码/td/trtrtdinput typepassword classinput placeholder再次输入密码/td/trtrtd width300input typetext classinput placeholder电子邮箱/td/trtrtdbutton typesubmit idlogin-button立即注册/button/td/tr/table/form/divdiv classRegisteredboxbg/divdiv classboxbackground/div/div/div/body
html
CSS样式代码 /*cssreset
----------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {padding: 0;margin: 0;
}
table {border-collapse: collapse;border-spacing: 0;
}
fieldset, img, abbr {border: 0;
}
address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var {font-weight: normal;font-style: normal;
}
ul {list-style: none;
}
caption, th {text-align: left;
}
h1, h2, h3, h4, h5, h6 {font-size: 1.0em;
}
q:before, q:after {content: ”;
}
a, ins {text-decoration: none;
}/*topfont
----------------------------------*/
#div .divfont{padding-left:20px;color:#fff;font-family:微软雅黑, 宋体, Helvetica, Arial, sans-serif;font-size:12px;float:right;width: 210px;position:relative;
}
#div .divfont ul{margin-left:20px; }
#div .divfont ul li{float:left;font-size:12px;padding:15px 2px;}
/*链接样式*/
#div .divfont ul li a{color:#fff;}
#div .divfont ul li a:hover{text-decoration:underline;}
/*ctrld
--------------*/
.divfont #ctrl{display:none;color:#666;position:absolute;top:40px;left:-20px;padding:10px 20px;background:#fff}
.divfont #ctrl span{padding:0 5px;font-size:14px;}
/*背景*/
#div .divfont:hover .bluebg{width:250px;
}
#div .divfont .bluebg{width:0px;background:#0091C7;height:50px;-webkit-transition: width 1s ease 300ms;-moz-transition: width 1s ease 300ms;-o-transition: width 1s ease 300ms;}
/*背景
----------------------------------*/html,body{height:100%;}
#div{background: url(../img/photo_4.jpg) no-repeat ; overflow:hidden; height:100%; width:100%;}/* logo
----------------------------------*/
.logo{width:209px;margin:0 auto;margin-top:15%;}
/*搜索框
----------------------------------*/
#div .searchinput{border-right-width: 0px;padding-left: 3px;width: 450px;height:40px;font-family: arial;float: left;border-top-width: 0px;border-bottom-width: 0px;color: #636365;font-size: 12pt;vertical-align: middle;border-left-width: 0px;background-color:transparent;z-index:2;
}
#div .search_height{height: 25px;
}
#div .searchaction{float: left;height:40px;padding:1px;z-index:3;
}
#div input.searchinput:hover{background:#FFF;}/*搜索框位置
----------------------------------*/
#div .search{margin:0 auto;width:545px;margin-top:20px;
}
.z-index_three{z-index:1;position:relative;}
/*搜索框背景
----------------------------------*/
#div .bg{width: 453px;height:40px;background:#fff;position:relative;z-index:0;top:-40px;opacity:0.7;filter:alpha(opacity70);
}
/* blue 提交按钮
----------------------------------*/
#div .blue {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;background-color: #38f;border: 0;padding: 10px 15px;color: #fff;border-radius: 3px;width: 50px;cursor: pointer;font-size: 18px;margin-left:25%;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;
}
#div .blue:hover {background-color:#09C;-webkit-transition-property:background-color;-moz-transition-property:background-color; -o-transition-property:background-color;-webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-o-transition-duration:0.8s;color:#fff;
}
#div .blue:active {color: #fff;background: -webkit-gradient(linear, left top, left bottom, from(#0080B0), to(#0080b0));background: -moz-linear-gradient(top, #0078a5, #00adee);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#0078a5, endColorstr#00adee);
}#div .button {display: inline-block;zoom: 1; /* zoom and *display ie7 hack for display:inline-block */*display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .9em 2em .99em;text-shadow: 0 1px 1px rgba(0, 0, 0, .3);-webkit-border-radius: .5em;-moz-border-radius: .5em;border-radius: .0em;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
/*body
----------------------------------*/
#body{position:relative;margin: 0 auto;height: 315px;width: 860px;padding: 10px 0 0 10px;}
#body .top{padding:10px;}
#body .top1{left:180px;}
#body .top2{left:350px}
#body .top3{left:520px;}
#body .top4{left:690px}
#body .top5{top:165px;}
#body .top6{top:165px;left:180px;}
#body .top7{top:165px;left:350px}
#body .top8{top:165px;left:520px;}
#body .top9{top:165px;left:690px}
#bodydiv{z-index:1;position:absolute;padding:10px;}
#body a{color:#fff;}
#body .bg{height:300px;width:840px;opacity:0.15;filter:alpha(opacity15);position:absolute;top:6px;background:#000;}
#body a{height:140px;width:160px;display:block;}
#body .overflow{height:140px;width:160px;position:relative;overflow:hidden;}
#body .overflow .font{position:absolute;bottom:0;height:30px;line-height:30px;z-index:2;font-size:14px;font-family:微软雅黑;padding-left:8px;}
#body .overflow .bg{/*background:#000;*/height:30px;position:absolute;width:160px;opacity:0.6;filter:alpha(opacity40);top:110px;z-index:1;background:-webkit-linear-gradient(bottom,#000,#ccc);}
.overflow img{-webkit-transition:all ease .3s;transition:all ease .3s;
}
.overflow img:hover{-webkit-transform:scale(1.25);transform:scale(1.25);box-shadow:0px 0px 18px rgba(0,0,0,.5);
}
/*bottom
----------------------------------*/
#bottom {color:#FFF;border-top:1px #fff solid;line-height:25px;text-align:center;clear:both;font-size:12px;font-family:微软雅黑;width:1200px;margin:0 auto;margin-top:40px;
} 六、 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法却不知道语法的用途不知道如何加深映像不知道如何提升自己这个时候每天刷自主刷一些题就非常重要百炼成神可以去牛客网上的编程初学者入门训练。该专题为编程入门级别适合刚学完语法的小白练习题目涉及编程基础语法基本结构等每道题带有练习模式和考试模式可还原考试模式进行模拟也可通过练习模式进行练习 。 七、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容请 “点赞” “✍️评论” “收藏” 一键三连哦
2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者一起探讨 前端 Node 知识互相学习」
3.
以上内容技术相关问题欢迎一起交流学习
