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.rhkb.cn/news/471693.html

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

相关文章

MySQL查询某个数据库中特定表的空间占用大小

如果您也想要查询某个数据库中特定表的空间占用大小&#xff0c;包括数据和索引的大小&#xff0c;那么您可以使用以下SQL查询。这个查询将显示特定表在数据库中的数据大小、索引大小以及总大小。 SELECT table_name AS Table,ROUND(((data_length index_length) / 1024 / 10…

Towards Reasoning in Large Language Models: A Survey

文章目录 题目摘要引言什么是推理?走向大型语言模型中的推理测量大型语言模型中的推理发现与启示反思、讨论和未来方向 为什么要推理?结论题目 大型语言模型中的推理:一项调查 论文地址:https://arxiv.org/abs/2212.10403 项目地址: https://github.com/jeffhj/LM-reason…

进入未来城:第五周游戏指南

欢迎来到 Alpha 第 4 季第五周&#xff01; 走进霓虹闪烁的未来城街道&#xff0c;这是一座科技至上的赛博朋克大都市。鳞次栉比的摩天大楼熠熠生辉&#xff0c;拥挤的街道下则是阴森恐怖的地下世界。在这里&#xff0c;像激光鹰队长这样的超级战士正在巡逻&#xff0c;而 Ago…

斯坦福泡茶机器人DexCap源码解析:涵盖收集数据、处理数据、模型训练三大阶段

前言 因为我司「七月在线」关于dexcap的复现/优化接近尾声了(每月逐步提高复现的效果)&#xff0c;故准备把dexcap的源码也分析下&#xff0c;11月​下旬则分析下iDP3的源码——为队伍「iDP3人形的复现/优化」助力 最开始&#xff0c;dexcap的源码分析属于此文《DexCap——斯…

Python中的HTML

文章目录 一. HTML1. html的定义2. html的作用3. 基本结构4. 常用的html标签5. 列表标签① 无序列表② 有序列表 6. 表格标签7. 表单标签8. 表单提交① 表单属性设置② 表单元素属性设置 一. HTML 1. html的定义 HTML 的全称为&#xff1a;HyperText Mark-up Language, 指的是…

PdServer:调用MidjourneyAPI完成静夜思图文生成

欢迎沟通讨论&#xff0c;WX: cdszsz。公号&#xff1a;AIGC中文站。 今天我们将使用PdServer&#xff0c;通过Qwen大模型完成古诗的解析与prompt的生成&#xff0c;然后调用MidjourneyAPI完成图片的生成。有了文案和图片&#xff0c;我们就可以将其生成为一个古诗讲读视频。从…

论文 | The Capacity for Moral Self-Correction in LargeLanguage Models

概述 论文探讨了大规模语言模型是否具备“道德自我校正”的能力&#xff0c;即在收到相应指令时避免产生有害或偏见输出的能力。研究发现&#xff0c;当模型参数达到一定规模&#xff08;至少22B参数&#xff09;并经过人类反馈强化学习&#xff08;RLHF&#xff09;训练后&…

认证鉴权框架SpringSecurity-1--概念和原理篇

1、基本概念 Spring Security 是一个强大且高度可定制的框架&#xff0c;用于构建安全的 Java 应用程序。它是 Spring 生态系统的一部分&#xff0c;提供了全面的安全解决方案&#xff0c;包括认证、授权、CSRF防护、会话管理等功能。 2、认证、授权和鉴权 &#xff08;1&am…

删库跑路,启动!

起因&#xff1a;这是一个悲伤的故事&#xff0c;在抓logcat时 device待机自动回根目录了&#xff0c;而题主对当前路径的印象还停留在文件夹下&#xff0c;不小心在根目录执行了rm -rf * … 所以&#xff0c;这是个悲伤的故事&#xff0c;东西全没了…device也黑屏了&#xff…

unity单例模式的不同声明(待完善

总结&#xff1a; 这段代码实现了一个泛型单例模式&#xff08;Singleton Pattern&#xff09;&#xff0c;用于确保某个类&#xff08;由泛型参数 T 指定&#xff09;在整个应用程序中只有一个实例&#xff0c;并且在第一次访问时才创建该实例。该模式保证了该实例的全局唯一…

低代码牵手 AI 接口:开启智能化开发新征程

一、低代码与 AI 接口的结合趋势 低代码开发平台近年来在软件开发领域迅速崛起。随着企业数字化转型的需求不断增长&#xff0c;低代码开发平台以其快速构建应用程序的优势&#xff0c;满足了企业对高效开发的需求。例如&#xff0c;启效云低代码平台通过范式化和高颗粒度的可配…

3. Sharding-Jdbc核⼼流 程+多种分⽚策略

1. Sharding-Jdbc 分库分表执⾏核⼼流程 Sharding-JDBC执行流程 1. SQL解析 -> SQL优化 -> SQL路由 -> SQL改写 -> SQL执⾏-> 结果归并 ->返回结果简写为&#xff1a;解析->路由->改写->执⾏->结果归并1.1 SQL解析 1. SQL解析过程分为词法解析…

解读Nature:Larger and more instructable language models become less reliable

目录 Larger and more instructable language models become less reliable 核心描述 核心原理 创新点 举例说明 大模型训练,微调建议 Larger and more instructable language models become less reliable 这篇论文的核心在于对大型语言模型(LLMs)的可靠性进行了深入…

A3超级计算机虚拟机,为大型语言模型LLM和AIGC提供强大算力支持

热门大语言模型项目地址&#xff1a;www.suanjiayun.com/mirrorDetails?id66ac7d478099315577961758 近几个月来&#xff0c;我们目睹了大型语言模型&#xff08;LLMs&#xff09;和生成式人工智能强势闯入我们的视野&#xff0c;显然&#xff0c;这些模型在训练和运行时需要…

跟着尚硅谷学vue2—基础篇4.0

11. 收集表单数据 收集表单数据&#xff1a; 若&#xff1a;<input type"text"/>&#xff0c;则v-model收集的是value值&#xff0c;用户输入的就是value值。 若&#xff1a;<input type"radio"/>&#xff0c;则v-model收集的是value值&…

「人眼视觉不再是视频消费的唯一形式」丨智能编解码和 AI 视频生成专场回顾@RTE2024

你是否想过&#xff0c;未来你看到的电影预告片、广告&#xff0c;甚至新闻报道&#xff0c;都可能完全由 AI 生成&#xff1f; 在人工智能迅猛发展的今天&#xff0c;视频技术正经历着一场前所未有的变革。从智能编解码到虚拟数字人&#xff0c;再到 AI 驱动的视频生成&#…

【LeetCode】每日一题 2024_11_14 统计好节点的数目(图/树的 DFS)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 题目&#xff1a;统计好节点的数目 代码与解题思路 先读题&#xff1a;题目要求我们找出好节点的数量&#xff0c;什么是好节点&#xff1f;“好节点的所有子节点的数量都是相同的”&#xff0c;拿示例一…

js中typeOf无法区分数组对象

[TOC]&#xff08;js中typeOf无法区分数组对象) 前提&#xff1a;很多时候我们在JS中用typeOf来判断值类型&#xff0c;如&#xff1a;typeOf ‘abc’//string ,typeOf 123 //number; 但当判断对象为数组时返回的仍是’object’ 这时候我们可以使用Object.prototype.toString.c…

ISUP协议视频平台EasyCVR视频设备轨迹回放平台智慧农业视频远程监控管理方案

在当今快速发展的农业领域&#xff0c;智慧农业已成为推动农业现代化、助力乡村全面振兴的新手段和新动能。随着信息技术的持续进步和城市化进程的加快&#xff0c;智慧农业对于监控安全和智能管理的需求日益增长。 视频设备轨迹回放平台EasyCVR作为智慧农业视频远程监控管理方…

android studio 更改gradle版本方法(备忘)

如果出现类似以下&#xff1a; Your build is currently configured to use Java 17.0.11 and Gradle 6.1.1. 或者类似&#xff1a; Failed to calculate the value of task ‘:app:compileDebugJavaWithJavac‘ property ‘options.generatedSo 消息时需要修改gradle版本&…