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

news2024/11/16 3:55:32

这是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.coloradmin.cn/o/2241250.html

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

相关文章

SobarQube实现PDF报告导出

文章目录 前言一、插件配置二、使用步骤1.新生成一个Token2.将拷贝的Token加到上文中执行的命令中3.查看报告 三、友情提示总结 前言 这篇博文是承接此文 .Net项目在Windows中使用sonarqube进行代码质量扫描的详细操作配置 描述如何导出PDF报告 众所周知&#xff0c;导出PDF功…

力扣-Mysql-3328-查找每个州的城市 II(中等)

一、题目来源 3328. 查找每个州的城市 II - 力扣&#xff08;LeetCode&#xff09; 二、数据表结构 表&#xff1a;cities ---------------------- | Column Name | Type | ---------------------- | state | varchar | | city | varchar | ----------------…

curl命令提交大json

有个客户需要提交一个4M左右的pdf&#xff0c;接口里传的是pdf字节流base64编码后的字符串。 直接curl -XPOST -d json串 api接口会报 参数过长报错Argument list too long 网上搜了下解决方案把json串放到文本里然后通过json.txt引入参数 这一试不要紧&#xff0c;差点儿导致…

gitlab和jenkins连接

一&#xff1a;jenkins 配置 安装gitlab插件 生成密钥 id_rsa 要上传到jenkins&#xff0c;id_rsa.pub要上传到gitlab cat /root/.ssh/id_rsa 复制查看的内容 可以看到已经成功创建出来了对于gitlab的认证凭据 二&#xff1a;配置gitlab cat /root/.ssh/id_rsa.pub 复制查…

<项目代码>YOLOv8 玉米地杂草识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

Ubuntu+ROS 机械臂拾取和放置

官方链接&#xff1a;https://github.com/skumra/baxter-pnp 1.下载并安装 SDK 依赖项 sudo apt-get install python-wstool python-rosdep 2.创建新的 catkin 工作区 mkdir -p ~/ros_ws/src cd ~/ros_ws/src 3.使用 wstool 下载 rosinstall 文件并将其复制到 Catkin 工作区…

【Linux学习】【Ubuntu入门】1-4 ubuntu终端操作与shell命令1

1.使用快捷键CtrlAltT打开命令终端&#xff0c;或者单击右键点击… 2.常用shell命令 目录信息查看命令&#xff1a;ls ls -a&#xff1a;显示目录所有文件及文件夹&#xff0c;包括隐藏文件&#xff0c;比如以.开头的 ls -l&#xff1a;显示文件的详细信息 ls -al&#xff1…

【含开题报告+文档+PPT+源码】基于springboot的毕业设计选题管理系统

开题报告 毕业设计选题作为高校教学环节中的重要一环&#xff0c;其选题质量和管理效率直接关系到学生毕业设计的质量和毕业要求的达成。然而&#xff0c;传统的选题管理方式往往存在信息不对称、流程繁琐、效率低下等问题&#xff0c;无法满足高校教学管理现代化、信息化的需…

第四十二章 Vue中使用mutations修改Vuex仓库数据

目录 一、mutations修改仓库数据 1.1. 概述 1.2. mutations修改数据基本步骤 1.3. 完整代码 1.3.1. main.js 1.3.2. App.vue 1.3.3. index.js 1.3.4. Son1.vue 1.3.5. Son2.vue 二、mutations传参语法 2.1. mutations传参基本步骤 2.2. 完整代码 2.2.1. index.js …

【MYSQL】锁详解(全局锁、表级锁、行级锁)【快速理解】

目录 一、全局锁 二、表级锁 1.表锁 2.元数据锁 3.意向锁 三、行级锁 1. 行锁 2.间隙锁 3.临建锁 锁是处理并发情况下&#xff0c;对数据的一致性的关键因素&#xff0c;也是并发情况下对效率影响非常大的。 1、全局锁&#xff1a;锁定表中所有数据。 2、表级锁&#xff1a;…

客户案例|智能进化:通过大模型重塑企业智能客服体验

01 概 述 随着人工智能技术的快速发展&#xff0c;客户对服务体验的期待和需求不断升级。在此背景下&#xff0c;大模型技术的崛起&#xff0c;为智能客服领域带来了创造性的变革。 在上篇文章《在后LLM时代&#xff0c;关于新一代智能体的思考》中有提到&#xff0c;智能客服…

【Leetcode 中等】34. 在排序数组中查找元素的第一个和最后一个位置

原题链接 Leetcode 34. 在排序数组中查找元素的第一个和最后一个位置 题目 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必…

直接缓存映射Direct Mapped Cache

这张图展示了**直接映射缓存&#xff08;Direct Mapped Cache&#xff09;**的结构和工作原理&#xff0c;并解释了如何将主存中的块映射到缓存中的特定行&#xff08;组&#xff09;。以下是引用第 0 块和第 8 块时的细节分析&#xff1a; 直接映射缓存的特点 映射规则&…

基于Java Springboot图书馆管理系统

一、作品包含 源码数据库文档全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据库&#xff1a;MySQL8.0 数据…

Python中的HTML

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

大数据新视界 -- 大数据大厂之 Impala 存储格式转换:从原理到实践,开启大数据性能优化星际之旅(下)(20/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

【优选算法 — 滑动窗口】水果成篮 找到字符串中所有字母异位词

水果成篮 水果成篮 题目描述 因为只有两个篮子&#xff0c;每个篮子装的水果种类相同&#xff0c;如果从 0 开始摘&#xff0c;则只能摘 0 和 1 两个种类 &#xff1b; 因为当我们在两个果篮都装有水果的情况下&#xff0c;如果再走到下一颗果树&#xff0c;果树的水果种类…

【ubuntu16.04】机器人学习笔记遇到的问题及解决办法:仿真小海龟

18版本的后面会出问题&#xff0c;避免万一我还是用了之前的16版本&#xff0c;虽然还没有解决粘贴的问题&#xff0c;但是安装ros很成功 可参考该文章博主讲的很详细&#xff0c;成功画出海龟 最后要把鼠标停在第三个终端&#xff0c;再去点击键盘&#xff0c;海龟才会动哦

游戏引擎学习第九天

视频参考:https://www.bilibili.com/video/BV1ouUPYAErK/ 修改之前的方波数据&#xff0c;改播放正弦波 下面主要讲关于浮点数 1. char&#xff08;字符类型&#xff09; 大小&#xff1a;1 字节&#xff08;8 位&#xff09;表示方式&#xff1a;char 存储的是一个字符的 A…

探索 JNI - Rust 与 Java 互调实战

真正的救赎&#xff0c;并非厮杀后的胜利&#xff0c;而是能在苦难之中&#xff0c;找到生的力量和内心的安宁。 ——加缪Albert Camus 一、Rust Java &#xff1f; Java 和 Rust 是两种现代编程语言&#xff0c;各自具有独特的优势&#xff0c;适用于不同的应用场景。 1、…