HTML CSS JavaScript的网页设计
一、网页界面效果：
二、HTML代码：
<!DOCTYPE html> <!-- 声明文档类型-->
<html lang="en"> <!-- 确定语言形态 -->
<head>
<meta charset="UTF-8"> <!--控制网页的编码格式 utf-8 国际性编码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--控制viewport比例以及缩放-->
<title>首页</title>
<!--顺序引入样式表 -->
<link rel="stylesheet" href="../005-完整的网页设计/css/Reset.css">
<link rel="stylesheet" href="../005-完整的网页设计/css/Public.css">
<link rel="stylesheet" href="../005-完整的网页设计/css/Index.css">
</head>
<body>
<div class="header_box">
<!-- h1 左侧添加logo -->
<h1>
<img src="../005-完整的网页设计/image/logo.jpg" alt="">
</h1>
<!-- 头部右侧搜索标签-->
<form action="">
<input type="text" class="search" value="SEARCH...">
<div>
<input type="button" class="btn">
</div>
</form>
</div>
<div id="Navigation_bar">
<!-- 导航栏部分 -->
<div class="Navigation_common">
<ul>
<li class="margin-left"><a href="#">公司简介</a></li>
<li><a href="#">组织架构</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">应用方案</a></li>
<li><a href="#">设计开发</a></li>
<li><a href="#">支持培训</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</div>
<!-- banner部分 -->
<div id="banner">
<div class="banner_con">
</div>
</div>
<!-- 新闻列表部分 -->
<div class="news_con">
<!-- 左侧的盒子 -->
<div class="news_l">
<h3 class="news_title">新闻动态</h3>
<ul class="news_list">
<li>
<a>公司实时动态...</a>
<span>20991212</span>
</li>
</ul>
</div>
<!-- 中间的盒子-->
<div class="news_c">
<h3 class="news_title">新产品</h3>
<p class="txt1">。。。。。。。。。。</p>
</div>
<!-- 右边的盒子 -->
<div class="Breaking_news">
<h3 class="news_title">里程碑</h3>
<p class="txt3">--------------------------...</p>
</div>
</div>
<!-- 项目案例 -->
<div class="case_con">
<h3>市场项目</h3>
<div class="case_box">
<dl>
<dt><img src="../005-完整的网页设计/image/project.jpg" alt=""></dt>
<dd>项目介绍一</dd>
</dl>
<dl>
<dt><img src="../005-完整的网页设计/image/project.jpg" alt=""></dt>
<dd>项目介绍二</dd>
</dl>
</div>
</div>
<!-- 链接 -->
<div id="links">
<div class="links_con">
<div class="links_l">
<h3 class="links_title">快速链接</h3>
<ul class="links_list">
<li>
<a href="#">技术支持中心</a>
</li>
<li>
<a href="#">客户服务中心</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>
<div class="links_c">
<h3 class="links_title">下载中心</h3>
<ul class="links_list">
<li>
<a href="#">硬件demo</a>
</li>
<li>
<a href="#">SDK</a>
</li>
<li>
<a href="#">IDE</a>
</li>
</ul>
</div>
<div class="links_r">
<h3 class="links_title">公众号</h3>
<div class="map">
</div>
</div>
</div>
</div>
<div class="footer_con">
<p class="footer_l">
<a href="#">政策</a>
<a href="#">销售条款</a>
<a href="#">商标</a>
<a href="#" class="footer-right">网站反馈</a>
</p>
<p class="footer_r">
</p>
</div>
</body>
</html>
三、CSS代码
@charset "utf-8";
/* 统一板块宽度和左右居中 */
.banner_con,
.news_con,
.case_con,
.links_con,
.footer_con {
width: 1002px;
margin: 0 auto;
}
#banner {
height: 465px;
background: gray url("../image/banner.jpg") no-repeat center;
}
#banner .banner_con {
height: 465px;
/* background: pink; */
margin: 0 auto;
}
.news_con {
height: 243px;
background: white;
}
.news_title {
/* background: cadetblue; */
font-size: 18px;
color: #3f434f;
line-height: 18px;
padding-top: 36px;
}
.news_list {
/* background: cornflowerblue; */
margin-top: 23px;
}
.news_list li {
width: 437px;
height: 25px;
background: url("../images/ico_05.jpg") no-repeat left;
padding-left: 14px;
/* margin-top: 23px;不能给li加哦 要给他爹，不然每个儿子顶部都会空出来*/
}
.news_list li a {
float: left;
font-size: 12px;
color: #565656;
line-height: 25px;
}
.news_list li span {
float: right;
color: #9a9a9a;
font-size: 12px;
}
.news_l {
width: 480px;
height: 243px;
/* background: rebeccapurple; */
float: left;
padding-left: 21px;
}
.news_c {
width: 194px;
height: 243px;
background: #f1f1f1;
float: left;
padding: 0 27px 0 20px;
}
.news_c .txt1 {
font-size: 12px;
color: #555555;
line-height: 25px;
margin-top: 34px;
/* 行高自己去量哦 */
}
.news_c .txt2 {
font-size: 12px;
color: #979797;
line-height: 25px;
margin-top: 15 px;
/* 行高自己去量哦 */
}
.Breaking_news {
width: 180px;
height: 243px;
background: #fbfbfb url("../images/ma_05.jpg") no-repeat right bottom;
float: left;
padding: 0 38px 0 24px;
}
.Breaking_news .txt3 {
font-size: 12px;
color: #585858;
line-height: 24px;
margin: 21px 0 22px 0;
}
.case_con {
height: 304px;
/* background: goldenrod; */
}
.case_con h3 {
font-size: 18px;
color: #3f434f;
/* background: pink; */
padding: 28px 0 18px 22px;
}
.case_con .case_box {
height: 240px;
/* background: orange; */
}
.case_box dl {
width: 210px;
/* 这是由图片尺寸为210得出的，这样文本就会屈居于一处 */
/* background: burlywood; */
float: left;
margin: 0 20px;
}
/* 这里很重要！一定要设置宽高，也就是图片尺寸得出，这样以后图片更换，结构就不会乱！ */
.case_box dl dt {
width: 210px;
height: 136px;
}
.case_box dl dd {
font-size: 12px;
color: #4f4f4f;
line-height: 24px;
margin-top: 13px;
}
/* 上面给dt这个容器指定了宽高，现在让img跟随这个容器的宽高！！ */
.case_box dl dt img {
width: 100%;
height: 100%;
}
#links {
background: #e5e5e5;
}
.links_con {
height: 250px;
/* */
}
.links_con .links_title {
color: #5d5d5d;
line-height: 16px;
border-bottom: 1px solid #c1c1c1;
padding: 31px 0 11px 13px;
}
.links_con .links_l {
width: 452px;
height: 250px;
background: #e5e5e5;
float: left;
margin-left: 20px;
}
.links_con .links_list {
/* background: cornsilk; */
height: 170px;
padding-left: 5px;
padding-top: 15px;
}
.links_con .links_list li {
width: 136px;
height: 24px;
background: url("../images/btn_img_13.jpg") no-repeat left center;
font-size: 12px;
line-height: 24px;
padding-left: 13px;
float: left;
}
.links_con .links_list li a {
color: #5f5f5f;
}
.links_con .links_c {
width: 153px;
height: 250px;
background: #e5e5e5;
float: left;
margin: 0 50px;
}
.links_con .links_c .links_list li {
width: 130px;
}
.links_con .links_r {
width: 256px;
height: 250px;
background: #e5e5e5;
float: left;
}
.links_con .links_r .map {
text-align: center;
padding-top: 11px;
}
相关文章：
HTML CSS JavaScript的网页设计
一、网页界面效果： 二、HTML代码： <!DOCTYPE html> <!-- 声明文档类型--> <html lang"en"> …...
37.从0到上线三天搭建个人网站（第一天）
点赞收藏加关注，你也能住大别墅！ 挑战三天搭建个人网站 从0到上线 一、项目的主要功能 1.作为自己在网上的一个工作室。 2.发帖 3.展示个人项目连接 4.介绍自己（没准儿还能接点活儿） 二、UI风格参考 三、技术选型 1.前端&a…...
室内外融合便携式定位终端5G+UWB+RTK
一、介绍 便携式定位终端主要用于提供高精度的位置数据，支持室内UWB定位和室外北斗系统定位功能，支持5G公网和5G专网通信功能，便携式定位终端中超宽带(UWB)和实时动态(RTK)技术的集成代表了精确位置跟踪方面的重大进步。这款UWBRTK便携式定位…...
使用Java语言判断一个数据类型是奇数还是偶数
判断一个数字类型是奇数，还是偶数，只需要引入Scanner类，然后按照数据类型的定义方式进行定义，比较是按照与2进行整除后的结果；如果余数为零，则代表为偶数，否则为奇数。 import java.util.Scann…...
Java三种代理模式：静态代理、动态代理和CGLIB代理
Java三种代理模式：静态代理、动态代理和CGLIB代理 代理模式 代理模式是23种设计模式种的一种。代理模式是一种结构型设计模式，它允许为其他对象提供一个替代品或占位符，以控制对这个对象的访问。代理模式可以在不修改被代理对象的基础上&am…...
vivado实现分析与收敛技巧9-分析使用率统计数据
实现问题的常见原因之一是未考量显式和隐式物理约束。例如 ， 管脚分配 (pinout) 在逻辑布局上变为显式物理约束。 slice（ 分片 ） 逻辑在大部分器件中都是一致的。但如下专用资源表示的是隐式物理约束 ， 因为这些资源仅在某些位置…...
7nm项目之顶层规划——01数据导入
1.创建workspace 创建workspace后，在其目录下产生。 CORTEXA53.json文件是将有默认配置的文件master.json、有library的.config.json文件、tunes下CORTEXA53.tunes.json文件合并 注：tunes下的CORTEXA53.tunes.json文件可以覆盖一些master.json的设置…...
一键式紧急报警柱系统
随着科技的不断发展，一键式紧急报警柱在我们的生活和工作中扮演着越来越重要的角色。在这篇文章中，我们将一起探究与一键式紧急报警柱有关的知识。 一键式紧急报警柱是一种常见的安全防护设备，能够在紧急情况下快速发出警报，保护…...
4-Docker命令之docker run
1.docker run介绍 docker run命令是用来创建新的容器并运行相关命令 2.docker run用法 docker run [参数] [root@centos79 ~]# docker run --helpUsage: docker run [OPTIONS] IMAGE [COMMAND] [ARG...]Create and run a new container from an imageAliases:docker conta…...
【模电】直流通路与交流通路
直流通路与交流通路 通常，在放大电路中，直流电源的作用和交流信号的作用总是共存的，即静态电流、电压和动态电流、电压总是共存的。但是由于电容、电感等电抗元件的存在，直流量所流经的通路与交流信号所流经的通路不完全相同。因此…...
SpringBoot JprotoBuf序列化与反序列化的实现
文章目录 前言一、protobuf与JprotoBufprotobuf介绍JprotoBuf介绍protobuf与JprotoBuf的区别二、JprotoBuf特点三、类型转换对照表四、ProtobufClass编写五、序列化与反序列化测试六、使用JprotoBuf时的注意事项七、JprotoBuf与protobuf序列化反序列化结果比较前言 在软件开发…...
互联网Java工程师面试题·Spring Boot篇·第一弹
目录 1、什么是 Spring Boot？ 2、Spring Boot 有哪些优点？ 3、什么是 JavaConfig？ 4、如何重新加载 Spring Boot 上的更改，而无需重新启动服务器？ 5、Spring Boot 中的监视器是什么？ 6、如何在 Sprin…...
HostHunter虚拟主机发现
HostHunter虚拟主机发现 1.HostHunter2.安装3.参数解释4.实例1.HostHunter HostHunter 一种工具，用于有效发现和提取提供大量目标 IPv4 或 IPv6 地址的主机名。HostHunter 利用简单的 OSINT 和主动协调技术将 IP 目标与虚拟主机名进行映射。这对于发现组织的真正攻击面特别有…...
鸿蒙开发：UIAbility组件间交互探索实战【鸿蒙专栏-22】
UIAbility组件间交互（设备内） 在设备内，UIAbility（用户界面能力）是系统调度的最小单元，它们负责展示用户界面和执行相关的业务逻辑。设备内的不同功能模块之间的交互是应用程序开发中的重要部分。本文将探讨设备内UIAbility之间的交互方式，包括启动应用内的UIAbility、…...
VSCode Vue 开发环境配置
Vue是前端开发中的重要工具与框架，可以保住开发者高效构建用户界面。 Vue2官方文档：https://v2.cn.vuejs.org/ Vue3官方文档：https://cn.vuejs.org/ Vue的安装和引用 Vue2的官方安装指南：https://v2.cn.vuejs.org/v2/guide/ins…...
clickhouse从mysql同步数据到clickhouse的几种方式
背景 我们的业务数据一般来说都是放在Mysql中的，而我们要分析的数据一般都存放在clickhouse中，所以如何把数据从mysql同步到ck，就变成了一个必须的步骤，本文简单记录下几种同步的方式 mysql数据同步到clickhouse 方式一&#x…...
“滑动窗口”算法实例
1 问题 给定一个字符串“S”，找出其中不含有重复字符的最长子串的长度。例如：S‘ABCABCBB’，则不含重复字符的最长字串长度为3.。S‘ABCDFG’,则不含重复字符的最长字串长度为6。要求设计一个Python程序实现该功能？ 2 方法 按照一…...
分布式搜索引擎elasticsearch(一）
5.1 初始elasticsearch elasticsearch是一款非常强大的开源搜索引擎，可以帮助我们从海量数据中快速找到需要的内容。 elasticsearch是elastic stack的核心，负责存储、搜索、分析数据。 5.1.1正向索引 5.1.2elasticsearch采用倒排索引： 文档（document）：每条数据就是一个…...
PTA 7-236 验证哥德巴赫猜想
哥德巴赫猜想之一是指一个偶数（2除外）可以拆分为两个素数之和。请验证这个猜想。 因为同一个偶数可能可以拆分为不同的素数对之和，这里要求结果素数对彼此最接近。 输入格式: 首先输入一个正整数T，表示测试数据的组数࿰…...
微信小程序 纯css画仪表盘
刚看到设计稿的时候第一时间想到的就是用canvas来做这个仪表盘，虽然本人的画布用的不是很好但还可以写一写😀。话不多说直接上代码。最后有纯css方法 <!--wxml--> <canvas canvas-id"circle" class"circle" >// js dat…...
成为AI产品经理——模型稳定性评估（PSI）
一、PSI作用 稳定性是指模型性能的稳定程度。 上线前需要进行模型的稳定性评估，是否达到上线标准。 上线后需要进行模型的稳定性的观测，判断模型是否需要迭代。 稳定度指标(population stability index ,PSI)。通过PSI指标，我们可以获得不…...
操作系统——进程同步
目录 一、信号量相关函数 1. 创建信号量集 2. 获取信号量集 3. 等待、通知信号量集 4. 控制信号量集 二、简单进程同步 1. 创建信号量集 2. P操作 3. V操作 4. 删除信号量集 5. 测试： 三、生产者与消费者 1. 创建、删除共享内存及信号量集 2. 单一生产…...
如何能够对使用ShaderGraph开发的Shader使用SetTextureOffset和SetTextureScale方法
假设在ShaderGraph中的纹理的引用名称为"_BaseMap"，同时对这个"_BaseMap"纹理使用了采样的节点"SampleTexture2D"，然后该采样节点的uv接入的TilingAndOffset节点，此时的关键步骤是新建一个Vector4属性…...
力扣572：另一棵树的子树
力扣572：另一棵树的子树 给你两棵二叉树 root 和 subRoot 。检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在，返回 true ；否则，返回 false 。 二叉树 tree 的一棵子树包括 tree 的某个节点和这个节点的所…...
Linux系统中进程间通信（Inter-Process Communication, IPC）
文章目录 进程间通信介绍进程间通信目的进程间通信发展 管道什么是管道 匿名管道用fork来共享管道原理站在文件描述符角度-深度理解管道站在内核角度-管道本质管道读写规则管道特点 命名管道创建一个命名管道匿名管道与命名管道的区别命名管道的打开规则 命名管道的删除用命名管…...
【React + Typescript】使用WebPack包管理、各种扩展插件组成的初始模板，开源协议：CC-BY-4.0
React Typescript Webpack 模板 模板展示项目结构使用的部分扩展包页面配置代码Layout 公共容器组件路由Jspackage.json 开源模板下载TIP 模板展示 项目结构 使用的部分扩展包 📂 System ├── 📂 Plugin │ ├── 📄 file-loader | 在处…...
python 制作3d立体隐藏图
生成文件的3d图，例子： 文字： 隐藏图： 使用建议： １、建议不用中文，因为中文太复杂，生成立体图效果不好。 ２、需要指定FONT_PATH，为一个ttf文件，…...
layui+ssm实现数据批量删除
layuissm实现数据的批量删除 //数据表格table.render({id: adminList,elem: #adminList,url: ctx "/admin/getAdminList", //数据接口cellMinWidth: 80,even: true,toolbar: #toolbarDemo,//头部工具栏limit: 10,//每页条数limits: [10, 20, 30, 40],defaultToolba…...
国产AI边缘计算盒子，双核心A55丨2.5Tops算力
边缘计算盒子 双核心A55丨2.5Tops算力 ● 2.5TopsINT8算力，支持INT8/INT4/FP16多精度混合量化。 ● 4路以上1080p30fps视频编解码，IVE模块独立提供图像基础算子加速。 ● 支持Caffe、ONNX/PyTorch深度学习框架，提供resnet50、yolov5等AI算…...
C++作业4
代码整理， 将学过的三种运算符重载，每个至少实现一个运算符的重载 代码： #include <iostream>using namespace std;class Stu {friend const Stu operator*(const Stu &L,const Stu &R);friend bool operator<(const Stu …...
网站建设创作思路怎么写/长春网站优化团队
背景 上一篇我们详细介绍了使用monaco-editor来实现一个hello-world的示例，并详细介绍了其中涉及的资源加载，相关参数。本篇文章让我们一起学习如何设置编辑器的内容，获取编辑器的内容，和监听编辑器的内容改动。 设置值 书接上文，我们在上篇初始化了一个编辑器，并设置…...
工信部网站备案系统/网站推广的渠道有
冯.诺依曼体系结构,个人的理解:物理电学补充:所有的物质,是由分子或原子组成的。分子是能保持物质化学性质不变的最小微粒。分子是由原子组成的，可分为单原子分子和多原子分子。原子的原子核式结构：原子的中心为原子核，电子在不同轨道上绕着原…...
网站维护步骤/促销活动推广方法有哪些
Nginx 配置反向代理和负载均衡 前言 这段时间在重新搞自己阿里云服务器上的博客，想着使用docker来搞一下方便后期“移植”，所以也顺带玩了一下nginx（我自己服务器实际上是用不到nginx的，只是这里纯属放假因为疫情出不去没事干搞着…...
网站标识代码怎么加/厦门百度竞价开户
根据你的系统选择你需要下载的jdk，32位系统对应x86，64位系统对应x64下载完后得到一个可执行文件，点击运行进入安装二、安装1.安装JDK选择你要安装到的路径，注意这个路径不能包含中文名这里我们可以通过“更改”选择自己想要安装到…...
网站建设七点/教育培训学校
先查看是否有密钥文件 ls -al ~/.ssh/ 没有，可以配置 添加密钥（用自己的邮箱） ssh-keygen -C youemail163.com -t rsa 一路点回车键就可以了，直到出现下面画面 进入到密钥文件目录，查看公钥文件 id_rsa.pub cd ~/…...
网站外部链接如何建设/成都关键词自然排名
form 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。 <!DOCTYPEHTML> <html> <head>…...