成都工业学院Web技术基础（WEB）实验四：CSS3布局应用

写在前面

1、基于2022级计算机大类实验指导书

2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样

3、图片和文字仅为示例，需要自行替换

4、如果代码不满足你的要求，请寻求其他的途径

运行环境

window11家庭版

WebStorm 2023.2.2

实验要求、源代码和运行结果

1、使用HBuilder编写代码，实现图4-1所示布局效果，要求：

① 采用绝对定位、相对定位、浮动定位等方式完成页面布局。

图4-1实验内容效果示意图 

（1）新建html文档、CSS文件。

（2）采用定位属性完成图4-1式布局效果。

（3）每个图层颜色logo、nav等，由学生自拟。

（4）整个宽度为1000px；高度header:124px;logo:80px;nav:40px，第3个区域4个图层的宽度为250px、高度为400px；高度footer:40px。

Experiment4_1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Experiment4_1.css">
    <title></title>
</head>
<body>
<div class="wrapper">
    <div class="header">Header</div>
    <div class="logo">Logo</div>
    <div class="nav">Nav</div>
    <div class="content">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
        <div class="box4">Box 4</div>
    </div>
    <div class="footer">Footer</div>
</div>
</body>
</html>

Experiment4_4.css

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.wrapper {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

.header, .logo, .nav, .content, .footer {
    border: 1px solid #ccc;
}

.header {
    height: 124px;
    background-color: #f0f0f0;
    position: relative;
}

.logo {
    height: 80px;
    background-color: #3498db;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.nav {
    height: 40px;
    background-color: #2ecc71;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
}

.content {
    position: relative;
}

.box1, .box2, .box3, .box4 {
    width: 25%;
    height: 400px;
    float: left;
}

.box1 {
    background-color: #e74c3c;
}

.box2 {
    background-color: #f39c12;
}

.box3 {
    background-color: #2c3e50;
}

.box4 {
    background-color: #95a5a6;
}

.footer {
    height: 40px;
    background-color: #34495e;
    clear: both;
}

2、CSS综合应用：编写代码，实现图4-2所示的页面效果，要求：

① 结构和样式相分离（html和CSS相分离）。

② 页面从上到下四个区域，在上面区域为图片展示区，整体居中显示（素材由实验老师提供）。

  图4-2 CSS综合实例页面效果示意图

（1）新建html文档、CSS文件。采用<link>标签将CSS文件导入html文档。

（2）页面body从上到下依次为<header>、<nav>、<main>、<footer>，以下为已知属性：

 body {

    background: #EDF6F7;

    font-family: "微软雅黑", "Times New Roman", serif;

    color: #666;

    font-size: 14px;

    line-height: 18px;}

.flex {//<header>、<nav>、<main>、<footer>都会引用

    width: 100%;

    width: 960px;

    margin: 0 auto;

}

（3）<header>部分,在<h1>标签中插入图片。

（4）<nav>部分background: #384E80;导航栏使用ul实现height: 50px，display:flex，font-size: 16px;

（5）<main>部分采取左中右布局：<artice>、<aside>、<aside>。

        1、<main>: background: #FFF; padding-bottom:10px;

        2、<artice>:<h2>标签插入“地球日”，外下边距和内下边距为10px,

点状横线：border-bottom: 2px dotted #ddd;

                  <section>标签内插入图片和文字，图片高度height: 188px；

<p>标签插入文字：text-indent: 2em;

3、<aside>:padding:10px;<h3>插入标题color:#5F822F;font-size:18px;

使用无序列表和<a>实现各列表项，<li>宽度为180px高度为18px。

（6）<footer>部分：background: #384E80; height:40px; padding-top:20px;

<p>©2018，我们的地球日</p>。

Experiment4_2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Experiment4_2.css">
    <title></title>
</head>
<body>
<header>
    <h1 style="width: 100%"><img src="../4.jpg" style="width: 100%;height:136px"></h1>
</header>
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">目录</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>
<main>
    <div class="flex">
        <article>
            <h2>地球日</h2>
            <div>
                <img src="../1.jpg" style="width:100%;height:250px">
            </div>
        </article>
        <article>
            <div>
                <section>
                    <p style="text-indent: 2em;">地球日介绍</p>
                </section>
            </div>
        </article>
        <aside>
            <div>
                <h3>目录</h3>
                <ul>
                    <li><a href="#">活动影响</a></li>
                    <li><a href="#">创始人</a></li>
                    <li><a href="#">历年主题</a></li>
                    <li><a href="#">历年国内活动</a></li>
                </ul>
            </div>
        </aside>

        <aside>
            <div>
                <h3>做什么</h3>
                <ul>
                    <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>
        </aside>
    </div>
</main>
<footer>
    <p>©2018，我们的地球日</p>
</footer>
</body>
</html>

Experiment4_2.css

body {
    background: #EDF6F7;
    font-family: "微软雅黑", "Times New Roman", serif;
    color: #666;
    font-size: 14px;
    line-height: 18px;
}

.flex {
    width: 100%;
    margin: 0 auto;
    display: flex;
}

nav {
    background: #384E80;
    flex-basis: 20%;
}

nav ul {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 16px;
    list-style: none;
    padding: 0;
}

nav ul li a {
    margin-right: 20px;
    color: white;
}

article {
    flex-basis: 30%;
}

aside {
    flex-basis: 20%;
}

aside h3 {
    color: #5F822F;
    font-size: 18px;
}

aside ul li {
    width: 180px;
    height: 18px;
}

main {
    background: #FFF;
    padding-bottom: 10px;
    display: flex;
}

footer {
    background: #384E80;
    height: 40px;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer p {
    color: white;
    margin: 0;
}

a {
    text-decoration: none;
}

.article, .aside {
    box-sizing: border-box;
}

article, aside {
    margin: 0;
    padding: 0;
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

perl使用Archive::Tar模块进行文件打包

perl使用Archive::Tar模块进行文件打包

使用perl的Archive::Tar 模块打包文件夹中的指定文件&#xff0c;输出格式 .tar.gz 。下面是perl代码&#xff1a; #! /usr/bin/perl use v5.14; use File::Find; use Archive::Tar;my filesArry (); my $callback sub {push filesArry, $File::Find::name if -f; };find($c…
阅读更多...
【Hive】启动beeline连接hive报错解决

【Hive】启动beeline连接hive报错解决

1、解决报错2、在datagrip上连接hive 1、解决报错 刚开始一直报错&#xff1a;启动不起来 hive-site.xml需要配置hiveserver2相关的 在hive-site.xml文件中添加如下配置信息 <!-- 指定hiveserver2连接的host --> <property><name>hive.server2.thrift.bin…
阅读更多...
如何打印富文本控件中的内容？

如何打印富文本控件中的内容？

出于某种原因&#xff0c;人们确实对打印富文本控件中的内容感到困惑。 我并非打印方面的专家&#xff0c;但是经过对资料的研究的&#xff0c;我也算弄明白了&#xff0c;今天在此记录一下。 解决问题的关键是这个消息&#xff1a;EM_FORMATRANGE。 每次发送这个消息的时候&a…
阅读更多...
Vue 3项目的目录结构

Vue 3项目的目录结构

使用vite创建完VUE项目后&#xff0c;使用VS Code编辑器打开项目目录&#xff0c;可以看到一个默认生成的项目目录结构 下图是目录结构&#xff1a; 详细介绍.vscode&#xff1a;存放VS Code编辑器的相关配置。 node_modules&#xff1a;存放项目的各种依赖和安装的插件。…
阅读更多...
C# WPF上位机开发（通讯协议的编写）

C# WPF上位机开发（通讯协议的编写）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 作为上位机&#xff0c;它很重要的一个部分就是需要和外面的设备进行数据沟通的。很多时候&#xff0c;也就是在这个沟通的过程当中&#xff0c;上…
阅读更多...
极狐GitLab 与 Flux 集成实现 GitOps

极狐GitLab 与 Flux 集成实现 GitOps

目录 flux 和 GitOps 极狐GitLab 与 flux 的集成 flux 命令行安装 极狐GitLab flux GitOps GitOps Demo 写在最后 flux 和 GitOps 众所周知&#xff0c;weaveworks 公司在 2017 年提出了 GitOps 这个概念&#xff0c;而 flux 是 weaveworks 开源的一款对 Kubernetes 上的…
阅读更多...
【总结】机器学习中的15种分类算法

【总结】机器学习中的15种分类算法

目录 一、机器学习中的分类算法 1.1 基础分类算法 1.2 集成分类算法 1.3 其它分类算法&#xff1a; 二、各种机器学习分类算法的优缺点 分类算法也称为模式识别&#xff0c;是一种机器学习算法&#xff0c;其主要目的是从数据中发现规律并将数据分成不同的类别。分类算法通…
阅读更多...
golang学习笔记——go流水线示例

golang学习笔记——go流水线示例

range与数组、切片、集合 Go 语言中 range 关键字用于 for 循环中迭代数组(array)、切片(slice)、通道(channel)或集合(map)的元素。在数组和切片中它返回元素的索引和索引对应的值&#xff0c;在集合中返回 key-value 对。 for 循环的 range 格式可以对 slice、map、数组、字…
阅读更多...
计算机网络课程设计【Python实现】

计算机网络课程设计【Python实现】

一、网络聊天程序的设计与实现 1、实验目的 使用Socket编程&#xff0c;了解Socket通信的原理&#xff0c;会使用Socket进行简单的网络编程&#xff0c;并在此基础上编写聊天程序&#xff0c;运行服务器端和客户端&#xff0c;实现多个客户端通过服务器端进行通信。 2、总体设…
阅读更多...
MongoDB 的复制（副本集）

MongoDB 的复制（副本集）

本文主要介绍MongoDB的复制&#xff08;副本集&#xff09;。 目录 MongoDB的复制&#xff08;副本集&#xff09;特点搭建步骤注意事项 MongoDB的复制&#xff08;副本集&#xff09; MongoDB复制是一种提供数据冗余和高可用性的方法。复制是通过在多个节点上维护数据的副本来…
阅读更多...
机器学习与人工智能：一场革命性的变革

机器学习与人工智能：一场革命性的变革

机器学习与人工智能&#xff1a;一场革命性的变革 人工智能的概述什么是机器学习定义解释 数据集结构机器学习应用场景 人工智能的概述 1956年8月&#xff0c;在美国汉诺斯小镇宁静的达特茅斯学院中&#xff0c;约翰麦卡锡&#xff08;John McCarthy&#xff09;、马文闵斯基&…
阅读更多...
科学小论文

科学小论文

赵州桥&#xff0c;是一座右拱桥&#xff0c;它座落于河北省石家庄市赵县城南液河之上。 赵州桥因赵县古称赵州而得名&#xff0c;当地人称之为大石桥&#xff0c;以区别于城西门外的永通桥&#xff0c;也称小石桥。 赵州桥始建于隋代&#xff0c;由匠师李春设计建造&#xff…
阅读更多...
第一百九十九回 如何获取设备信息

第一百九十九回 如何获取设备信息

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 我们在上一章回中介绍了包管理相关的内容&#xff0c;本章回中将介绍如何使用url_launcher包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在这里介绍url_launcher包主要用来打开…
阅读更多...
万户 ezOFFICE 文件上传漏洞复现

万户 ezOFFICE 文件上传漏洞复现

0x01 产品简介 万户OA ezoffice是万户网络协同办公产品多年来一直将主要精力致力于中高端市场的一款OA协同办公软件产品，统一的基础管理平台，实现用户数据统一管理、权限统一分配、身份统一认证。统一规划门户网站群和协同办公平台，将外网信息维护、客户服务、互动交流和日…
阅读更多...
HarmonyOS鸿蒙应用开发——HTTP网络访问与封装

HarmonyOS鸿蒙应用开发——HTTP网络访问与封装

文章目录 基本使用封装参考 基本使用 鸿蒙应用发起HTTP请求的基本使用&#xff0c;如下&#xff1a; 导入http模块创建httpRequest对象发起http请求&#xff0c;并处理响应结果 第一、导入http模块&#xff1a; import http from ohos.net.http第二、创建httpRequest对象&a…
阅读更多...
SLAM教程：ROS学习

SLAM教程：ROS学习

玩SLAM一定会遇到ROS，你可以看看稚晖君里的机器人操作系统，许多控制机器的软件代码很大程度都是基于ROS，多传感融合也是基于ROS，在GitHub上几乎大部分的多传感融合以及机器人操作代码框架都是基于ROS。ROS 的主要目标是为机器人研究和开发提供代码复用的支持。ROS是一个分布…
阅读更多...
三翼鸟2023：需求中破局，进化中蝶变

三翼鸟2023：需求中破局，进化中蝶变

当打造高质量生活的全民愿景以试卷的形式&#xff0c;打开在眼前&#xff0c;该如何作答&#xff1f;相信这是每个与“家”这个词息息相关的企业&#xff0c;最难给出肯定回答的难题。 科技、硬件擅长的企业&#xff0c;往往会选择以高科技为笔&#xff0c;画一幅智能家居生活…
阅读更多...
【Matlab算法】多维函数求解的基本概念

【Matlab算法】多维函数求解的基本概念

多维函数求解的基本概念 多维函数最优化问题最优化算法最优化问题的类型最优化算法的分类常用的多维函数求解方法结语 多维函数 多维函数是指定义在 R n \mathbb{R}^n Rn 上的函数&#xff0c;其中 n n n 是函数的维数。例如&#xff0c; f ( x , y ) x 2 y 2 f(x, y) x^…
阅读更多...
2017下半年软工(桥接模式)

2017下半年软工(桥接模式)

题目——桥接模式&#xff08;抽象调用实现部分&#xff09; package org.example.桥接模式;/*** 桥接模式的核心思想是将抽象部分与它的实现部分分离&#xff0c;使它们可以独立变化&#xff0c;就是说你在实现部分&#xff1a;WinImp、LinuxImp基础上还能加上RedHatImp&#…
阅读更多...
Javaweb之附录的详细解析

Javaweb之附录的详细解析

05. 附录 5.1 更新依赖索引 有时候给idea配置完maven仓库信息后&#xff0c;在idea中依然搜索不到仓库中的jar包。这是因为仓库中的jar包索引尚未更新到idea中。这个时候我们就需要更新idea中maven的索引了&#xff0c;具体做法如下&#xff1a; 打开设置----搜索maven----R…
阅读更多...
最新文章

Copyright @ 2022~2023