当前位置： 首页 > news >正文

HTML CSS JavaScript的网页设计

news 2025/12/17 15:17:03

一、网页界面效果：

二、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的网页设计

一、网页界面效果&#xff1a; 二、HTML代码&#xff1a; <!DOCTYPE html> <!-- 声明文档类型--> <html lang"en"> …...

编程日记 2023/12/5 7:28:20

37.从0到上线三天搭建个人网站（第一天）

点赞收藏加关注&#xff0c;你也能住大别墅&#xff01; 挑战三天搭建个人网站 从0到上线 一、项目的主要功能 1.作为自己在网上的一个工作室。 2.发帖 3.展示个人项目连接 4.介绍自己&#xff08;没准儿还能接点活儿&#xff09; 二、UI风格参考 三、技术选型 1.前端&a…...

编程日记 2023/12/5 7:27:19

室内外融合便携式定位终端5G+UWB+RTK

一、介绍 便携式定位终端主要用于提供高精度的位置数据&#xff0c;支持室内UWB定位和室外北斗系统定位功能&#xff0c;支持5G公网和5G专网通信功能&#xff0c;便携式定位终端中超宽带(UWB)和实时动态(RTK)技术的集成代表了精确位置跟踪方面的重大进步。这款UWBRTK便携式定位…...

编程日记 2023/12/5 7:26:19

使用Java语言判断一个数据类型是奇数还是偶数

判断一个数字类型是奇数&#xff0c;还是偶数&#xff0c;只需要引入Scanner类&#xff0c;然后按照数据类型的定义方式进行定义&#xff0c;比较是按照与2进行整除后的结果&#xff1b;如果余数为零&#xff0c;则代表为偶数&#xff0c;否则为奇数。 import java.util.Scann…...

编程日记 2023/12/5 7:25:17

Java三种代理模式：静态代理、动态代理和CGLIB代理

Java三种代理模式&#xff1a;静态代理、动态代理和CGLIB代理 代理模式 代理模式是23种设计模式种的一种。代理模式是一种结构型设计模式&#xff0c;它允许为其他对象提供一个替代品或占位符&#xff0c;以控制对这个对象的访问。代理模式可以在不修改被代理对象的基础上&am…...

编程日记 2023/12/5 7:24:16

vivado实现分析与收敛技巧9-分析使用率统计数据

实现问题的常见原因之一是未考量显式和隐式物理约束。例如 &#xff0c; 管脚分配 (pinout) 在逻辑布局上变为显式物理约束。 slice&#xff08; 分片 &#xff09; 逻辑在大部分器件中都是一致的。但如下专用资源表示的是隐式物理约束 &#xff0c; 因为这些资源仅在某些位置…...

编程日记 2023/12/5 7:20:12

7nm项目之顶层规划——01数据导入

1.创建workspace 创建workspace后&#xff0c;在其目录下产生。 CORTEXA53.json文件是将有默认配置的文件master.json、有library的.config.json文件、tunes下CORTEXA53.tunes.json文件合并 注&#xff1a;tunes下的CORTEXA53.tunes.json文件可以覆盖一些master.json的设置…...

编程日记 2023/12/5 7:19:12

一键式紧急报警柱系统

随着科技的不断发展&#xff0c;一键式紧急报警柱在我们的生活和工作中扮演着越来越重要的角色。在这篇文章中&#xff0c;我们将一起探究与一键式紧急报警柱有关的知识。 一键式紧急报警柱是一种常见的安全防护设备&#xff0c;能够在紧急情况下快速发出警报&#xff0c;保护…...

编程日记 2023/12/5 7:18:10

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

编程日记 2023/12/5 7:15:08

【模电】直流通路与交流通路

直流通路与交流通路 通常&#xff0c;在放大电路中&#xff0c;直流电源的作用和交流信号的作用总是共存的&#xff0c;即静态电流、电压和动态电流、电压总是共存的。但是由于电容、电感等电抗元件的存在&#xff0c;直流量所流经的通路与交流信号所流经的通路不完全相同。因此…...

编程日记 2023/12/5 7:14:07

SpringBoot JprotoBuf序列化与反序列化的实现

文章目录 前言一、protobuf与JprotoBufprotobuf介绍JprotoBuf介绍protobuf与JprotoBuf的区别二、JprotoBuf特点三、类型转换对照表四、ProtobufClass编写五、序列化与反序列化测试六、使用JprotoBuf时的注意事项七、JprotoBuf与protobuf序列化反序列化结果比较前言 在软件开发…...

编程日记 2023/12/5 7:13:06

互联网Java工程师面试题·Spring Boot篇·第一弹

目录 1、什么是 Spring Boot&#xff1f; 2、Spring Boot 有哪些优点&#xff1f; 3、什么是 JavaConfig&#xff1f; 4、如何重新加载 Spring Boot 上的更改&#xff0c;而无需重新启动服务器&#xff1f; 5、Spring Boot 中的监视器是什么&#xff1f; 6、如何在 Sprin…...

编程日记 2023/12/5 7:10:04

HostHunter虚拟主机发现

HostHunter虚拟主机发现 1.HostHunter2.安装3.参数解释4.实例1.HostHunter HostHunter 一种工具，用于有效发现和提取提供大量目标 IPv4 或 IPv6 地址的主机名。HostHunter 利用简单的 OSINT 和主动协调技术将 IP 目标与虚拟主机名进行映射。这对于发现组织的真正攻击面特别有…...

编程日记 2023/12/5 7:09:03

鸿蒙开发：UIAbility组件间交互探索实战【鸿蒙专栏-22】

UIAbility组件间交互（设备内） 在设备内，UIAbility（用户界面能力）是系统调度的最小单元，它们负责展示用户界面和执行相关的业务逻辑。设备内的不同功能模块之间的交互是应用程序开发中的重要部分。本文将探讨设备内UIAbility之间的交互方式，包括启动应用内的UIAbility、…...

编程日记 2023/12/5 7:08:02

VSCode Vue 开发环境配置

Vue是前端开发中的重要工具与框架&#xff0c;可以保住开发者高效构建用户界面。 Vue2官方文档&#xff1a;https://v2.cn.vuejs.org/ Vue3官方文档&#xff1a;https://cn.vuejs.org/ Vue的安装和引用 Vue2的官方安装指南&#xff1a;https://v2.cn.vuejs.org/v2/guide/ins…...

编程日记 2023/12/5 7:07:01

clickhouse从mysql同步数据到clickhouse的几种方式

背景 我们的业务数据一般来说都是放在Mysql中的&#xff0c;而我们要分析的数据一般都存放在clickhouse中&#xff0c;所以如何把数据从mysql同步到ck&#xff0c;就变成了一个必须的步骤&#xff0c;本文简单记录下几种同步的方式 mysql数据同步到clickhouse 方式一&#x…...

编程日记 2023/12/5 7:02:57

“滑动窗口”算法实例

1 问题 给定一个字符串“S”&#xff0c;找出其中不含有重复字符的最长子串的长度。例如&#xff1a;S‘ABCABCBB’&#xff0c;则不含重复字符的最长字串长度为3.。S‘ABCDFG’,则不含重复字符的最长字串长度为6。要求设计一个Python程序实现该功能&#xff1f; 2 方法 按照一…...

编程日记 2023/12/5 7:00:56

分布式搜索引擎elasticsearch(一）

5.1 初始elasticsearch elasticsearch是一款非常强大的开源搜索引擎，可以帮助我们从海量数据中快速找到需要的内容。 elasticsearch是elastic stack的核心，负责存储、搜索、分析数据。 5.1.1正向索引 5.1.2elasticsearch采用倒排索引： 文档（document）：每条数据就是一个…...

编程日记 2023/12/5 6:59:55

PTA 7-236 验证哥德巴赫猜想

哥德巴赫猜想之一是指一个偶数&#xff08;2除外&#xff09;可以拆分为两个素数之和。请验证这个猜想。 因为同一个偶数可能可以拆分为不同的素数对之和&#xff0c;这里要求结果素数对彼此最接近。 输入格式: 首先输入一个正整数T&#xff0c;表示测试数据的组数&#xff0…...

编程日记 2023/12/5 6:54:50

微信小程序 纯css画仪表盘

刚看到设计稿的时候第一时间想到的就是用canvas来做这个仪表盘&#xff0c;虽然本人的画布用的不是很好但还可以写一写&#x1f600;。话不多说直接上代码。最后有纯css方法 <!--wxml--> <canvas canvas-id"circle" class"circle" >// js dat…...

编程日记 2023/12/5 6:52:49

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/12/17 1:58:19

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/12/13 22:32:24

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/12/16 13:15:29

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/12/8 9:12:36

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/12/16 4:58:10

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/14 16:14:14

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/12/14 17:33:29

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/12/15 23:59:07

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/12/15 5:18:44