搜索
简单网页案例练习案例1!DOCTYPEhtmlhtmlheadtitle标题/title/headbodyh2清平乐/h2朝代em宋代/em 作者：b李清照/bhr/原文：p年年雪里，常插梅花醉。挼尽梅花无好意，赢得满衣清泪。br今年海角天涯，萧萧两鬓生华。看取晚来风势，故应难看梅花。p//body/html案例2!DOCTYPEhtmlhtmlheadtitle申请表/titlemetacharset=utf-8/headbodyh3申请表/h3form姓名：inputtype=textsize=20maxlength=6value=/br/密码：inputtype=passwordsize=20br/照片：inputtype=file/br/感兴趣的职位：inputtype=radiovalue=1name=work/Web设计inputtype=radiovalue=0name=work/Web开发br/向往的城市：selectsize=1option--请选择--/optionoption北京/optionoption上海/optionoption广东/optionoption天津/option/selectbr/协议：br/divstyle=overflow-y:scroll;overflow-x:hidden;height:80px;width:210px;margin:left;border:1pxsolid#666;求职信息必须真实，准确。br/本网站只负责向企业推荐。/divinputtype=checkboxvalue=shuomingname=shuoming/我已认真阅读病接受以上的协议。br/经验：br/selectsize=1option--请选择--/optionoption无经验/optionoption一年/optionoption五年/optionoption十年以上/option/selectbr/inputtype=submitname=inputtype=resetname=/form/body/html案例3!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/titleid选择器/titlestyletype=text/css#bold{font-weight:bold;}#font24{font-size:24px;}/style/headbodypid=bold段落1：id=bold，设置粗体文字。/ppid=font24段落2：id=font24，设置字号为24px。/ppid=font24段落3：id=font24，设置字号为24px。/ppid=boldfont24段落4：id=boldfont24，同时设置粗体和字号24px。/p/body/html案例4!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/title新闻列表/titlelinkrel=stylesheethref=css/style05.csstype=text/css//headbodydivclass=allh2class=head招聘信息/h2ulclass=contentliahref=#北京厚石人和信息科技招聘人才/a/liliahref=#上海微甲网络科技招聘工程师/a/liliahref=#永特三六五公司招聘网络管理员/a/liliahref=#中国科学技术研究所招聘实习生/a/liliahref=#上海枫雪信息科技招聘PHP人才/a/li/ul/div/body/html案例5!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/title清除浮动/titlestyletype=text/css.father{/*没有给父元素定义高度*/background:#ccc;border:1pxdashed#999;}.box01,.box02,.box03{height:50px;line-height:50px;background:#f9c;border:1pxdashed#999;margin:15px;padding:0px10px;float:left;/*定义box01、box02、box03三个盒子左浮动*/}/style/headbodydivclass=fatherdivclass=box01box01/divdivclass=box02box02/divdivclass=box03box03/div/div/body/html案例6!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/title子元素相对于直接父元素定位/titlestyletype=text/cssbody{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background:#ccc;border:1pxsolid#000;position:relative;/*相对定位，但不设置偏移量*/}.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1pxsolid#000;margin:10px0px;text-align:center;}.child02{position:absolute;/*绝对定位*/left:150px;/*距左边线150px*/top:100px;/*距顶部边线100px*/}/style/headbodydivclass=fatherdivclass=child01child-01/divdivclass=child02child-02/divdivclass=child03child-03/div/div/body/html