【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…

python oa服务器巡检报告的功能及概况

功能及使用python知识点 01.文件与目录的操作 0101.创建目录 0102.文件复制和重命名 0103.返回目录中文件名列表 0104.删除某一目录下的所有文件或文件夹 02. 异常捕捉和处理 03.字符串的拼接 04.时间与自定义时间计算和获取 0401.当前时间的获取&#xff0c;时间格式…

SpringCloud网关-gateway

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

判断素数/质数

#include <bits/stdc.h>using namespace std;bool isprim(int a) {if(a < 2) return false;//if(a 2 || a 3) return true;//判断2&#xff0c;3快一点&#xff0c;需要把i的初始值改为5for(int i 2;i < sqrt(a);i)if(a % i 0) return false;return true; }int…

关于计算机是如何工作的

计算机的发展历程 世界上的第一个计算机 冯诺依曼机构体系 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> 当一个类对作为函数的实参&…

Meta Llama 3 里面装饰器

Meta Llama 3 里面的装饰器 flyfish 目录 Meta Llama 3 里面的装饰器介绍staticmethod使用 staticmethod 的示例何时使用静态方法另一个示例&#xff1a;日期处理 其他的内置装饰器property示例 contextmanager示例 classmethod示例 classmethod 与 staticmethod 的比较stati…

Leetcode.866 回文质数

题目链接 Leetcode.866 回文质数 rating : 1938 题目描述 给你一个整数 n n n &#xff0c;返回大于或等于 n n n 的最小 回文质数。 一个整数如果恰好有两个除数&#xff1a; 1 1 1 和它本身&#xff0c;那么它是 质数 。注意&#xff0c; 1 1 1 不是质数。 例如&#xf…

ffmpeg编码器编码元数据的过程以及编码前后的差异

编码方式为avcodec_send_frame&#xff1a;将原始帧发送到编码器进行编码 编码过程完成于avcodec_receive_packet&#xff1a;从编码器接收编码后的压缩数据&#xff0c;也就是说已经编码压缩完成了&#xff0c;并存储到avpacket中&#xff0c;此时元数据被分割成多个NALU单元&…

微信小程序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…

Linux系统下玩转Quickemu虚拟机管理工具

Linux系统下玩转Quickemu虚拟机管理工具 一、Quickemu介绍1.1 Quickemu简介1.2 Quickemu关键特性1.3 Quickemu特点1.4 Quickemu使用场景1.5 相关命令解释二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本四、环…