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

HTML CSS JavaScript的网页设计

news 2025/9/14 18:27:08

一、网页界面效果：

二、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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/9/13 20:53:16

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/8/13 18:32:28

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/7/30 14:13:39

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/8/25 23:10:09

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/9/9 10:10:19

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/7/26 12:16:34

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/8/28 18:38:08

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/9/4 22:48:54

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

编程新知 2025/8/21 16:28:18

mac：大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

编程新知 2025/9/2 16:53:10