table虚线边框_web前端工程师7天0基础到精通(TABLE+CSS制作《互联世纪网》)

688f71bdc669066f30873725a4ae8ae7.png

项目七 项目实践:TABLE+CSS制作《互联世纪网》

实践目标

1、 熟悉CSS属性

2、 熟练运用CSS属性控制网页样式

3、 熟悉网页制作流程

项目简介:

通过上一章节的学习,我们了解了CSS样式能更加方便、有效地控制网页结构和布局网页元素,大大提高网页的排版效率,也方便后期的管理和维护。接下来将通过互联世纪网的制作来体会和加强对同学对于CSS的理解和运用。在本项目中我们将运用TABLE+CSS对网页进行布局,和美化网页。项目效果如下图:

b43c2542f5b639a4134c14bafb7dff5d.png

任务一:项目解析

任务描述:

在前面的两个章节中,我们学习了CSS的基本语法和一些常用的基本属性,在本章的项目实践中,我们会把这些知识进行综合利用,使用table+CSS进行互联世纪网的页面布局,让大家对CSS的优点有更深刻的体会。

在本项目中,通过分析效果图,我们可以把互联世纪网分为五大部分:头部、主体1、主体2、主体3、底部版权。

其中头部包括互联世纪网的图片logo,本站首页、关于我们和会员服务。

主体1是一行两列的表格,分为左右两部分,左边是一大段文字,右边是2014。

主体2是特惠方案,一行三列的表格,每个单元格内采用ul、li的标签。

主体3采用了4行2列的表格,前三行,左边是标题,右边是文字描述。最后一部分内容合并两个单元格。

底部版权包括两部分,hr标签的一条细线,第二部分实际上就是一个一行一列的表格,里面放置了两段文字声明网页的版权信息。

cfb203c97a2468b497a7bc9162d3bedd.png

在接下来的任务中我们将分别按照这个布局规划将互联世纪网逐步制作出来。

任务二:互联世纪网头部制作

任务要求:

1、 制作出互联世纪网头部,包括:logo,右边的三个文字链接。

2、 每个文字链接前面有图片小图标。

3、 布局整洁大方,配色协调美观。

实践目标:

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤:

1、 插入一行两列的表格,左边放logo,右边放三个文字链接。

2、 在每个文字链接前面插入小图标。

HTML 源代码:

b5c65cdd1c737c28df27c3752ff40b0d.png

CSS代码:

e96bffbfd9225a9c3793e00d7d87add2.png

效果预览:

abcb850029b9517c2837cb686c18b130.png

任务三:互联世纪网主体部分-1制作

任务要求:

1、 左右文字区域添加不同样式。

2、 文字下方为高为30像素的灰色区域。

3、 布局整洁大方,配色协调美观。

实践目标:

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤:

1、 新建一个两行两列的表格,第一行的左边放文字内容,右边放2014。

2、 为不同的文字添加不同的样式。

3、 合并表格第二行,添加样式为gray。

4、 在头部为样式添加属性和值。

HTML 源代码:

4b3623f9eb081f8f84d1931ab8723d6b.png
17b033febb1c6cb7d7ddd8875ae2c344.png

CSS代码:

aad8e6918c7f037b9ebabfd46ddb75bb.png

效果预览:

984d2d159bd2859a785963c6c293c595.png

任务四:互联世纪网主体-2制作

任务要求:

1、 每种套餐的边框为细双线。

2、 每种套餐内的价格列表用ul、li来定义。

3、 布局整洁大方,配色协调美观。

实践目标:

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤:

1、 新建一行三列的表格。

2、 在每个单元格内插入图片的标题,居中。

3、 每个单元格内插入ul、li标签,列表属性为小图片。

4、 用p标签插入马上申请的小图片,添加样式为right。

HTML 源代码:

f557cd34953292be68634da2ceb1bc0b.png
5856a2e859f91a9b2a1f0774fc068c36.png
ed08d45db48d37284fe8b57d1c50febd.png

CSS代码:

7b6ac6af6d92938fd877e51cdf507b52.png

效果预览:

55f54f2b70d86375252a5cdadb8d955c.png

任务五:互联世纪网主体-3制作

任务要求:

1、 左边区域为三个小标题,边框为虚线。

2、 右边区域为对应的文字描述。

3、 布局整洁大方,配色协调美观。

实践目标:

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤:

1、 插入四行两列的表格。

2、 前三行,左边添加标题在span标签内部,为标题添加名为btbj的类型选择符。第二列单元格内在p标记内添加文字。

3、 第四行用ul、li的标签添加内容列表。

HTML 源代码:

d052ad2ad5ba1244a95a834b4e816206.png
80f21331dd58ee105ee8c66d53a5f675.png
9c7fcd5b5d95a7067a1e0f362394536f.png
136535d7c23d25a421920a5bb5a7aaaa.png

CSS代码:

af127356591bf3c656ad2c9285430911.png

效果预览:

92b62fb1025d3149a6defca3e2c3d885.png

任务六:互联世纪网底部版权制作

任务要求:

1、 版权上方有一条细线。

2、 版权块以灰色的背景显示,文字居中。

3、 布局整洁大方,配色协调美观。

实践目标:

1、 掌握table网页布局。

2、 能综合运用table+CSS常用属性制作简单的网页。

参考步骤:

1、 用hr标签添加一条细线。

2、 版权内容添加一行一列的表格,背景设为灰色,添加文字。

HTML 源代码:

861e8cc86df0c6db2c6061fdd0e52e30.png

CSS代码:

2f526334c1fad3f7b7dfab16474e8541.png

效果预览:

08e6eb9480d9f461296e064563d35b83.png

项目总结:

本项目综合运用了多方面的知识和技能设计来制作网站的主页。详细介绍了该网页的主体布局和局部布局的设计过程。运用TABLE+CSS布局网页,该网页中应用了CSS中常见的属性:字体、颜色及背景、文本、边框、列表等属性。最终展示出这些网页元素的综合运用效果。通过该项目的制作,巩固table的基础知识,为接下来的CSS+DIV布局打下良好的基础。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534631.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mixamo骨骼_mixamo动作库的模型和动作绑定控制器的方法-上集

1.首先从网站下载带调好动作的文件fbx,我们将fbx场景文件转换成c4d场景文件。没转换之前转换之后选择场次,在文件菜单里找到当前场次到新文档!2.我们将模型重置为Tpose方便后续操作,没重置之前模型为k好的动作模式不能使用选中权重…

mysql 101_MySQL 调优/优化的 101 个建议!

原文:http://www.monitis.com/blog/101-tips-to-mysql-tuning-and-optimization/MySQL是一个强大的开源数据库。随着MySQL上的应用越来越多,MySQL逐渐遇到了瓶颈。这里提供 101 条优化 MySQL 的建议。有些技巧适合特定的安装环境,但是思路是相…

数据安全:保护个人隐私和企业机密的关键

在当今数字化时代,数据已经成为了一种宝贵的资源。无论是个人还是企业,都离不开数据的支持。然而,随着数据的不断增长和广泛应用,数据安全问题也日益突出。数据泄露、黑客攻击、网络诈骗等安全事件层出不穷,给个人和企…

python批量跑plsql_python实现自动化报表(Oracle/plsql/Excel/多线程)

# -*- coding: utf-8 -*-# Create time: 2019-10-16# Update time: 2019-11-28# Version: 1.0# Version: 2.0 增加多线程/出错自动重新运行模块# 导入模块import cx_Oracleimport osimport pandas as pdimport pandas.io.sql as sqlimport timeimport openpyxlimport xlwings a…

mysql 配置邮件_SQL 邮件配置篇

exec sp_configure show advanced options,1RECONFIGURE WITHOVERRIDEgoexec sp_configure database mail xps,1RECONFIGURE WITHOVERRIDEgo--2.创建邮件帐户信息EXECmsdb..Sysmail_add_account_spACCOUNT_NAME OCTMamiETL,--邮件帐户名称EMAIL_ADDRESS OCTMamiETL163.com,--发…

python 抽奖 配音乐_抖音上超好听的神曲音乐,Python教你一次性下载

不知道什么时候开始,中国出现了南抖音、北快手的互文格局(东市买骏马,西市买鞍鞯…)。刚才提到了,之前比较喜欢刷抖音,对于我这种佛系程序猿,看网上这些整容妹子基本一个样。喜欢抖音主要是两个初衷,学做菜…

mysql批量写入100万数据_Mysql数据库实践操作之————批量插入数据(100万级别的数据)-阿里云开发者社区...

第一种方法:使用insert into 插入从Redis每次获取100条数据,根据条件去插入到Mysql数据库中:条件:如果当前队列中的值大于1000条,则会自动的条用该方法,该方法每次获取从队列的头部每次获取100掉数据插入到…

mysql多客户端数据不同步_一种多终端设备上的数据同步方法

一种多终端设备上的数据同步方法【技术领域】[0001] 属于移动通信技术领域,特别是涉及基于离网环境下多种移动终端设备之间的数 据同步的方法。 技术背景[0002] 90年代未,数据同步始于有线连接,如MAC机作为数据中心,与终端设备(iP…

oem监控mysql_OEM12c 安装配置MySQL Plug-in用来监控MySQL

Plug-in--注册信息[roottest agent]# /oem/emcli setup -urlhttps://omsdb.localdomain:7301/em -usernamesysmanOracle Enterprise Manager 12c 3.Copyright (c) 1996, 2013 Oracle Corporation and/or its affiliates. All rights reserved.The configuration directory &quo…

怎么利用迭代器写入mysql_range()是什么?为什么不生产迭代器?

本篇文章给大家带来的内容是关于range()是什么?为什么不生产迭代器?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。迭代器是 23 种设计模式中最常用的一种(之一),在 Python 中随处可见它的身影&#x…

java 流式_Java开发笔记(七十二)Java8新增的流式处理

通过前面几篇文章的学习,大家应能掌握几种容器类型的常见用法,对于简单的增删改和遍历操作,各容器实例都提供了相应的处理方法,对于实际开发中频繁使用的清单List,还能利用Arrays工具的asList方法给清单对象做初始化赋…

java保留二位小数_java使double保留两位小数的多方法 java保留两位小数

复制代码代码如下:mport java.text.DecimalFormat;DecimalFormat df new DecimalFormat("######0.00");double d1 3.23456double d2 0.0;double d3 2.0;df.format(d1);df.format(d2);df.format(d3);3个结果分别为:复制代码代码如下:3.230.002.00java保留两位…

linux java jar打包_【Java】Java程序打包成jar包在Linux上运行

当需要把在Windows上开发的Java程序用在Linux上运行时,就需要吧该Java程序打包成jar包上传到Linux上去运行。1.Java程序用MyEclipse打包成可运行的jar包(1)在MyEclipse中选中需要打包的项目,点击右键,选择:Export... 如下图所示&a…

java匿名对象 回收_Java 匿名对象

我们知道一般实例化一个对象的格式,如下:Car car new Car();其中,变量名 car 就是 new Car() 这个对象的名字。car 是引用类型的变量,它的值存放的是对象的引用(或地址),通过 car 这个变量我们就可以间接使用对象。那…

java int 正则表达式_java正则表达式

Java正则表达式正则表达式定义了字符串的模式。正则表达式可以用来搜索、编辑或处理文本。正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别。Java正则表达式和Perl的是最为相似的。java.util.regex包主要包括以下三个类:Pattern类&#xf…

mysql.h 动态编译命令_Linux环境编译动态库和静态库总结

对Linux环境动态库和静态库的一些基础知识做一些总结,首先总结静态库的编译步骤。1 先基于.cpp或者.c文件生成对应的.o文件2将几个.o文件 使用ar -cr命令 生成libname.a文件libname.a 为静态库, name 为静态库的名字,可以根据模块功能命名。举…

netbeans java中文_Ubuntu 下jdk安装中文字体 java 解决netbeans 方块字 中文乱码

安装环境Ubuntu 11.04、javajdk1.6.0_27首先找到你需要的字体,比如我就是从windows系统里拷出来的,C:\WINDOWS\Fonts这里有很多字体,我只拷贝了simsun.ttc(中文 宋体,从xp系统拷贝的,win7 下没有这个文件)安装java后&a…

python 教学_「Python基础」一次就装好Python手把手装到好

一、前言:安装Python有两个主要的方法,视情况而定我两个都会用:(1)安装 AnacondaAnaconda像一个懒人包,安装它等于把Python安装好连同把Python大部分的套件也下载好了,不只如此连通较常用的Python IDE一同帮你装到好。…

java求二维数组每行的最大值_用JAVA输入一个二维数组a[3][4]的元素值,求输出其元素最大值...

展开全部这个简单啊,把所有元素遍历一边62616964757a686964616fe58685e5aeb931333335343963代码:import java.util.Scanner;public class Help2 {public static void main(String[] args) {Scanner inputnew Scanner(System.in);System.out.print("…

java redis 面试题_Java开发人员怎么面试 常见Redis面试题有哪些

Java开发人员怎么面试?常见Redis面试题有哪些?Redis是目前各大企业都在使用的人们技术,也是企业选拔人才时考核的一个难题。有很多同学只是简单了解Redis的应用,但对于为什么要用Redis以及企业面试中有关Redis的问题却答不上来。接…