html练习11：案例仿制

news2024/10/5 17:20:02

1.目标效果

 2.布局效果

3.顶端部分制作效果

问题：img和p无法同时垂直居中显示，img会顶端对齐，p会底部对齐

解决方法：把img作为背景加入；用两个div分别做img和p的容器再进行格式调整

4.导航栏部分制作效果

要点：导航栏效果可用ol/li标签添加样式实现

5.内容部分

要点：边距什么的慢慢嗑吧

6.代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Document</title>

    <style>

        *{

            padding: 0;

            margin: 0;

            box-sizing: border-box;

            text-decoration: none;

            font-size: 14px;

        }

        #slogan{

            width: 40%;

            height: 184px;

            margin: 0 auto;

            background-image: url(./img/06b72d65e6034fbd8c62be3556bea8eb.jpeg);

            background-repeat: no-repeat;

        }

        #banner{

            width: 74%;

            height: 500px;

            margin: 0 auto;

            background-image: url(./img/5060bbbca3f64ab5b37ad1b3d019acce.jpeg);

            background-repeat: no-repeat;

        }

        #container{

            display: flex;justify-content: space-around;

            width: 74%;

            height: 600px;

            margin: 6px auto;

        }

        #one{

            width: 69%;

            height: 600px;

            border: solid 2px black;

            margin-right: 20px;padding: 6px;

        }

        #two{

            width: 29%;

            height: 600px;background-color: bisque;

            border: solid 2px black;

        }

        #slogan p{

            display: inline-block;

            height: 184px;

            line-height: 184px;

            margin-left: 209px;

            font-size: 23px;

        }

        #banner li{

            width: 20%;

            height: 40px;

            display: inline-block;

            padding-left: 30px;

            font-size: 20px;

            font-weight: 600;

            color: white;

            line-height: 40px;

            cursor: pointer;

        }

        .one_div{

            height: 35%;width: 90%;

            border-bottom:dashed 1px black;

            margin: 0 auto;

            text-align: center;

        }

        #one div:nth-child(1) p{

            line-height: 30px;

            height: 30px;

        }

        #one h3{

            height: 45px;

            line-height: 45px;

            font-size: 18px;

        }

        #one div:nth-child(2) p:nth-child(2){

            line-height: 26px;

            text-align: left;

            text-indent: 2em;

        }

        #one div:nth-child(2) p:nth-child(3){

            font-size: 10px;

            color: gray;

            text-align: left;

            margin-top: 8px;

        }

        #one img{

            width: 100%;

            margin-top: 8px;

        }

        #two dt{

            height: 30px;

            background-color: rgb(249, 85, 85);

            color: white;

            font-size: 17px;

            text-align: center;

            line-height: 30px;

        }

        #two dd{

            font-size: 15px;

            height: 30px;

            line-height: 30px;

            padding-left: 20px;

        }

    </style>

</head>

<body>

    <div id="slogan">

        <p>Kentucky Fried Chicken</p>

    </div>

    <div id="banner">

        <ul>

            <li><a>首页</a></li>

            <li><a>菜单</a></li>

            <li><a>关于KFC</a></li>

            <li><a>联系KFC</a></li>

        </ul>

    </div>

    <div id="container">

        <div id="one">

            <div class="one_div">

                <h3>KFC企业文化</h3>

                <p>口号“生活如此多娇”、“尽情自在肯德基”。</p>

                <p>肯德基来到中国已经35年了，肯德基在中国的35年，是“立足中国，</p>

                <p>融入生活”的35年，35年来，肯德基一直都在努力探索，把贴心的服务回馈给广大</p>

                <p>中国消费者，如今中国肯德基已在1000多个城市和乡镇开设了8000余家连锁餐厅</p>

                <p>遍及中国大陆的所有省、直辖市和自治区</p>

            </div>

            <div  class="one_div">

                <div style="display: flex;justify-content:space-between;">

                    <h3>美味推荐2</h3>

                    <h3 style="color: rgb(255, 72, 72);">老北京鸡肉卷</h3>

                </div>

                <p>这个是我最喜欢的单品之一，它的口味也确实相当的不错，鸡肉卷中的饼，很有韧劲，

                    里面的肌肉酥脆中透着柔嫩，再搭配一些黄瓜条，用他们调制的酱咬上一口。巴拉巴拉

                巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉

                巴拉巴拉巴拉巴拉。</p>

                <p>推荐指数&nbsp;100%&nbsp;好评率&nbsp;100%</p>

            </div>

            <div>

                <img src="./img/e4d2b91f271347c6bd1d6207e33daada.jpeg">

            </div>

        </div>

        <div id="two">

            <dl>

                <dt>热门推荐</dt>

                <dd>热燕麦拿铁-中</dd>

                <dd>焦糖玛奇朵-中</dd>

                <dd>热美式-大</dd>

                <dd>热蓝山-中</dd>

            </dl>

            <dl>

                <dt>开心下午茶</dt>

                <dd>四味小食拼盘</dd>

                <dd>葡式蛋挞四个</dd>

                <dd>人气餐随心选A</dd>

                <dd>人气餐随心选B</dd>

                <dd>人气餐随心选C</dd>

            </dl>

            <dl>

                <dt>儿童餐</dt>

                <dd>快乐童书餐</dd>

                <dd>亲子图书套餐</dd>

                <dd>美味儿童餐</dd>

            </dl>

        </div>

    </div>

</body>

</html>

7.改进-移动端适配版

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Document</title>

    <style>

        *{

            padding: 0;

            margin: 0;

            box-sizing: border-box;

            text-decoration: none;

            font-size: 14px;

        }

        @media screen and (max-width:500px){

            *{

                font-size: 7px;

            }

        }

        #slogan{

            width: 100%;

        }

        #slogan p{

            width: 33.21rem;height: 13.14rem;

            background-image: url(./img/06b72d65e6034fbd8c62be3556bea8eb.jpeg);

            background-repeat: no-repeat;background-size: contain;

            line-height: 13.14rem;

            margin: 0 auto; text-align: right;

            font-size: 1.64rem;

        }

        #banner{

            width: 100%;

        }

        #banner img{

            display: block;

            width: 100%;

        }

        #banner ul{

            width: 100%;

            height: 2.86rem;

           

            background-color: rgb(244, 63, 63);

        }

        #banner li{

            width: 23%;

            height: 2.86rem;  

            display: inline-block;

            text-align: center;

            font-weight: 600;

            color: white;

            line-height: 2.86rem;

            cursor: pointer;

        }

        #container{

            display: flex;justify-content: space-around;

            width: 100%;

            margin-top: 0.43rem;

        }

        #one{

            width: 69%;

            border: solid 0.14rem black;

            margin-right: 1.43rem;padding: 0.43rem;

        }

        .one_div{

            border-bottom:dashed 0.07rem black;

        }

        #one div:nth-child(1) p{

            line-height: 2.14rem;

            text-align: center;

        }

        #one h3{

            line-height:3.22rem;

            font-size: 1.29rem;

            text-align: center;

        }

        #one div:nth-child(2) p:nth-child(2){

            line-height: 1.86rem;

            text-align: left;

            text-indent: 2em;

        }

        #one div:nth-child(2) p:nth-child(3){

            font-size: 0.72rem;

            color: gray;

            text-align: left;

            margin-top: 0.57rem;

        }

        #one img{

            width: 100%;

            margin-top: 0.57rem;

        }

        #two{

            width: 29%;

            border: solid 0.15rem black;

        }

        #two dt{

            background-color: rgb(249, 85, 85);

            color: white;

            font-size: 1.3rem;

            text-align: center;

            line-height: 2.9rem;

        }

        #two dd{

            font-size: 1.1rem;

            line-height: 2.9rem;

            padding-left: 1.4rem;

        }

    </style>

</head>

<body>

    <div id="slogan">

        <p>Kentucky Fried Chicken</p>

    </div>

    <div id="banner">

        <ul>

            <li><a>首页</a></li>

            <li><a>菜单</a></li>

            <li><a>关于KFC</a></li>

            <li><a>联系KFC</a></li>

        </ul>

        <img src="./img/5060bbbca3f64ab5b37ad1b3d019acce.jpeg" style="width: 100%;">

    </div>

    <div id="container">

        <div id="one">

            <div class="one_div">

                <h3>KFC企业文化</h3>

                <p>口号“生活如此多娇”、“尽情自在肯德基”。</p>

                <p>肯德基来到中国已经35年了，肯德基在中国的35年，是“立足中国，</p>

                <p>融入生活”的35年，35年来，肯德基一直都在努力探索，把贴心的服务回馈给广大</p>

                <p>中国消费者，如今中国肯德基已在1000多个城市和乡镇开设了8000余家连锁餐厅</p>

                <p>遍及中国大陆的所有省、直辖市和自治区</p>

            </div>

            <div  class="one_div">

                <div style="display: flex;justify-content:space-between;">

                    <h3>美味推荐2</h3>

                    <h3 style="color: rgb(255, 72, 72);">老北京鸡肉卷</h3>

                </div>

                <p>这个是我最喜欢的单品之一，它的口味也确实相当的不错，鸡肉卷中的饼，很有韧劲，里面的肌肉酥脆中透着柔嫩，再搭配一些黄瓜条，用他们调制的酱咬上一口。巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉。</p>

                <p>推荐指数&nbsp;100%&nbsp;好评率&nbsp;100%</p>

            </div>

            <div>

                <img src="./img/e4d2b91f271347c6bd1d6207e33daada.jpeg">

            </div>

        </div>

        <div id="two">

            <dl>

                <dt>热门推荐</dt>

                <dd>热燕麦拿铁-中</dd>

                <dd>焦糖玛奇朵-中</dd>

                <dd>热美式-大</dd>

                <dd>热蓝山-中</dd>

            </dl>

            <dl>

                <dt>开心下午茶</dt>

                <dd>四味小食拼盘</dd>

                <dd>葡式蛋挞四个</dd>

                <dd>人气餐随心选A</dd>

                <dd>人气餐随心选B</dd>

                <dd>人气餐随心选C</dd>

            </dl>

            <dl>

                <dt>儿童餐</dt>

                <dd>快乐童书餐</dd>

                <dd>亲子图书套餐</dd>

                <dd>美味儿童餐</dd>

            </dl>

        </div>

    </div>

</body>

</html>

8.效果展示

QQ录屏20221212133158

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

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

相关文章

保证项目如期上线，测试人能做些什么？

保证项目如期上线，测试人能做些什么？

要保证项目按照正常进度发布&#xff0c;需要整个研发团队齐心协力。 有很多原因都可能会造成项目延期。 1、产品经理频繁修改需求 2、开发团队存在技术难题 3、测试团队测不完 今天我想跟大家聊一下&#xff0c;测试团队如何保证项目按期上线&#xff0c;以及在这个过程中可能…
阅读更多...
词法分析程序

词法分析程序

一、实验原理 1.1实验内容 通过本实验&#xff0c;应达到以下目标&#xff1a; 1.掌握从源程序文件中读取有效字符的方法和产生源程序的内部表示文件的方法。 2.掌握词法分析的实现方法。 3.上机调试编出的词法分析程序。 1.2实验内容 词法分析是作为相对独立的阶段来完成的…
阅读更多...
C# 事件

C# 事件

一 C#中的事件 大致上&#xff1a;事件-----回调函数&#xff1b; 二 用户界面中的事件 ① 按钮点击事件 ② 基本的写法 this.button1.Clicknew System.EventHandler(this.button1_Click); private void button1_Click(object sender,EventHandler e) {this.label1.TextDat…
阅读更多...
C++智能指针weak_ptr

C++智能指针weak_ptr

C智能指针weak_ptr 学习路线&#xff1a;C智能指针shared_ptr->C智能指针unique_ptr->C智能指针weak_ptr 简介&#xff1a;本文讲解常用的智能指针的用法和原理&#xff0c;包括shared_ptr,unique_ptr,weak_ptr。 概述 weak_ptr设计的目的是为配合 shared_ptr 而引入…
阅读更多...
静电场方程与边界面上的衔接条件 工程电磁学 P6

静电场方程与边界面上的衔接条件 工程电磁学 P6

我们现在已经知道两个公式 我们可以得到微分形式 对于体密度&#xff0c;面密度&#xff0c;线密度&#xff0c;点电荷的理解 很多同学会问空间中为什么要有面密度&#xff0c;线密度的存在呢&#xff1f; 其实这个是模型的需要&#xff0c;因为介质不一定是连续的&#xff0…
阅读更多...
如何设计一个高性能的图 Schema

如何设计一个高性能的图 Schema

本文整理自青藤云安全工程师——文洲在青藤云技术团队内部分享&#xff0c;分享视频参考&#xff1a;https://www.bilibili.com/video/BV1r64y1R72i 图数据库的性能和 schema 的设计息息相关&#xff0c;但是 NebulaGraph 官方本身对图 schema 的设计其实没有一个定论&#xff…
阅读更多...
Codeforces Round #837 (Div. 2) C. Hossam and Trainees

Codeforces Round #837 (Div. 2) C. Hossam and Trainees

Problem - C - Codeforces 翻译&#xff1a; 胡萨姆有&#x1d45b;名学员。他给&#x1d456;-th的学员分配了一个号码&#x1d44e;&#x1d456;。 一双&#x1d456;-th和&#x1d457;-th(&#x1d456;≠&#x1d457;)学员被称为成功的如果有一个整数&#x1d465;(&…
阅读更多...
基于springboot的企业员工工资管理系统（财务系统）

基于springboot的企业员工工资管理系统（财务系统）

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…
阅读更多...
Vue渲染器（二）：挂载与更新

Vue渲染器（二）：挂载与更新

渲染器&#xff08;二&#xff09;&#xff1a;挂载与更新 前面介绍了渲染器的基本概念和整体框架&#xff0c;接下来就可以介绍渲染器的核心功能&#xff1a;挂载与更新。 1.挂载子节点和元素的属性&#xff1a; vnode.children的值为字符串类型时&#xff0c;会把它设置为…
阅读更多...
019 | 在线电影娱乐网站系统设计含论文 | 大学生毕业设计 | 极致技术工厂

019 | 在线电影娱乐网站系统设计含论文 | 大学生毕业设计 | 极致技术工厂

作为一个在线电影娱乐网站系统&#xff0c;它展示给浏览者的是各种电影信息&#xff0c;把这些信息能够按用户的需要友好的展示出来是很重要的&#xff0c;同时&#xff0c;能够实现对这些信息的有条不紊的管理也是不可以忽视的。对浏览者和会员的功能而言叫做前台实现&#xf…
阅读更多...
[附源码]Node.js计算机毕业设计电子购物商城Express

[附源码]Node.js计算机毕业设计电子购物商城Express

项目运行 环境配置&#xff1a; Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境&#xff1a;最好是Nodejs最新版&#xff0c;我…
阅读更多...
[附源码]计算机毕业设计电商小程序Springboot程序

[附源码]计算机毕业设计电商小程序Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis MavenVue等等组成&#xff0c;B/S模式…
阅读更多...
【GRU时序预测】基于卷积神经网络结合门控循环单元CNN-GRU实现时间序列预测附matlab代码

【GRU时序预测】基于卷积神经网络结合门控循环单元CNN-GRU实现时间序列预测附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …
阅读更多...
代码随想录训练营第49天|LeetCode 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II

代码随想录训练营第49天|LeetCode 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II

参考 代码随想录 题目一&#xff1a;LeetCode 121. 买卖股票的最佳时机 注意这个题只买卖一次&#xff01;&#xff01; 贪心 class Solution { public:int maxProfit(vector<int>& prices) {int low INT_MAX;int result 0;for(int i 0; i < prices.size(…
阅读更多...
Redis框架（十）：大众点评项目 订单功能 Redis实现全局唯一ID、 秒杀基本环境

Redis框架（十）：大众点评项目 订单功能 Redis实现全局唯一ID、 秒杀基本环境

大众点评项目 订单功能 秒杀基本环境需求&#xff1a;订单功能 秒杀基本环境Redis实现全局唯一ID业务实现代码总览总结SpringCloud章节复习已经过去&#xff0c;新的章节Redis开始了&#xff0c;这个章节中将会回顾Redis实战项目 大众点评 主要依照以下几个原则 基础实战的Dem…
阅读更多...
揭秘！全球2022年Salesforce不同招聘职位的平均薪资

揭秘！全球2022年Salesforce不同招聘职位的平均薪资

Salesforce可以说是发展最快的企业软件公司。此外&#xff0c;还一直被评选为全球最佳工作场所之一&#xff0c;2021年赢得了Glassdoor评选的最佳工作场所&#xff0c;并且在《财富》杂志的100家最佳工作公司中排名第四。除了非常重视员工福利&#xff0c;强调工作与生活的平衡…
阅读更多...
在WSL中配置GPU环境

在WSL中配置GPU环境

首先需要明确一点&#xff0c;虽然我们通过安装WSL获得了linux开发环境&#xff0c;但是我们最终使用的GPU还是在windows当中的&#xff0c;所以还是需要在系统中安装对应的驱动。 第一步&#xff1a;在window上根据显卡型号和版本安装驱动 这里参考之前的步骤就行 第二步&a…
阅读更多...
HPC走出全新路线：《开放架构HPC技术与生态白皮书》注解

HPC走出全新路线：《开放架构HPC技术与生态白皮书》注解

文|智能相对论 作者|叶远风 数字经济大时代&#xff0c;创新驱动大环境&#xff0c;HPC已不再是阳春白雪&#xff0c;而受到越来越多人的关注。 HPC&#xff0c;即High Performance Computing&#xff0c;高性能计算。对普通人来说&#xff0c;没有听过HPC&#xff0c;但肯定…
阅读更多...
使用docker-compose搭建mysql主从复制

使用docker-compose搭建mysql主从复制

使用docker-compose搭建mysql主从复制&#xff1a; Mysql的主从【快速】搭建编写脚本编写 master.sh 脚本编写 slave.sh 脚本编写docker-compose.yml文本测试阶段主从同步效果主从环境重启容器被删除&#xff0c;重新启动从节点关闭&#xff0c;主节点继续写入数据从节点删除&a…
阅读更多...
[附源码]计算机毕业设计的云网盘设计Springboot程序

[附源码]计算机毕业设计的云网盘设计Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis MavenVue等等组成&#xff0c;B/S模式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023