新闻管理模块设计 GridView控件与ADO NET高级应用.pptVIP

Company Logo 15.6.2 新闻发布界面的美化 3.设置css样式 由于newscss.css文件中已有title的样式，这里可以直接使用。 新建css样式formitem，用户控制表单样式，设置方框属性中width为680px，Padding为0，Margin中Top为10px，Left为20px，其余为0px。 新建复合样式#formitem table，用于控制表格样式，设置类型属性中行距为26px，方框属性中width为500px，Padding和Margin为0。 新建复合样式#formitem table tr td，用于设置表格的单元格样式，设置边框属性中Bottom（底部）样式style为dashed（点）,width为1px，color为#CCC。 动态网页设计教程——美工与技术 机械工业出版社 15.6.2 新闻发布界面的美化 3.设置css样式 下面实现表格内容的对齐与宽度设置，在代码视图中，对左侧一列td标识逐个添加css标识class=”c1”，右侧一列，td标识添加css标识class=”c2”（当然我们可以只设置c1）。 新建css样式，类型为“类”，选择器名称为“.c1”。区块属性中设置Text-align（文本对齐）为right（右对齐）。设置方框属性中width为46px，Padding中Right为10px，其它为0，Margin为0px。 新建css样式，类型为“类”，选择器名称为“.c2”。设置方框属性中Padding中Left为5px（这里只是为了说明可以对两列分别设置样式，如设置右对齐等，实际上我们可以在c1中设置Padding中Right为15px，而得到相同的效果）。 动态网页设计教程——美工与技术 机械工业出版社 15.6.2 新闻发布界面的美化 3.设置CSS样式 下面进行按钮样式的设计，插入css样式.btn，选择类型为“类”，设置类型属性中颜色为#999，背景属性中设置背景颜色为#f5f5f5；方框属性中设置高度为20px，Padding和Margin为0px；边框属性中width为1px，Color为#CCC。 选择按钮发布，在属性栏中选择css样式btn。同样可以设置上传控件的样式为btn。保存文件后在Visual Studio中调试newsadmin.html文件，单击新闻发布图片，显示结果。当然我们可以对标题、内容等文本框进行CSS样式美化，设置其宽度高度等，这里就不赘述。 动态网页设计教程——美工与技术 机械工业出版社 15.6.2 新闻发布界面的美化 3.设置CSS样式 动态网页设计教程——美工与技术 机械工业出版社 15.6.3 新闻浏览界面的美化 界面美化设计思路是首先利用DIV进行标题（title）与新闻（news）的分割，标题部分插入图片，后设置底部横线，利用CSS样式进行版式编排与美化。 1.附加样式表 使用Dreamweaver软件打开文件newsdetail.aspx，在设计视图中单击鼠标右键，选择“CSS样式|附加样式表”附加样式表文件newscss.css。 动态网页设计教程——美工与技术 机械工业出版社 15.6.3 新闻浏览界面的美化 2.DIV+CSS布局 在网页中（表单标签内）插入Div标签（title、news）进行布局，在news标签中插入Div标签newsimg，删除Div标签中的提示信息和新闻浏览文字，在title标签插入图片titlelogo.jpg和newsbrowser.jpg，将Image控件拖动到newsimg标签中，修改news标签内的代码。 动态网页设计教程——美工与技术 机械工业出版社 15.6.3 新闻浏览界面的美化 2.DIV+CSS布局 div id=news h1 class=newstitle asp:Label ID=lbltitle runat=server/asp:Label /h1 h2 class=newsinfo 发布人：asp:Label ID=lblauthor runat=server/asp:Label nbsp;发布时间：asp:Label ID=lbldate runat=server/asp:Label /h2 div id=newsimg asp:Image CssClass=newsphoto ID=Image1 runat=server / /div p class=newsbody asp:Label ID=lblbody runat=