《Web前端技术课后作业》由会员分享，可在线阅读，更多相关《Web前端技术课后作业（72页珍藏版）》请在金锄头文库上搜索。
1、练习列表练习列表注意：注意：“* *“理解级别理解级别 “*“掌握级别掌握级别 “*“应用级别应用级别 “*“拔高级别拔高级别第第 0101 章章: : HTMLHTML 基本结构基本结构名称描述级别第一个 HTML 页面*背景图案片和连接*超链接样式*【逻辑题】练习练习 1.1.第一个第一个 HTMLHTML 页面页面案例描述案例描述: :创建一个 html 文件，在页面写入”我的第一个网页”关键代码关键代码: :我的第一个网页我的第一个网页效果图效果图练习练习 2:2: 背景图案片和连接背景图案片和连接案例描述案例描述: :实现如效果图，背景图+多个 H1 标签关键代码关键代码: :开始学
2、习 web 技术了开始学习 web 技术了开始学习 web 技术了开始学习 web 技术了效果图效果图: :练习练习 3:3:自定义异常处理自定义异常处理案例描述案例描述: :超链接伪类颜色控制，link=“blue“ alink=“yellow“ vlink=“#000000“关键代码关键代码: :使用前端技术展现 Web 系统点我试试效果图效果图: :【逻辑题逻辑题】:】:假设有一个池塘，里面有无穷多水，现有 2 个空水壶，容积分别为 5 升和 6 升。问题是如何只用这 2 个水壶从池塘里取得 3 升的水。 第第 0202 章章: : HTMLHTML 基本标签基本标签名称描述级别基本块级
3、元素*用于布局的块级元素*行级元素*综合联系*【逻辑题】练习练习 1.1.基本块级元素基本块级元素案例描述案例描述: :实现效果图(使用标签有 h1-h6，p，hr)关键代码关键代码: :唐诗三百首唐诗三百首目录第一首：静夜思第二首：忆江南第三首：长恨歌静夜思作者：李白床前明月光,疑是地上霜。举头望明月，低头思故乡。【李白简介】李白，字太白，号青莲居士，自称与李堂皇室同宗，祖籍陇西成纪（今甘肃天水附近） ，生于中亚碎叶。据野史记载，幼时随父迁居绵州昌隆（今四川江油）青莲乡.效果图效果图练习练习 2:2:用于布局的块级元素用于布局的块级元素案例描述案例描述: :实现效果图，背景图+多个 H1 标
4、签(使用标签有:h1-hn,ul-li,dl-dt-dd,ol-li)关键代码关键代码: :常用于页面布局的块级标签练习商品信息 产品类别 数码笔记本手机家电美容服装联想电脑产品型号： 联想 IdeaPad Y450A-TFU(NBA 纪念版) 价格： 4999 元 所在地： 北京 购物流程确认购买信息付款到淘宝确认收货付款给商家双方评价效果图效果图: :练习练习 3:3:行级元素行级元素案例描述案例描述: : 实现效果图(使用标签有:dl-dt-dd)关键代码关键代码: :img 和 span 标签练习促销信息 拍卖上网本奔腾双核，1G 内存，200G 硬盘跳楼疯抢价1元起 效果图效果图:
5、:练习练习 4:4: 超链接与特殊字符超链接与特殊字符案例描述案例描述: : 实现效果图(使用标签有:h1-hn,p,ol-li,ul-li,p,pre)关键代码关键代码: :超链接登录|关于淘宝|淘宝助理|联系我们手机 - 诺基亚 - MOTO - 索爱导购资讯 参观电玩达人的宝贝仓库炎炎夏日，冰凉家具两折起周末折扣，品牌三折热卖网游专区QQ 幻想 100 点卡只需￥8.8 元热血江湖 250 点只需￥8.8 元问道 30 元卡只需￥25.0 元跑跑点卡 200 点只需￥16.8 元数码产品最酷音乐手机导购 最强街机 6300 仅售 1450 99 元热销学生 Mp3 推荐 漫步者音箱 76
6、 元搞定 MOTO E2 音乐手机130W 像素摄像头 Linux 智能系统Intel XScale 处理器A2DP 蓝牙立体声 市场价：1690开学价：1045版权信息： Copyright 1998 - 2007GuiMeiShopping Inc. All Rights Reserved 效果图效果图: :【逻辑题逻辑题】:】: 周雯的妈妈是豫林水泥厂的化验员。 一天，周雯来到化验室做作业。做完后想出去玩。 “等等，妈妈还要考你一个题目，“她接着说，“你看这6只做化验用的玻璃杯，前面3只盛满了水，后面3只是空的。你 能只移动1只玻璃杯，就便盛满水的杯子和空杯子间隔起来 吗?“ 爱动脑筋的
7、周雯，是学校里有名的“小机灵“，她只想了一会儿就做到了。 请你想想看，“小机灵“是怎样做的?第第 0303 章章: : 表格的应用和布局表格的应用和布局名称描述级别表格的基本结构*跨行跨列表格*淘宝商品分类页*表格嵌套*【逻辑题】练习练习 1 1:表格的基本结构表格的基本结构案例描述案例描述: :实现效果图(使用标签有:table-tr-td)关键代码关键代码: :基本表格姓名班级成绩刘德华斧头帮99张学友丐帮59效果图效果图练习练习 2:2: 跨行跨列表格跨行跨列表格案例描述案例描述: :实现效果图，(使用标签有：table-tr-td,跨行,跨列)关键代码关键代码: :跨行跨列练习商品类目
8、虚拟移动联通小灵通充值卡彩票双色球梦幻QQ游戏币护肤美容护肤美体精油彩妆香水美发个人护理保健按摩器械效果图效果图: :练习练习 3:3: 淘宝商品分类页淘宝商品分类页案例描述案例描述: : 实现效果图(使用标签有:dl-dt-dd)关键代码关键代码: :综合案例：淘宝商品分类商品图片商品名称/卖家价格三国群英传免费区卖家：lingture 收藏一口价283.30三国群英传免费区卖家：蓝天 收藏一口价486.00效果图效果图: :练习练习 4:4:表格嵌套表格嵌套案例描述案例描述: : 实现效果图(使用标签有:table-tr-td)关键代码关键代码: :表格嵌套效果图效果图: :【逻辑题逻辑题
9、】:】: 一个球、一把长度大约是球的直径2/3长度的直尺.你怎样测出球的半径？方法很多看看谁的比较巧妙第第 0404 章章: : 框架和表单框架和表单名称描述级别用框架分多个窗口*淘宝注册表单*公共模板复用及链接*【逻辑题】练习练习 1 1:用框架分多个窗口用框架分多个窗口案例描述案例描述: :实现效果图(提供页面素材)关键代码关键代码: :淘宝商城效果图效果图练习练习 2:2:淘宝注册表单淘宝注册表单案例描述案例描述: :实现效果图关键代码关键代码: :淘宝商城注册阅读淘宝网服务协议欢迎阅读服务条款协议登录名：（可包含 a-z、0-9 和下划线）密码：（至少包含 6 个字符）再次输入密码：电
10、子邮箱：（必须包含字符）性别：男 女头像：爱好：运动 聊天 玩游戏喜欢的城市：请选择北京上海效果图效果图: :练习练习 3:3:公共模板复用及链接公共模板复用及链接案例描述案例描述: : 实现效果图(使用标签有:dl-dt-dd)关键代码关键代码: :淘宝商城会员名:（可包含 a-z、0-9 和下划线）密码:（至少包含 6 个字符）效果图效果图: :【逻辑题逻辑题】:】: 五个大小相同的一元人民币硬币。要求两两相接触，应该怎么摆？第第 0505 章章: : CSSCSS 及常用样式及常用样式名称描述级别选择器淘宝商品分类*背景偏移圆角矩形*横向主菜单，鼠标移动背景变化*制作淘宝顶部菜单*【逻辑
11、题】练习练习 1 1: 选择器淘宝商品分类选择器淘宝商品分类案例描述案例描述: :实现效果图(提供页面素材)关键代码关键代码: :淘宝商城#menuwidth:200px;background:#ccc;lifont-size:12px;color:#636362;.menu-classfont:bold 14px 宋体;color:#ff7300;家用电器大家电洗衣机电冰箱平板电视日用百货肥皂洗衣粉纸巾洗发水效果图效果图练习练习 2:2:背景偏移圆角矩形背景偏移圆角矩形案例描述案例描述: :实现效果图(提供页面素材)关键代码关键代码: :图像偏移量技术实现圆角矩形liwidth:199px;
12、font:12px/20px 宋体;list-style:none;text-align:center;background:url(images/icon.gif) no-repeat 0px -80px;.titlefont:bold 14px/38px 黑体;color:#ff7300;background:url(images/icon.gif) no-repeat 0px -50px;.footheight:14px;background:url(images/icon.gif) no-repeat 0px -100px;商品分类分类名 1分类名 2分类名 3分类名 4效果图效果图:
13、 :练习练习 3:3:横向主菜单，鼠标移动背景变化横向主菜单，鼠标移动背景变化案例描述案例描述: :实现效果图(提供页面素材)关键代码关键代码: :淘宝商城主导航条首页家用电器手机数码日用百货书籍帮助中心免费开店全球咨询bodybackground:url(./images/h_bg.jpg) no-repeat 24px -88px;.nav ullist-style:none;.nav li width:84px;float:left;text-align:center;font-weight:bold;line-height:24px;.nav li apadding:8px 10px;
14、text-decoration:none;.nav li a:link,.nav li a:active,.nav li a:visited color:#333;font-size:13px;.nav li a:hoverbackground:url(./images/nav_bg.png) no-repeat; 效果图效果图: :练习练习 4:4:制作淘宝顶部菜单制作淘宝顶部菜单案例描述案例描述: :实现效果图(提供页面素材)关键代码关键代码: :淘宝顶部菜单购物车帮助中心加入收藏设为首页登录注册.top_menufloat:right;.top_menu ullist-style:non
15、e;.top_menu lifloat:left;.top_menu ul li afont:12px/26px 宋体;.top_menu ul li a:link color:#333333;text-decoration: none; .top_menu ul li a:visited color:#333333;text-decoration: none; .top_menu ul li a:active color:#333333;text-decoration: none; .top_menu ul li a:hover color:#ff7300; .pic1width:28px;
16、height:26px;background:url(./images/icon.gif) no-repeat;.pic2width:28px;height:26px;background:url(./images/icon.gif) no-repeat -28px 0px;.pic3width:28px;height:26px;background:url(./images/icon.gif) no-repeat -84px 0px;.pic4width:28px;height:26px;background:url(./images/icon.gif) no-repeat -112px 0px;.textpadding:0px 5px;text-align:center;.btn padding:0px 5px;tex
