CSS的综合应用例子(网页制作)

这是html的一些最基本内容的代码:

<!DOCTYPE html>  

<html lang="zh">  

<head>  

    <meta charset="UTF-8">  

    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    <title>网页布局综合练习</title>  

</head>  

<body>  

    <header>  

        <section class="container1">          

        </section>

    </header>  

    <nav>  

      <ul class="clear_ele">  

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

    </nav>

    <main>  

        <section class="container2 clear_ele">  

            <aside id="aside-left">  

                剧情新闻

            </aside>

            <aside id="aside-right">  

                友情链接

            </aside>

            <article>文章  

                <ul class="clear_ele">  

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                </ul>

            </article>

        </section>  

        <section class="container3">  

            <h4>更多花絮</h4>  

            <form>  

                是否:

                <input type="text" id="name" name="name"><br>  

                建议:

                <input type="email" id="email" name="email"><br>  

                <input type="submit" value="提交">  

            </form>  

        </section>

    </main>  

    <footer>  

        <p>版权所有 &copy; 作者</p>  

    </footer>  

</body>  

</html>

运行截图:

 

下面我们将给CSS添加样式,使其成为一个网页,如下图:

 

下面是整个网页的代码:

(注:<!--  -->里的内容为注释,同样颜色是html的css样式)

<!DOCTYPE html>  

<html lang="zh">  

<head>  

    <meta charset="UTF-8">  

    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    <title>网页布局综合练习</title>

    <style>

        nav{

            background-color: rgb(73, 129, 219);

        }

        nav ul li{

            list-style: none;

            float: left;

            margin-left: 50px;

            font-size: 20px;

        }

        ul{

            margin: 0;

            padding: 0;

        }

<!-- 这是导航栏的一些参数代码,可根据自己喜好设计想要的参数 -->

        main .container3{

            border: 2px rgb(255, 136, 156) solid;

            background-color: pink;

            width: 360px;

            height: 225px;

            position: fixed;

            bottom: 300px;

            right: 50px;

        }

<!--这是右下角的粉色框框,这里设计了固定定位,就算上下来回拖动,它的位置也不会改变,同样可根据自己喜好设计想要的框的大小 (width: 360px; height: 225px;)和自己喜欢的背景颜色(background-color: pink;)-->

        article ul li{

            list-style: none;

            width: 20%;

            height: 300px;

            background-image: url(./微信图片_20241109175518.jpg);

<!--图片可随意更改,是中间那个很多张图片的地方  -->

            background-size: 100% 100%;

            border: 2px rgb(125, 218, 137) solid;

            margin-right: 4%;

            margin-bottom: 5%;

            float: left;

        }

        article ul{

            margin: 100px;

        }

<!-- 一些高度,图片间的间距(margin-right: 4%;margin-bottom: 5%;)都可根据自己喜好更改 -->

        <!-- 使用伪元素选择器解决高度塌陷问题 -->

        nav::after{

            content: "";

            display: block;

            clear: both;

        }

        #aside-left{

            width: 20%;

            height: 1000px;

            background-color: rgb(107, 160, 239);

            float: left;

        }

<!--这是三列布局左边一列的参数设置 -->

        #aside-right{

            width: 20%;

            height: 1000px;

            background-color: rgb(107, 160, 239);

            float: right;

        }

<!--这是三列布局右边一列的参数设置 -->

         #div1{

            height: 500px;

            width: 100%;

            float: left;

             background-image: url(./微信图片_20241109181233.jpg);

            background-repeat: no-repeat;

            background-size: 10% 10%;

        }

<!--这是最上面的那张图片,高度和图片都可根据自己喜好进行更改 -->

        footer{

            background-color:rgb(73, 129, 219);

            text-align: center;

        }

        footer p{

            margin: 0px;

        }      

<!--这是最下面的版权归属的地方,可根据自己喜好决定字体放在那个位置(text-align: center;) -->

article{

            width: 60%;

            height: 1000px;

            background-color: rgb(14, 71, 146);

            margin-left: 20%;

            margin-right: 20%;

        }

 .clear_ele li a:link{

            color: white;

            text-decoration: none;

        }

        .clear_ele li a:visited{

            color: white;

            text-decoration: none;

        }

        .clear_ele li a:hover{

            background-color: rgb(73, 129, 219);

        }

<!--这是三列布局中间一列的参数设置 -->

    </style>

</head>  

<body>  

    <header>  

        <section class="container1">    

            <div id="div1">    

                <img src="./微信图片_20241109181233.jpg" width="100%" height="500px">

                </div>

<!--尽可能设置高度和宽度,避免出现图片和盒子不一致问题,可添加多张照片,同上面格式一样,再设置CSS的样式就可以 -->         

        </section>

    </header>    

    <nav>  

      <ul class="clear_ele">

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

    </nav>

    <main>  

        <section class="container2 clear_ele">  

            <aside id="aside-left">  

                剧情新闻

            </aside>

            <aside id="aside-right">  

                友情链接

            </aside>

            <article>文章  

                <ul class="clear_ele">  

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                </ul>

            </article>

        </section>  

        <section class="container3">  

            <h4>更多花絮</h4>  

            <form>  

                是否:

                <input type="text" id="name" name="name"><br>  

                建议:

                <input type="email" id="email" name="email"><br>  

                <input type="submit" value="提交">  

            </form>  

        </section>

    </main>  

    <footer>  

        <p>版权所有 &copy; 作者</p>  

    </footer>  

</body>  

</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式】行为型模式(二):策略模式、命令模式

行为型模式&#xff08;二&#xff09;&#xff1a;策略模式、命令模式 3.策略模式&#xff08;Strategy&#xff09;3.1 示例3.1.1 定义策略接口3.1.2 实现具体策略3.1.3 定义上下文类3.1.4 客户端代码3.1.5 输出结果 3.2 总结3.2.1 优点3.2.2 缺点 4.命令模式&#xff08;Com…

rocketmq——docker-compose安装

rocketmq安装 创建文件夹&#xff0c;这里我们分别部署namesrv和broker 1、namesrv.conf listenPort98762、broker.conf # 所属集群名字 brokerClusterNameDefaultCluster # broker 名字&#xff0c;注意此处不同的配置文件填写的不一样&#xff0c;如果在 broker-a.propert…

OpenGL ES 文字渲染方式有几种?

在音视频或 OpenGL 开发中,文字渲染是一个高频使用的功能,比如制作一些酷炫的字幕、为视频添加水印、设置特殊字体等等。 实际上 OpenGL 并没有定义渲染文字的方式,所以我们最能想到的办法是:将带有文字的图像上传到纹理,然后进行纹理贴图。 本文分别介绍下在应用层和 C+…

飞牛云fnOS本地部署WordPress个人网站并一键发布公网远程访问

文章目录 前言1. Docker下载源设置2. Docker下载WordPress3. Docker部署Mysql数据库4. WordPress 参数设置5. 飞牛云安装Cpolar工具6. 固定Cpolar公网地址7. 修改WordPress配置文件8. 公网域名访问WordPress 前言 本文旨在详细介绍如何在飞牛云NAS上利用Docker部署WordPress&a…

字符串处理指南:Air780E软件的全新视角

今天我会把 Air780E软件的字符串处理详细解析&#xff0c;指南如下&#xff1a; 1、Lua字符串介绍 关于字符串&#xff0c;Lua提供了一些灵活且强大的功能&#xff0c;一些入门知识如下&#xff1a; 1.1 字符串定义 在Lua中&#xff0c;字符串可以用单引号或双引号"来定…

Oracle 聚集因子factor clustering

文章目录 聚集因子(Factor clustering)举例说明查询聚集因子聚集因子的优化结论 最近发现突然忘记聚集因子的原理了&#xff0c;故整理记录一下 聚集因子(Factor clustering) 在Oracle中&#xff0c;聚集因子&#xff08;Clustering Factor&#xff09;用于衡量数据在表中存储…

酒店行业数据仓库

重要名词&#xff1a; PMS&#xff1a;酒店管理系统CRS&#xff1a;中央预定系统客户&#xff1a;可以分为会员、散客&#xff08;自行到店入住&#xff09;、协议&#xff08;与酒店长期合作&#xff0c;内部价&#xff09;、中介预定&#xff1a;可以分为线上预定、线下预定…

C/C++语言 多项式加法和乘法

多项式加法和乘法 多项式的加法题目描述输入输出样例步骤代码段全局变量设定新建结点合并链表 完整代码 多项式乘法题目描述输入输出样例代码段计算两多项式结果输入 完整代码 多项式的加法 题目描述 输入输出 样例 步骤 总体思想是用链表来做 ① 我们发现输入样例中&#xf…

手动实现promise的all,race,finally方法

Promise.all 是一个非常有用的工具&#xff0c;它接受一个 Promise 对象数组&#xff0c;并返回一个新的 Promise。当所有输入的 Promise 都成功解决时&#xff0c;新的 Promise 会解决为一个包含所有结果的数组&#xff1b;如果任何一个 Promise 被拒绝&#xff0c;新的 Prom…

第十四章 Spring之假如让你来写AOP——雏形篇

Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…

搜维尔科技:Haption力触觉交互,虚拟机械装配验证

Haption力触觉交互&#xff0c;虚拟机械装配验证 搜维尔科技&#xff1a;Haption力触觉交互&#xff0c;虚拟机械装配验证

微信小程序——实现二维码扫描功能(含代码)

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

PostgreSQL 页损坏如何修复

PostgreSQL 错误&#xff1a;关系 base/46501/52712 中的块 480 存在无效的页。 当我们在使用 PostgreSQL 数据库的时候&#xff0c;如果服务器发生 CRASH 或者断电等异常情况的时候&#xff0c;有可能会遇到上面的这个报错信息。那么我们如何去修复这个数据呢&#xff0c;以及…

接口类和抽象类在设计模式中的一些应用

C设计模式中&#xff0c;有些模式需要使用接口类&#xff08;Interface Class&#xff09;和抽象类&#xff08;Abstract Class&#xff09;来实现特定的设计目标。以下是一些常见的设计模式及其需要的原因&#xff0c;并附上相应的代码片段。 1. 策略模式&#xff08;Strateg…

速盾:高防 CDN 的缓存机制是什么?

高防 CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;的缓存机制是其保障网络安全和提升性能的关键所在。以下详细介绍高防 CDN 的缓存机制。 一、缓存内容的类型 &#xff08;一&#xff09;静态内容缓存 和普通 CDN 一样&#xff0c;高防 CD…

linux rocky 9.4部署和管理docker harbor私有源

文章目录 Harbor简介安装Harbor技术细节1.安装系统(略),设置主机名和IP2.安装docker3.安装docker-compose4.安装Harbor私有源仓库5 测试登录1.本机登录2.客户端登录Harbor服务器配置docker源1. 下载镜像2.把镜像上传到Harbor私有仓库源3.客户端下载镜像,并且启动容器linux …

【Elasticsearch入门到落地】1、初识Elasticsearch

一、什么是Elasticsearch Elasticsearch&#xff08;简称ES&#xff09;是一款非常强大的开源搜索引擎&#xff0c;可以帮助我们从海量数据中快速找到需要的内容。它使用Java编写&#xff0c;基于Apache Lucene来构建索引和提供搜索功能&#xff0c;是一个分布式、可扩展、近实…

【算法一周目】双指针(2)

目录 有效三角形的个数 解题思路 C代码实现 和为s的两个数字 解题思路 C代码实现 三数之和 解题思路 C代码实现 四数之和 解题思路 C代码实现 有效三角形的个数 题目链接&#xff1a;611. 有效三角形的个数题目描述&#xff1a;给定一个包含非负整数的数组nums&…

单体架构 IM 系统之 Server 节点状态化分析

基于 http 短轮询模式的单体架构的 IM 系统见下图&#xff0c;即客户端通过 http 周期性地轮询访问 server 实现消息的即时通讯&#xff0c;也就是我们前面提到的 “信箱模型”。“信箱模型” 虽然实现非常容易&#xff0c;但是消息的实时性不高。 我们在上一篇文章&#xff08…

《线程池(Thread Pool):高效多线程处理的核心机制》

在当今的软件开发领域&#xff0c;多线程编程已经成为提升程序性能和响应能力的关键技术。而线程池&#xff08;thread pool&#xff09;作为多线程处理中的一个重要概念&#xff0c;正发挥着不可或缺的作用。今天&#xff0c;我们就来深入探讨一下什么是线程池&#xff0c;以及…