之前我们在HTML教程里制作了一个留言板（三小时学会网页设计——HTML），但它是不带任何效果的：没有任何颜色背景，也没有排版布局...这一期我们就用前几期所讲到的内容（CSS的引入方式、选择器、样式、布局）来对它进行美化。本期重点：页面宽度设置页面背景颜色设置页面居中设置子元素宽度设置浮动设置整体页面美化代码：!DOCTYPEhtmlhtmllang=zh-cmnheadmetacharset=UTF-8title留言本/titlestyle.wrap{width:px;background:#ccc;/*宽度、背景色*/margin:0pxauto;/*页面居中*/}/style/headbodydivclass=wrap!--发表留言区--divclass=addtextareacols=50rows=5/textareabr/inputtype=text/inputtype=submitvalue=发表留言//div!--查看留言内容区--divid=a1divclass=aa1用户名1、留言时间1br/留言内容1/divdivclass=a1用户名2、留言时间2br/留言内容2/div/div/div/body/html首先我们把所有的HTML页面内容都用一个div标签包裹起来设置它的类属性为wrap这里为了方便大家阅读采用的是内嵌样式用类选择器选择wrap设置宽度：width:px设置背景色：background:#ccc设置居中效果：margin:0pxauto（外间距为0，其它自动，这样就自动形成了居中效果）效果：发表留言区美化代码：!DOCTYPEhtmlhtmllang=zh-cmnheadmetacharset=UTF-8title留言本/titlestyle.wrap{width:px;background:#ccc;margin:0pxauto;}.add{overflow:hidden;}/*清除浮动所带来的影响*/.add.content{width:px;margin:0;padding:0;}.add.user{float:left;}.add.btn{float:right;}/style/headbodydivclass=wrap!--发表留言区--divclass=addtextareaclass=contentcols=50rows=5/textareabr/inputclass=usertype=text/inputclass=btntype=submitvalue=发表留言//div!--查看留言内容区--divid=a1divclass=aa1用户名1、留言时间1br/留言内容1/divdivclass=a1用户名2、留言时间2br/留言内容2/div/div/div/body/html设置留言框、用户名输入框、提交按钮的类属性分别为：content、user、btn用父子择器选择add中的content，设置宽度为px（因为留言框自带的边框占了两个像素），内外间距都为0用父子择器选择add中的user，设置向左浮动用父子择器选择add中的btn，设置向右浮动用overflow属性清除子元素浮动所带来的影响：.add{overflow:hidden;}效果：留言内容区美化代码：!DOCTYPEhtmlhtmllang=zh-cmnheadmetacharset=UTF-8title留言本/titlestyle.wrap{width:px;margin:0pxauto;}.add{overflow:hidden;}.add.content{width:px;margin:0;padding:0;}.add.user{float:left;}.add.btn{float:right;}.msg{margin:20px0px;background:#ccc;padding:5px;}/*留言内容外间距，背景色，内间距*/.msg.info{overflow:hidden;}/*清除浮动所带来的影响*/.msg.user{float:left;color:red;}/*用户名浮动，字体颜色*/.msg.time{float:right;color:blue;}/*时间浮动，字体颜色*/.msg.contet{width:%;padding::5px;}/*留言内容宽度，内间距*//style/headbodydivclass=wrap!--发表留言区--divclass=addtextareaclass=contentcols=50rows=5/textareabr/inputclass=usertype=text/inputclass=btntype=submitvalue=发表留言//div!--查看留言内容区--divclass=msgdivclass=infospanclass=user用户名/spanspanclass=time-1-:11:11/span/divdivclass=content这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容/div/divdivclass=msgdivclass=infospanclass=user用户名/spanspanclass=time-1-:11:11/span/divdivclass=content这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容/div/divdivclass=msgdivclass=infospanclass=user用户名/spanspanclass=time-1-:11:11/span/divdivclass=content这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容这里是留言内容/div/div/div/body/html设置整个留言内容区类属性为msg把用户名及留言时间放在同一个div里，并设置类属性为info把用户名及留言时间用span标签改成行内元素（具体可以去了解行内元素与块级元素的区别：CSS——布局）然后在CSS里逐一言设置效果效果：Thisisnottheend.Itisnoteventhebeginningoftheend.Butitis,perhaps,theendofthebeginning.更多分享效率工具AutoCAD（附软件+注册机）AdobeCC破解全系列（WIN+MAC）Office早期预览版（免激活）免费看VIP视频，高速下载百度云，听高清网易云...你只差一个小插件小众电影美国往事丨如果你的一生只能看一部电影的话，那就看这一部吧蝴蝶丨我比你年轻，我还有余力等你（les题材）东京夜空最深蓝丨活着吧，要活到死才对荒野生存丨我想那么年轻，干净，那么寂寞地活着，直到可以突然失踪在马路上的那一天0基础教程小程序丨0基础要怎么自学小程序开发小程序丨小程序开发环境搭建和布署小程序丨
转载请注明：http://www.aierlanlan.com/rzdk/6143.html
