TML结构代码CSS样式代码

个人网页设计、‍♂️个人简历制作、‍简单静态HTML个人网页作品、‍个人介绍网站模板

二、✍️网站描述

:个人介绍文字页面、我的作品图片列表、个人技能图文页面、在线留言表单页面CSS样式方面网页整体采用左右布局结构制作了网页背景图片导航区域每个导航背景色不同导航背景色与页面背景呼应。

页面分为页头、菜单导航栏最好可下拉、中间内容板块、页脚四大部分。

所有页面相互超链接可到三级页面有5-10个页面组成。

页面样式风格统一布局显示正常不错乱使用DivCss技术。

菜单美观、醒目二级菜单可正常弹出与跳转。

要有JS特效如定时切换和手动切换图片轮播。

页面中有多媒体元素如gif、视频、音乐表单技术的使用。

。

页面清爽、美观、大方不雷同。

。

不仅要能够把用户要求的内容呈现出来还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、网站介绍

网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面计划采用最新的网页编程语言HTML5CSS3JS程序语言完成网站的功能设计。

并确保网站代码兼容目前市面上所有的主流浏览器已达到打开后就能即时看到网站的效果。

网站素材方面计划收集各大平台好看的图片素材并精挑细选适合网页风格的图片然后使用PS做出适合网页尺寸的图片。

网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件

网页编辑方面网页作品代码简单可使用任意HTML编辑软件如Dreamweaver、HBuilder、Vscode

、Sublime

1html文件包含其中index.html是首页、其他html为二级页面

图片放大等

srcjs/js.js/script/headbody!--div--------------------------------div

iddiv!--login--------------------------------div

classdivfontullia

onMouseOutctrlout()收藏本页/a/lili|/lilia

href#

onclickRegisteredshowDiv()注册/a/lilia

href#

onclickloginshowDiv()登入/a/li/uldiv

classbluebg/divdiv

idctrl按下spanCtrlD/span收藏/div/div!--logo--------------------------------div

classlogoa

srcimg/logo.png//a/div!--搜索框--------------------------------div

classsearchdiv

blue搜索/a/td/tr/table/form/divdiv

classbg/div/div!--body--------------------------------div

idbodydiv

classbg/div/div/a/div!--透明背景--div

classbg/div/div!--bottom--------------------------------div

idbottomCopyright

版权所有/div!--login--------------------------------div

idlogindiv

idlogin-button登入/button/td/tr/table/form/divdiv

classboxbackground/div/div!--Registered--------------------------------div

idRegistereddiv

onclickRegisteredhideDiv()X/buttonspan

classRegisteredfontRegistered/spanform

methodpost

placeholder电子邮箱/td/trtrtdbutton

typesubmit

idlogin-button立即注册/button/td/tr/table/form/divdiv

classboxbackground/div/div/div/body

html

----------------------------------*/

body,

----------------------------------*/

#div

.divfont{padding-left:20px;color:#fff;font-family:微软雅黑,

宋体,

sans-serif;font-size:12px;float:right;width:

#div

li{float:left;font-size:12px;padding:15px

2px;}

a:hover{text-decoration:underline;}

/*ctrld

#ctrl{display:none;color:#666;position:absolute;top:40px;left:-20px;padding:10px

.divfont

.bluebg{width:0px;background:#0091C7;height:50px;-webkit-transition:

width

----------------------------------*/html,body{height:100%;}

#div{background:

----------------------------------*/

/*搜索框

----------------------------------*/

#div

.searchinput{border-right-width:

0px;padding-left:

0px;background-color:transparent;z-index:2;

#div

left;height:40px;padding:1px;z-index:3;

#div

input.searchinput:hover{background:#FFF;}/*搜索框位置

----------------------------------*/

#div

auto;width:545px;margin-top:20px;

.z-index_three{z-index:1;position:relative;}

/*搜索框背景

----------------------------------*/

#div

453px;height:40px;background:#fff;position:relative;z-index:0;top:-40px;opacity:0.7;filter:alpha(opacity70);

blue

----------------------------------*/

#div

18px;margin-left:25%;-webkit-transition-duration:

0.25s;

{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

progid:DXImageTransform.Microsoft.gradient(startColorstr#0078a5,

endColorstr#00adee);

----------------------------------*/

#body{position:relative;margin:

auto;height:

#bodydiv{z-index:1;position:absolute;padding:10px;}

#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

.font{position:absolute;bottom:0;height:30px;line-height:30px;z-index:2;font-size:14px;font-family:微软雅黑;padding-left:8px;}

#body

.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:hover{-webkit-transform:scale(1.25);transform:scale(1.25);box-shadow:0px

0px

----------------------------------*/

#bottom

solid;line-height:25px;text-align:center;clear:both;font-size:12px;font-family:微软雅黑;width:1200px;margin:0

如何让学习不再盲目

很多刚入门编程的小白学习了基础语法却不知道语法的用途不知道如何加深映像不知道如何提升自己这个时候每天刷自主刷一些题就非常重要百炼成神可以去牛客网上的编程初学者入门训练。

该专题为编程入门级别适合刚学完语法的小白练习题目涉及编程基础语法基本结构等每道题带有练习模式和考试模式可还原考试模式进行模拟也可通过练习模式进行练习

七、更多干货

带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板

、大学生毕业HTML模板