【html】如何用html+css写出一个漂亮的“众成教育”页面

先来看看效果图:

源码:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>* {margin: 0;padding: 0;/* border: 2px solid #000; */}.con {width: 1000px;height: 840px;background-image: url(img/9-bg.jpg);}.top {width: 1000px;height: 150px;}.main {background-color: aliceblue;width: 1000px;height: 630px;}.left {padding-top: 30px;padding-left: 20px;width: 200px;height: 570px;float: left;line-height: 60px;}.center {border-left: 2px dashed blue;border-right: 2px dashed blue;padding-top: 50px;width: 500px;height: 580px;float: left;}.right {padding-left: 20px;width: 250px;height: 630px;float: left;}.footer {width: 1000px;height: 60px;font-family: "楷体";font-size: 18px;text-align: center;line-height: 30px;}a,span {color: red;font-weight: 700;text-align: center;}p {font-family: "黑体", sans-serif;/* 使用黑体字体,如果系统没有黑体则使用无衬线字体 */color: brown;/* 设置字体颜色为棕色 */font-size: 28px;/* 设置字体大小为28像素 */text-align: center;/* 设置文本居中 */}table {font-family: '黑体', sans-serif;/* 设置字体为黑体,如果系统没有黑体,将使用sans-serif作为备选 */font-weight: 700;/* 设置字体粗细为700 */color: blue;/* 设置字体颜色为蓝色 */font-size: 20px;/* 设置字体大小为20px */line-height: 55px;/* 设置行高为55px */}</style></head><body><div class="con"><div class="top"><img height=150"" src="./img/9-logo.jpg" alt="" /></div><div class="main"><div class="left"><p><img src="./img/but2.jpg" alt=""></p><p><img src="./img/but3.jpg" alt=""></p><p><img src="./img/but4.jpg" alt=""></p><p><img src="./img/but5.jpg" alt=""></p><p>相关信息</p><a href="#">4大学生学历提升方案</a><br /><a href="#">新报考政策解读击</a><br /><a href="#">6大学专业报考指南</a><br /><a href="#">更多信息请点击</a></div><div class="center"><p>入学报名表</p><form id="form2" name="form2" method="post" action=""><table style="margin: 0 auto; width: 400px; border-collapse: collapse;"><tr><td style="text-align: right; width: 158px;">姓名: <label for="textfeld"></label></td><td width="242"><input type="text" name="textfield" id="textfield" /></td></tr><tr><td style="text-align: right; ">联系电话: </td><td><input type="text" name="textfield2" id="textfield2" /></td></tr><tr><td style="text-align: right; ">邮箱: </td><td><input type="text" name="textfield3" id="textfield3" /></td></tr><tr><td style="text-align: right; ">资料邮寄地址: </td><td><input type="text" name="textfield4" id="textfield4" /></td></tr><tr><td style="text-align: right;">最高学历:</td><td><select name="select2" id="select2"><option value="">大学本科</option><option value="">大专</option><option value="">高中</option><option value="">初中</option><option value="">小学</option></select></td></tr><tr><td style="text-align: right;">选择的课程:</td><td><input type="text" name="textfield6" id="textfield6" /></td></tr><tr><td style="text-align: right; width: 170px;">意向的学习方式:<label for="select2"></label></td><td><select name="select2" id="select2"><option value="">网络授课</option><option value="">周末班</option><option value="">全日制</option></select></td></tr><tr><td colspan="2" align="center"><input type="image" src="./img/but1.jpg" alt="" name="imageField" id="imageField" /></td></tr></table></form></div><div class="right"><img src="./img/pho1.jpg" alt=""><img src="./img/pho2.jpg" alt=""><img src="./img/pho3.jpg" alt=""><img src="./img/pho4.jpg" alt=""></div></div><div class="footer"><span>免费电话:</span>400-XXX-XXX(18条线)||<span>(北京校区)</span>北京路XX大厦一楼0000号;||<span>(上海校区)</span>上海路XX科技园7栋9999号<br>此网站信息最终解释权&copy;众成远程教育</div></div></body>
</html>

将近200行的代码,才能写出这样的一个漂亮的网站,但是大家只要好好学,也能写出来;。

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

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

相关文章

【精通NIO】NIO介绍

一、什么是NIO NIO&#xff0c;全称为New Input/Output&#xff0c;是Java平台中用于替代传统I/O&#xff08;Blocking I/O&#xff09;模型的一个功能强大的I/O API。NIO在Java 1.4版本中被引入&#xff0c;其设计目标是提供一种非阻塞的、低延迟的I/O操作方式&#xff0c;以…

2024百度之星 跑步

原题链接&#xff1a;码题集OJ-跑步 题目大意&#xff1a;一个n个人在绕圈跑&#xff0c;第i个人跑一圈的时间是i分钟&#xff0c;每二个人位置相同就会打一次招呼&#xff0c;如果同时来到终点&#xff0c;他们就会停下来&#xff0c;请问会打多少次招呼&#xff1f; 思路&a…

SpringCloud网关-gateway

一 什么是网关&#xff1f;为什么选择 Gateway? 网关功能如下&#xff1a; 身份认证和权限校验服务路由、负载均衡请求限流 在 Spring Cloud 中网关的实现包含两种&#xff1a; Gateway&#xff08;推荐&#xff09;&#xff1a;是基于 Spring5 中提供的 WebFlux &#xff…

关于计算机是如何工作的

计算机的发展历程 世界上的第一个计算机 冯诺依曼机构体系 1.存储器 (包括内存(存储空间小,访问速度快,成本高,掉电后数据丢失) 外存(硬盘,软盘,U盘,光盘)),存储空间小,访问速度慢,成本低,掉电后数据仍在 2.CPU(中央处理单元,计算机最核心的部分,用于算术运算和逻辑判断),…

Vue3项目准备:utils工具插件文件夹中封装request.js配置axios请求基地址及超时时间、请求拦截器、响应拦截器

token介绍 概念&#xff1a;访问权限的令牌&#xff0c;本质上是一串字符串 创建&#xff1a;正确登录后&#xff0c;由后端签发并返回 作用&#xff1a;判断是否有登录状态等&#xff0c;控制访问权限 注意&#xff1a;前端只能判断token有无&#xff0c;而后端才能判断tok…

【UML用户指南】-09-对基本结构建模-类图

目录 1、概述 2、引入 3、过程 4、常用建模技术 4.1、对简单协作建模 4.2、对逻辑数据库模式建模 4.3、正向工程 1、概述 类图是面向对象系统建模中最常见的图。 类图显示一组类、接口、协作以及它们之间的关系 类图用于对系统静态设计视图建模。其大多数涉及到对系统的…

java守护线程介绍

在Java中&#xff0c;守护线程&#xff08;Daemon Thread&#xff09;是一种特殊类型的线程&#xff0c;它在后台默默地运行&#xff0c;为其他线程提供服务。当 JVM 中只剩下守护线程时&#xff0c;JVM 会退出。这意味着&#xff0c;守护线程不应该执行关键的任务&#xff0c;…

【NOIP2020普及组复赛】题3:方格取数

题3&#xff1a;方格取数 【题目描述】 设有 nm 的方格图&#xff0c;每个方格中都有一个整数。现有一只小熊&#xff0c;想从图的左上角走到右下角&#xff0c;每一步只能向上、向下或向右走一格&#xff0c;并且不能重复经过已经走过的方格&#xff0c;也不能走出边界。小熊…

嵌入式学习记录6.6(拷贝构造/友元函数/常成员函数)

一.拷贝构造函数和拷贝赋值函数 1.1拷贝构造函数功能,格式 拷贝构造函数是一种特殊的构造函数&#xff0c;用来将一个类对象给另一个类对象初始化使用的。 1> 用一个类对象给另一个类对象初始化时&#xff0c;会自动调用拷贝构造函数。 2> 当一个类对作为函数的实参&…

微信小程序uniapp的父子之间的通信传递

1.父传递给子信息 my-test是子组件 demo是父组件 这是定义在父组件中的的info信息 要将这个传递给子组件 子组件在properties 中接收父组件传递来的数据 msg type 是类型 value是默认值&#xff0c;当父组件没有传递数据时&#xff0c;就会默认使用value的数据 子组件…

设备上CCD功能增加(从接线到程序)

今天终于完成了一个上面交给我的一个小项目&#xff0c;给设备增加一个CCD拍照功能&#xff0c;首先先说明一下本次使用基恩士的CCD相机&#xff0c;控制器&#xff0c;还有软件&#xff08;三菱程序与基恩士程序&#xff09;。如果对你有帮助&#xff0c;欢迎评论收藏&#xf…

顶顶通呼叫中心中间件-同振和顺振配置步骤(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-同振和顺振配置步骤(mod_cti基于FreeSWITCH) 一、拨号方案配置 1、同振 win-ccadmin配置方法 1、点击拨号方案->2、在红框中输入同振->3、点击添加->4、根据图中配置&#xff0c;配置好了等待一分钟即可生效。 web-ccadmin配置方法 2、顺振…

【Python】教你彻底了解 Python中的文件处理

​​​​ 文章目录 一、文件的打开与关闭1. 打开文件2. 关闭文件3. 文件模式 二、文件的读写操作1. 读取文件内容2. 写入文件内容 三、使用上下文管理器四、异常处理五、二进制文件操作1. 读取二进制文件2. 写入二进制文件 六、实际应用示例1. 处理CSV文件2. 处理JSON文件 结论…

kafka安装流程

安装kafka前需要安装zookeeper zookeeper安装教程 1.新建一个logs文件夹 2.修改配置文件 3.修改listeners参数 4.以管理员身份启动kafka服务 .\bin\windows\kafka-server-start.bat .\config\server.properties 如果报 输入行太长。 命令语法不正确。 解决方案如下&#x…

Java 【数据结构】 TreeSetTreeMap(二叉搜索树详解)【神装】

登神长阶 第八神装 TreeSet 第九神装 TreeMap 目录 &#x1f489; 一.二叉搜索树 &#x1fa78;1. 定义 &#x1f48a;2. 基本操作 &#x1fa79;3. 插入操作 &#x1fa7c;4. 查找操作 &#x1fa7a;5. 删除操作* &#x1fa7b;6. 遍历操作 &#x1fa92;7.性能分析 …

引用(C++)和内联函数

前言&#xff1a;本文主要讲解C语法中引用如何使用和使用时的一些技巧 基本语法 引用就是取别名 #include <iostream> using namespace std; int main() {int a 10;int& b a;//给a取别名为bcout << a << endl;cout << b << endl;return 0…

MogoTemplate基本入门(Mongodb数据库基本增删改查)

nosql 因为没有标准的 sql&#xff0c;各有各的操作方式&#xff0c;所以学习成本比较高。实际应用也不会去命令行直接操作&#xff0c;而是用编程语言的 api。 所以我们可以简单了解一下Mongodb&#xff0c;然后用java的Api去操作就行了 没必要花很大功夫在命令行上操作执行…

【机器学习】GLM4-9B-Chat大模型/GLM-4V-9B多模态大模型概述、原理及推理实战

​​​​​​​ 目录 一、引言 二、模型简介 2.1 GLM4-9B 模型概述 2.2 GLM4-9B 模型架构 三、模型推理 3.1 GLM4-9B-Chat 语言模型 3.1.1 model.generate 3.1.2 model.chat 3.2 GLM-4V-9B 多模态模型 3.2.1 多模态模型概述 3.2.2 多模态模型实践 四、总结 一、引言…

parseInt函数

貌似遇到问题了&#xff0c;在Java中&#xff0c;parseInt方法是java.lang.Integer类的一个静态方法&#xff0c;它用来将字符串转换为基本数据类型int。如果字符串不能被解析为有效的整数&#xff0c;parseInt会抛出一个NumberFormatException。 原来是取整串转换&#xff0c;…

Vue随笔记

1 Idea里面使用Vue Idea里面要安装Vue插件 File - New - Project - JavaScript - Vue.js 然后出现&#xff1a; "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npx-cli.js" --ignore-existing --package vue/cli…