编程入门java基础和项目02酷炫css注册开发流程

为了方便大家学习，特将的开发流程写成文档，方便大家学习参考创建html项目，导入项目所需素材文件1html必须写在必须写在HTML文件首行<!DOCTYPEHTML文档的开始HTML文档的开头部分文档属性告诉浏览器页面采用什么编码解析文档<metacharset="UTF-文档标题 账号HTML文档的开头结束<!--HTML文档的主体部分开始<!--HTML文档的主体部分结束<!--HTML文档的结束<!--HTML文档的主体部分开始<!--HTML文档的主体部分结束<!--HTML文档的结束2HTML文档的主体部分开始<div头部>头部HTML文档的主体部分开始<div头部>头部><div导航>导航><div>><divHTML文档的主体部分结束信息>信息>3头部主要是logo和登录两部分，logo这边的账号实际上也是<div头部><div头部> logo--<div<a <imgsrc="img/baidu.gif" 登录<div ，现在就<inputtype="button"value="登录 头部 css/*采用什么编码解析文件/*采用什么编码解析文件@charset"utf-*使用id选择器渲染#head头部width1000px;/*宽度1000px/*上外边距20px左外边距自动计算居中下外边距0pxmargin:margin:20pxauto0px}使用id选择器定位到然后渲染其 #head#head_logowidth330px;/*宽度330px/*设置背 不重复并靠右background:url(../img/logo.png)rightno-/*设置背景的位置y轴上移5px*/background-position-y:-5px;cursor:pointer;/*鼠标变手势*/float:left;/*左浮动*//*内下间距5px为了和导航之间保持距离padding-bottom:} 头部头部头部*使用id选择器定位到**#head#head_loginfloat:right;/*右浮动*/font-size:10px;/*字体大小*/margin-top:10px;/*上外间距10px}*使用id选择器定位到*#head#head_logininputfont-weight:700;/*加粗*/color:#666;/*字体颜色*/height:32px;/*输入框高度*/width:64px;/*输入框宽度*/border:0;/*边框为0*//*设置背景 不重复并通过具体坐标获取显示部分*/background:url(../img/reg_icons.png)no-repeat0-48px;font-family:Arial,"宋体";/*字体种类*/} 头部 4导航就是类似<hr/>的一条横线，但是它是一张组成的 导航 导航 <div<imgsrc="img/reg_hr.png"<div<imgsrc="img/reg_hr.png" 导航>css*使用*使用id选择器渲染#nav导航width1200px;/*宽度1200pxmargin0auto;/*上外间距0px居中} 导航 5部分由表单 两部分组成 那边使用的方式快速完成<div><div> 表单<div输入框 "style="width:190px;"号"" 按钮<buttonid="reg_form_msg">获 协议<div<inputtype="checkbox"style="width:14px;"<span>阅读并接受<ahref="#">》 按钮<div<button <div<imgsrc="img/qrcode.png" >我们需要使用css对部分进行渲染，移动位置，修改文本及按钮的样式**使用id选择器渲染#register{width950px;/*宽度950px/*上外边距20px左外边距自动计算居中下外边距0pxmargin:20pxauto0px} *使用id选择器渲染*然后渲染其 #register#reg_form{floatleft;/*左浮动*/text-align:right;/*文本靠右font-size:14px;/*字体大小*/color:#666;/*字体颜色*/font-weight:700;/*字体粗细} label*使用id选择器渲染*#register#reg_formlabelmargin-right10px;/*右外间距10px}*使用id选择器渲染*#register#reg_formpinputheight:38px;/*高度38px*/width350px;/*宽度350px*/border1pxsolid#ddd;/*边框1px实心线颜色#ddd*/font-size:14px;/*字体大小*/color#666;/*字体颜色margin-bottom6px;/*每个input底部外间距6px*/text-indent:10px;/*首行缩进10px*/} *使用id选择器渲染*然后渲染其 #register#reg_form#reg_form_msg{height:42px;/*高度42px*/width:156px;/*宽度156px*/background:#f7f7f7;/*背景颜色*/font-size:14px;/*字体大小border1pxsolid#ddd;/*边框1px实心线颜色#ddd*/cursor:pointer;/*鼠标变手势*/}/*改变样式#register#reg_form#reg_form_msg:hoverbackground-color:}*使用id选择器渲染*然后渲染其 #register#register#reg_form_isCheckfont-size:10px;/*字体大小*/font-weight:400;/*字体粗细*/margin-right30px;/*设置右外间距30px}*使用id选择器渲染*#register#reg_form_isCheckatext-decorationnone;/*去除所有字体横线样式} *使用id选择器渲染*#register#reg_form_btnbuttonheight:50px;/*高度50px*/width:352px;/*宽度352px*/background:#4490f7;/*背景颜色*/borderborder0;/*边框0color:white;/*字体颜色*/font-size:16px;/*字体大小*/font-weight:700;/*字体粗细*/border-radius3px;/*边框变圆角*/margin-top:20px;/*上外间距20pxfont-family:Arial宋体";/*字体类型*/cursor:pointer;/*鼠标变手势*/} *使用id选择器渲染*然后渲染其 #register#reg_qrcode{floatright;/*右浮动*/margin-top:15px;/*上外间距15pxmargin-right10px;/*右外间距-10px} 最后就剩下 信息整个页面就写完了6 信<div<p>2018信息<div<p>2018信息>信息>信息*使用id选择器渲染 的样#copyright{text-align:center;/*文本居中color:#7a77c8;/*字体颜色*/font-size:10px;/*字体大小*/margin-top:520px;/*上外间距520px} 信息 html+css的开发模式有了更深刻的认识？明天我们必须写在必须写在HTML文件首行<!DOCTYPEHTML文档的开始HTML文档的开头部分文档属性告诉浏览器页面采用什么编码解析文档<metacharset="UTF-文档标题 账号引入外部css文件<linkrel="stylesheet"href="css/baidu.css"HTML文档的开头结束HTML文档的主体部分开始<div头部> logo--<div<a <imgsrc="img/baidu.gif" 登录<div ，现在就<inputtype="button"value="登录 头部 <div

导航 <imgsrc="img/reg_hr.png" 导航 <div 表单<div输入框

户名

号 录和找 " "

证码style="width:190px 按钮<buttonid="reg_form_msg">获 协议<div<inputtype="checkbox"style="width:14px;height:14px;"/><span>阅读并接受<ahref="#"> <ahref="#"> 隐私权保 》 按钮<div<button /*采用什么编码解析文件@charset"utf-/*采用什么编码解析文件@charset"utf-*使用id选择器渲染#head头部width1000px;/*宽度1000px/*上外边距20px左外边距自动计算居中下外边距0pxmargin:20pxauto0px}使用id选择器定位到然后渲染其 #head#head_logowidth330px;/*宽度330px/*设置背 不重复并靠右background:url(../img/logo.png)rightno-/*设置背景的位置y轴上移5px<div<imgsrc="img/qrcode.png" ><div<p>2018HTML文档的主体部分结束HTML文档的结束信息>信息>background-position-y:-5px;cursorpointer;/*鼠标变手势*/float:left;/*左浮动*//*内下间距5px为了和导航之间保持距离padding-bottom:}使用id选择器定位到然后渲染其 #head#head_loginfloat:right;/*右浮动*/font-size:10px;/*字体大小*/margin-top:10px;/*上外间距10px}使用id选择器定位到然后渲染其 #head#head_logininputfont-weight:700;/*加粗*/color:#666;/*字体颜色*/height32px;/*输入框高度*/width:64px;/*输入框宽度*/border:0;/*边框为0*//*设置背景 不重复并通过具体坐标获取显示部分*/background:url(../img/reg_icons.png)no-repeat0-48px;font-family:Arial,"宋体";/*字体种类*/} 头部 导航 使用id选择器渲染 的样#nav{width1200px;/*宽度1200pxmargin0auto;/*上外间距0px居中} 导航 使用id选择器渲染 的样#register{width950px;/*宽度950px/*上外边距20px左外边距自动计算居中下外边距0pxmargin:20pxauto0px}使用id选择器渲染 的样然后渲染其 #register#reg_form{floatleft;/*左浮动*/text-align:right;/*文本靠右font-size:14px;/*字体大小*/color:#666;/*字体颜色*/font-weight:700;/*字体粗细}使用id选择器渲染 的样然后渲染其 #register#reg_formlabelmargin-right10px;/*右外间距10px}使用id选择器渲染 的样然后渲染其 #register#reg_formpinput{height:38px;/*高度38px*/width350px;/*宽度350px*/border1pxsolid#ddd;/*边框1px实心线颜色#dddfont-size:14px;/*字体大小*/color:#666;/*字体颜色*/margin-bottom6px;/*每个input底部外间距6px*/text-indent:10px;/*首行缩进10px*/}使用id选择器渲染 的样然后渲染其 #register#reg_form#reg_form_msg{height:42px;/*高度42px*/width:156px;/*宽度156px*/background:#f7f7f7;/*背景颜色*/font-size:14px;/*字体大小border1pxsolid#ddd;/*边框1px实心线颜色#ddd}使用id选择器渲染 的样然后渲染其 #register#reg_form_isCheck{font-size:10px;/*字体大小*/font-weight:400;/*字体粗细*/margin-right30px;/*设置右外间距30px}使用id选择器渲染 的样然后渲染其 #registe