Web前端第一天作业

本次作业中关键用到的几个html标签:

colspan="列数"   单元格横跨的列数

rowspan="行数"  单元格竖跨的行数

border  表格边框

cellpadding  内边距

cellspacing  外边距

align="center"  字体居中

题目一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星期一菜谱</title>
</head>
<body>
<table border="1" cellspacing="0" style="border-color:#fd7bd7" cellpadding="5">
    <tr>
        <td colspan="3" align="center"> 星期一菜谱</td>
    </tr>
    <tr align="center">
        <td rowspan="2">素菜</td>
        <td>青炒茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr align="center">
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr align="center">
        <td rowspan="2"> 荤菜</td>
        <td>油焖大虾</td>
        <td>海参鱼翅</td>
    </tr>
    <tr align="center">
        <td> 红烧肉<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2846773786,1909168706&fm=58"></td>
        <td>烤全羊</td>
    </tr>
</table>
</body>
</html>

 效果如下:

题目二:课程表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
<p align="center">课程表</p>
<table align="center" border="1" style="border-color:#362ae1">

    <tr align="center" >
        <th>项目</th>
        <th colspan="5">上课</th>
        <th colspan="2">休息</th>
    </tr>
    <tr align="center" >
        <th>星期</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期日</th>
    </tr>
    <tr align="center" >
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="4">休息</td>
    </tr>
    <tr align="center" >
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>
    <tr align="center" >
        <td>化学</td>
        <td>语文</td>
        <td>体育</td>
        <td>计算机</td>
        <td>英语</td>
        <td>计算机</td>
    </tr>
    <tr align="center" >
        <td>政治</td>
        <td>英语</td>
        <td>体育</td>
        <td>历史</td>
        <td>地理</td>
        <td>计算机</td>
    </tr>
    <tr align="center" >
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="2">休息</td>
    </tr>
    <tr align="center" >
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>

</table>
</body>
</html>

 效果如下:

 

时间: 2024-07-29 14:48:05

Web前端第一天作业的相关文章

web前端第一步——照片墙(缩略图)

折腾了几天,终于终于终于解决了一个照片墙的问题哟! 先上效果图: 他会像百度图片库一样,鼠标移到哪张图,哪张图 就会放大显现.看下图: 哈哈,最得意的是知道了怎么把图片放在我想放的地方,显示的大小也可以,一开始的时候,图片放好,鼠标移到图片也会变大,只是其他的图片也会相应的移动位置,特别难看, 现在明白了“块级元素”,也知道了,为什么不直接防止图片,而是将img放在a里面,a 又放在li里面,因为这样可以实现更多的效果啦. 不多说,上代码,再注释: <!DOCTYPE html> <ht

Web前端第一课:HTML

什么是Html? HTML全称Hyper Text Markup Language,中文翻译为 超文本 标记 语言.简单而言,HTML是用来向浏览器描述网页结构和内容的计算机语言.HTML是面向计算机的,但是算不上编程语言,它没有数据类型,控制结构等这些编程语言才具有的语法.HTML以各式各样的标记告诉浏览器网页的结构.HTML是由人编写的,因此它也是面向人的,网站的其他开发人员通过HTML中的标记,能够更清晰的了解到网站的内容 是如何组织的,方便阅读和修改.此外,HTML也是面向互联网的,例如

为什么Web前端语言只有JavaScript?

Web前端选择语言的标准个人认为有以下几点: 一. 浏览器的支持 1.浏览器不同厂家,不同内核可以共同解析,且支持和性能选择最好的语言 2.JavaScript作为浏览器时代最早产生且经过浏览器大战及历史的沉淀中脱颖而出的语言,且成Web前端第一套标准,也是Web前端唯一一套成熟的标准. 二. 众多语言的性能及兼容方面 1.javaScript作为所有浏览器内核兼容性最好.性能最优的前提,作为Web前端支持语言中的王者也是必然. 2.javaScript本身的基于对象的特点及松散类型物特点也决定

Web前端开发第一篇

本人在学习和开发web前端中得到的一些javascript.jquery.html等等效果可能对大家有用和对大家有帮助的东西一起分享给大家. 这些效果也许很多人都已经有了,不过我还是积累下,分享给一起学习Web前端的人员和刚刚开始学习Web前端的人员, 希望能帮助大家. 我的语言组织能力比较差,还有我的技术水平也是比较差的,有些东西可能理解的不对,大神们可以指点出来我加以改正,希望大家见谅! Web前端开发第一篇

web 前端入坑第一篇:web前端到底是什么?有前途吗

web前端到底是什么? 某货: "前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> > HTML5.JS 的流行,让前端异常火爆,以后还会更有前途吗?请问您怎么看?" 我 "我只能告诉你:前端不灭""除非你不要脸!""前些年因为国内都不要脸,然而现在都明白了用户体验至上,现在都要脸:""不但要脸 还要胸大

web前端_正式开发之路_第一周_总结

2016.11.07正式入职xx企业(暂时保密),岗位:web前端开发工程师. 作为从一个设计.美工转战到web前端开发岗位,当然,现在还处于试用期阶段,三个月的时间,不短吧,不知道是不是能顺利的通过这段时期,希望吧. 作为一个转行的人,可以说我的转行是历经曲折,经历了八九个月的时间,其中五味杂陈,只有自己知道自己经历了多么痛苦的时光,不过,还好吧,自己的选择,自己的兴趣,苦点累点倒不是很重要,重要的是现在自己进入了开发角色,无所谓薪水.工作时间等,只要是开发的工作就好,不要单纯的做个codin

Web前端开发基础 第一天(Html和CSS)

学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下拉菜单.或鼠标滑过表格的背景颜色改变.还有焦点

前端基础入门第一阶段-Web前端开发基础环境配置

Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的行为(包括页面的效果和整合): B.HTML5时代的大前端:要处理各种端的兼容开发(PC,移动端,各种浏览器).移动APP开发和移动站点开发,Ajax+服务器端技术开发,异步开发和后台的交互.高级设计模式和框架(MVC,AngularJS...).运用自动化工作流(Grunt).网站安全.SEO.测

麦子学院-Web前端开发工程师系列培训教程

HTML+CSS基础入门1.课程介绍2.html的语法3.html的基本结构4.html的文档设置标记上(格式标记)5.html的文档设置标记下(文本标记)6.html图像标记img7.html超链接的使用8.html表格相关的标记9.html表格实战<简单的网页布局>10.html框架详解与框架布局实战11.HTML表单设计(上)12.HTML表单设计(下)13.使用CSS样式的方式14.定义CSS样式(CSS选择器)15.CSS常用属性(颜色属性)16.css常用属性(字体相关属性)17.