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;字符串可以用单引号或双引号"来定…

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

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

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

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

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

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

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…

让AI为你发声!Windows电脑快速部署ChatTTS文本转语音神器

文章目录 前言1. 下载运行ChatTTS模型2. 安装Cpolar工具3. 实现公网访问4. 配置ChatTTS固定公网地址 前言 嘿&#xff0c;朋友们&#xff01;今天我们来聊聊如何在Windows系统上快速搭建ChatTTS&#xff0c;一个超酷的开源文本转语音项目。更棒的是&#xff0c;我们还可以用Cp…

RSTP的配置

RSTP相对于STP在端口角色、端口状态、配置BPDU格式、配置BPDU的处理方式、快速收敛机制、拓扑变更机制和4种保护特性方面的详细改进说明&#xff1a; 端口角色&#xff1a; STP中定义了三种端口角色&#xff1a;根端口&#xff08;Root Port&#xff09;、指定端口&#xff0…

elementui el-table中给表头 el-table-column 加一个鼠标移入提示说明

前言 在使用el-table 表格中有些表格的表头需要加入一些提示&#xff0c;鼠标移入则出现提示&#xff0c;非常实用&#xff0c;我是通过el-table中的el-tooltip实现的&#xff0c;以下的效果预览 代码实现 <el-table ref"multipleTable" :data"data"…

ubuntu18.04 安装与卸载NCCL conda环境安装PaddlePaddle

cuda版本11.2 说明PaddlePaddle需要安装NCCL 1、Log in | NVIDIA Developer 登录官网 找到对应版本 官方提供了多种安装方式&#xff0c;本文使用Local installers (x86)本地安装 点击对应的版本下载如&#xff1a; nccl-local-repo-ubuntu1804-2.8.4-cuda11.2_1.0-1_amd6…

机器学习—决定下一步做什么

现在已经看到了很多不同的学习算法&#xff0c;包括线性回归、逻辑回归甚至深度学习或神经网络。 关于如何构建机器学习系统的一些建议 假设你已经实现了正则化线性回归来预测房价&#xff0c;所以你有通常的学习算法的成本函数平方误差加上这个正则化项&#xff0c;但是如果…

【Rust中的项目管理】

Rust中的项目管理 前言Package&#xff0c;Crate&#xff0c;Module &use &#xff0c;Path通过代码示例解释 Crate&#xff0c;Module &#xff0c;use&#xff0c;Path创建一个package&#xff1a;代码组织化skin.rs 中的代码struct & enum 相对路径和绝对路径引用同…

labview用sql server数据库存取数据到一个单元格

最近有一个项目上需要一个庞大的数据量&#xff0c;需要很多列&#xff0c;但是百度查了一下sqi server最多支持1024列&#xff0c;这一限制适用于大多数表类型&#xff0c;包括常规表&#xff0c;临时表和表变量&#xff0c;要注意的是如果超出这一限制可能会导致数据的完整性…

架构篇(04理解架构的演进)

目录 学习前言 一、架构演进 1. 初始阶段的网站架构 2. 应用服务和数据服务分离 3. 使用缓存改善网站性能 4. 使用应用服务器集群改善网站的并发处理能力 5. 数据库读写分离 6. 使用反向代理和CDN加上网站相应 7. 使用分布式文件系统和分布式数据库系统 8. 使用NoSQL和…