网页制作实战项目三:运动会页面制作

【时间要求】 2 学时( 45 分钟× 2=90 分钟)

【上机内容】 运动会页面制作

【上机目的】

1 、掌握表格布局的方法和技巧

2 、掌握HTML及CSS的使用

【上机重点】

1 、表格布局

2 、HTML及CSS的使用

【上机难点】

1、导航条的制作

2、CSS的使用

【上机内容】

请在规定时间内制作出以下网页:(要求要符合网站建设的规范!)

网页设计上机练习-表格布局运动会页面制作效果图

所需素材:素材下载

页面中图片外边框实现,可参考如下CSS代码:

.picborder {
  border:1px solid #999;
  padding:5px;
}

请加入网页设计交流群:208047327 ,在项目制作过程中有任何问题,可以在群内讨论,或进入本站问答社区互动。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1737.html

(16)
江山如画的头像江山如画管理团队
上一篇 2018年4月18日 下午3:34
下一篇 2018年4月20日 下午9:05

99%的人还看了以下文章

  • 界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

    今天125网页设计给大家分享界面设计中常用的字体,字号,字体颜色及间距对齐的一些小经验,通过设计经验可以帮助你做出更好的版式,相信大家会有收获。 一、常见界面设计中字体使用问题 1.字体样式太多,导致页面杂乱 2.使用的字体不易识别 3.字体样式和内容的气氛或规范不匹配 二.界面设计中文字的使用规则 移动端常规字体 IOS:常选择华文黑体或者冬青黑体,尤其是…

    2018年12月29日 网页设计
    9.4K0
  • 那些漂亮的网页banner,用的什么字体?

    banner的字体选用要根据banner的主题,去挑选,因为字体本身也是有性格的。 一、稳定型(协调,齐全,稳定,高质) 微软雅黑、冬青黑体、宋体、华文细黑 方正正中黑 方正兰亭系列 二、刚硬,锐利,清晰,强烈 造字工坊力黑体 造字工坊版黑体 造字工坊劲黑体 锐字逼格锐线体简 张海山锐线体 华康儷金黑 蒙纳超刚黑体 (更适用大气,热烈,权威,声明等主题) 三…

    2019年10月22日 网页设计
    9.8K0
  • web前端工程师需要掌握哪些知识,0基础学习Web前端课程大纲

    想从事Web前端开发,需要掌握哪些知识? 中文网页设计网今天给大家分享0基础学习Web前端的课程大纲,从入门到精通,帮助你快速成长为Web前端工程师。 Web前端基础课程大纲 第一阶段:HTML+CSS 第二阶段:JavaScript基础知识 第三阶段:DOM、BOM与事件 第四阶段:面向对象与数据交互 第五阶段:JavaScript实战 第六阶段:数据类型…

    2018年10月24日
    6.1K0
  • 设计网站主页必须遵循的5点基本原则

    一个好的网站是一个有效的销售工具,它能够吸引更多的网民的注意。就好像一篇好的文章或者广告,他必须首先引起读者的兴趣,然后引导他们去做出某种行为。因此,不能忽视网站主页面的重要性,否则,网站让浏览者会很快失去兴趣。这样的网站,有可能赢得很高的点击率,但却不能制造预期般的回应,更不用说让网民着迷,进入下一级页面了。 与此类似,一个成功的网站也有几点要素。下面是设…

    2019年2月21日 网页设计
    4.7K0
  • 如何制作自己的网页

    要制作网页,建议你要具备的条件:对电脑熟练操作,使用电脑最好在一年以上,对网页设计感兴趣,有较充足的学习时间,熟悉office办公软件。当然,这些不是一定必须的。 第一阶段:开始时最好是学些网页编辑软件 如:Dreamweaver,hbuiler X,webstorm,Sublime Text 这样可以使您更了解网页制作与运营的原理。最好是结合教程边学习边制…

    2020年2月18日
    5.5K0
  • 网页设计中最常用的7款字体

    字体主要分为衬线字和无衬线字。网站制作中,选用什么样的字体是比较重要。 衬线字和无衬线字的区别:左边的中文和英文字属于衬线字,右边中文和英文属于无衬线字。 衬线字指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。 如宋体,观察比划可以看到横细竖粗的特点,这就是典型的称线字。 无衬线字体没有这些额外的装饰,而且笔画的粗细差不多。比如微软雅…

    2019年10月22日 网页设计
    10.1K0

发表回复

登录后才能评论

评论列表(1条)

  • 江山如画的头像
    江山如画 2020年4月29日 上午10:08

    学生作品:http://www.125jz.com/demo/webproject3/