首页 > 其他分享 >前端必学-40个精选案例实战-案例5-首页单屏案例实战

前端必学-40个精选案例实战-案例5-首页单屏案例实战

时间：2024-02-01 14:25:11浏览次数：23  
标签：实战 float width 必学 height 案例 background font left

经典背景图文列表案例分析与思路

image.png

图文背景如何设定

image.png

<!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;
        }
    </style>
</head>

<body>
    <dl>
        <dt>
            <img src="img/慕课网图片.png">
        </dt>
        <dd>
            这个是慕课网的图标
        </dd>
    </dl>

    <dl>
        <dt>这是第二组</dt>
        <dl>
            张三
        </dl>
        <dl>
            李四
        </dl>
        <dl>
            王五
        </dl>
    </dl>

</body>

</html>

理解元素的颜色背景设定

image.png

<!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>背景颜色设定</title>
    <style>
        .leo {
            width: 100px;
            height: 100px;
            background-color: lawngreen;
        }
        
        .leo_two {
            width: 100px;
            height: 100px;
            background-color: #ffabff;
        }
        
        .leo_three {
            width: 100px;
            height: 100px;
            background-color: rgb(255, 0, 12);
        }
        
        .leo_bg {
            width: 100px;
            height: 100px;
            background-image: url(img/慕课网图片.png);
        }
    </style>
</head>

<body>
    <div class="leo"></div>
    <div class="leo_two"></div>
    <div class="leo_three"></div>
    <div class="leo_bg"></div>
    <!--一个是元素的背景，一个是单独的标签 -->
    <div>
        <img src="./img/慕课网图片.png">
    </div>
</body>

</html>

元素的图片背景的平铺、大小、定位设置

image.png

<!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>元素的图片背景的平铺、大小、定位设置</title>
    <style>
        .leo {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url(img/1.jpg);
            background-repeat: no-repeat;
        }
        
        .leo_two {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url(img/1.jpg);
            background-repeat: no-repeat;
            /* 宽高 */
            /* background-size: 250px 150px; */
            background-size: 150px auto;
        }
        
        .leo_three {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url(img/1.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .leo_next {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url(img/1.jpg);
            background-repeat: no-repeat;
            background-size: contain;
        }
        
        .leo_position {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-image: url(img/1.jpg);
            background-repeat: no-repeat;
            background-size: 30px 30px;
            /* x轴 Y轴 */
            /* background-position: 30px 0px; */
            /* background-position-x: 30px;
            background-position-y: 30px; */
            background-position: left center;
        }
    </style>
</head>

<body>
    <!-- <div class="leo"></div>
    <div class="leo_two"></div>
    <div class="leo_three"></div>
    <div class="leo_next"></div> -->
    <div class="leo_position"></div>

</body>

</html>

背景样式缩写方式

image.png

<!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>基础知识：背景样式缩写方式</title>
    <Style>
        .leo {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-color: pink;
            background-image: url(img/1.jpg);
            background-repeat: repeat-x;
            background-position: 30px 30px;
            background-size: 50px 50px;
        }
        .leo2{
            width: 300px;
            height: 300px;
            border:1px solid black;
            margin-top: 10px;
            /* position/size 用/分割 */
            background: pink url(img/1.jpg) repeat-x 30px 30px/50px 50px ;
        }
    </Style>
</head>

<body>
    <div class="leo"></div>
    <div class="leo2"></div>
</body>

</html>

综合实战：背景图文列表的图片列表制作

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .outerNode {
            width: 818px;
            border: 1px solid black;
            float: left;
        }
        
        .outerNode .list_node {
            width: 260px;
            height: 278px;
            float: left;
        }
        
        .outerNode .list_node dt {
            float: left;
            width: 260px;
            height: 152px;
        }
        
        .outerNode .list_node dd {
            float: left;
            width: 236px;
            height: 90px;
            background-color: red;
            /* 添加了border 需要减去对应宽度 */
            border: 2px solid #fdfdfd;
            border-top: none;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 18px;
            padding-bottom: 16px;
        }
        
        .outerNode .list_node dd .dd_title {
            float: left;
            width: 236px;
            height: 12px;
            line-height: 12px;
            font-size: 12px;
        }
        
        .outerNode .list_node dd .dd_content {
            float: left;
            width: 236px;
            height: 26px;
            line-height: 15px;
            font-size: 12px;
            margin-top: 7px;
        }
        
        .outerNode .list_node dd .line {
            float: left;
            height: 1px;
            background: #f2f2f2;
            border-top: 1px solid #fbfbfb;
            border-bottom: 1px solid #fbfbfb;
            width: 236px;
            margin-top: 21px;
        }
        
        .outerNode .list_node dd .dd_bottom_share {
            width: 236px;
            float: left;
            height: 12px;
            margin-top: 8px;
            line-height: 12px;
            font-size: 12px;
        }
        
        .outerNode .list_node dd .dd_bottom_share .left_share {
            float: left;
        }
        
        .outerNode .list_node dd .dd_bottom_share .right_share {
            width: 11px;
            height: 11px;
            float: right;
            background: url(img/1.jpg);
        }
    </style>
</head>

<body>
    <div class="outerNode">
        <dl class="list_node">
            <dt>
                <img src="img/1.jpg">
            </dt>
            <dd>
                <p class="dd_title">
                    Overall mark
                </p>
                <p class="dd_content">
                    Overall markOverall markOverall markOverall markOverall markOverall
                </p>
                <div class="line"></div>
                <div class="dd_bottom_share">
                    <a href="#" class="left_share">
                        Read More
                    </a>
                    <a href="#" class="right_share">

                    </a>
                </div>
            </dd>
        </dl>
    </div>
</body>

</html>

理论实操：文字大小、粗细、风格、颜色的样式

image.png

<!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>理论实操：文字大小、粗细、风格颜色的样式</title>
    <Style>
        .leo {
            color: rgb(50, 47, 139);
        }
        
        .weight_one {
            font-weight: 700px;
        }
        
        .weight_two {
            font-weight: 100;
            ;
        }
        
        .weight_three {
            font-weight: normal;
            font-weight: bold;
            font-weight: bolder;
            font-weight: lighter;
        }
        
        .size {
            font-size: 12px;
        }
        
        .style {
            font-style: italic;
        }
        
        .style_two {
            font-style: oblique;
            font-style: normal;
        }
    </Style>
</head>

<body>
    <div class="leo">
        慕课网
    </div>
    <div class="weight_one">
        文字粗细
    </div>
    <div class="weight_two">
        文字粗细
    </div>
    <div class="weight_three">
        文字粗细
    </div>
    <div class="size">
        文字大小
    </div>
    <i>
        文字
    </i>

</body>

</html>

文字大小写字母样式、字体类型、首行缩进样式

image.png

理论实操-文字中英文折行image.png

  • 在设定文字相关时，中英文折行是不一样的
  • word-wrap与white-space样式可以设定中英文折行状态
<!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>文字中英文折行</title>
    <style>
        .eng {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            /* 换行操作 */
            word-wrap: break-word;
        }
        
        .zn {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="eng">
        assdfasfasdasdaseqwrfqasdasdas
    </div>
    <div class="zn">
        今天天气不错风和日丽的~ 今天天气不错风和日丽的~
    </div>

</body>

</html>

文本缩写样式

<!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>文本缩写样式</title>
    <style>
        .leo {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            font-weight: bold;
            font-style: italic;
            font-size: 20px;
            line-height: 100px;
            font-family: cursive;
        }
        
        .sky {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            /* font: italic lighter 20px/100px cursive; */
            font: 25px cursive;
        }
    </style>
</head>

<body>
    <div class="leo">
        abc
    </div>
    <div class="sky">
        abc
    </div>

</body>

</html>

综合实战：实现

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .outer_side {
            width: 955px;
            height: 431px;
            border: 1px solid black;
            padding-top: 48px;
            padding-left: 72px;
            padding-right: 66px;
            padding-bottom: 43px;
        }
        
        .outer_side .title_top {
            width: 818px;
            height: 24px;
            float: left;
        }
        
        .outer_side .title_top .title_left_show {
            float: left;
            color: #1d1d1d;
            font-size: 20px;
            line-height: 20px;
            height: 20px;
            font-weight: bold;
        }
        
        .outer_side .title_top .title_right_share {
            float: right;
            color: #b3b3b3;
            font-size: 12px;
            line-height: 12px;
            height: 12px;
            background: url(img/慕课网图片.png) no-repeat;
            padding-left: 15px;
            margin-top: 14px;
        }
        
        .outer_side .title_two {
            height: 12px;
            width: 818px;
            float: left;
            line-height: 12px;
            font-size: 12px;
            color: #797979;
            margin-top: 2px;
            margin-bottom: 20px;
        }
        
        .outerNode {
            width: 818px;
            float: left;
        }
        
        .outerNode .list_node {
            width: 260px;
            height: 278px;
            float: left;
            margin-right: 17px;
        }
        
        .outerNode .list_end {
            margin-right: 0px;
        }
        
        .outerNode .list_node dt {
            float: left;
            width: 260px;
            height: 152px;
        }
        
        .outerNode .list_node dd {
            float: left;
            width: 236px;
            height: 90px;
            /* 添加了border 需要减去对应宽度 */
            border: 2px solid #fdfdfd;
            border-top: none;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 18px;
            padding-bottom: 16px;
        }
        
        .outerNode .list_node dd .dd_title {
            float: left;
            width: 236px;
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            color: #2e2e2e;
        }
        
        .outerNode .list_node dd .dd_content {
            float: left;
            width: 235px;
            height: 26px;
            line-height: 15px;
            font-size: 12px;
            margin-top: 7px;
            color: #bbbbbb;
            padding-left: 1px;
        }
        
        .outerNode .list_node dd .line {
            float: left;
            height: 1px;
            background: #f2f2f2;
            border-top: 1px solid #fbfbfb;
            border-bottom: 1px solid #fbfbfb;
            width: 236px;
            margin-top: 21px;
        }
        
        .outerNode .list_node dd .dd_bottom_share {
            width: 236px;
            float: left;
            height: 12px;
            margin-top: 8px;
            line-height: 12px;
            font-size: 12px;
        }
        
        .outerNode .list_node dd .dd_bottom_share .left_share {
            float: left;
            color: #8e8e8e;
        }
        
        .outerNode .list_node dd .dd_bottom_share .right_share {
            width: 11px;
            height: 11px;
            float: right;
            background: url(img/1.jpg);
        }
    </style>
</head>

<body>
    <div class="outer_side">
        <div class="title_top">
            <p class="title_left_show">
                Activity Inforrmation
            </p>
            <a class="title_right_share">
                Read more
            </a>
        </div>

        <div class="title_two">
            Let value share record the pace of enterprise development

        </div>

        <!-- outerNode 放dl元素 -->
        <div class="outerNode">
            <dl class="list_node">
                <dt>
                <img src="img/1.jpg">
            </dt>
                <dd>
                    <p class="dd_title">
                        Overall mark
                    </p>
                    <p class="dd_content">
                        Overall markOverall markOverall markOverall markOverall markOverall
                    </p>
                    <div class="line"></div>
                    <div class="dd_bottom_share">
                        <a href="#" class="left_share">
                        Read More
                    </a>
                        <a href="#" class="right_share">

                        </a>
                    </div>
                </dd>
            </dl>
            <dl class="list_node">
                <dt>
                <img src="img/1.jpg">
            </dt>
                <dd>
                    <p class="dd_title">
                        Overall mark
                    </p>
                    <p class="dd_content">
                        Overall markOverall markOverall markOverall markOverall markOverall
                    </p>
                    <div class="line"></div>
                    <div class="dd_bottom_share">
                        <a href="#" class="left_share">
                        Read More
                    </a>
                        <a href="#" class="right_share">

                        </a>
                    </div>
                </dd>
            </dl>
            <dl class="list_node list_end">
                <dt>
                <img src="img/1.jpg">
            </dt>
                <dd>
                    <p class="dd_title">
                        Overall mark
                    </p>
                    <p class="dd_content">
                        Overall markOverall markOverall markOverall markOverall markOverall
                    </p>
                    <div class="line"></div>
                    <div class="dd_bottom_share">
                        <a href="#" class="left_share">
                        Read More
                    </a>
                        <a href="#" class="right_share">

                        </a>
                    </div>
                </dd>
            </dl>
        </div>
    </div>
</body>

</html>

标签：实战,float,width,必学,height,案例,background,font,left
From： https://www.cnblogs.com/xiaochenNN/p/18001117

相关文章

  • 智能制造-案例汇总
    小米北京智能工厂05绿色低碳智能能源管理建设智能厂务系统，将工厂内的空调、空气压缩机等机电系统全部接入工业数智平台，通过对能耗数据和环境数据进行分析挖掘，实现能耗优化和智能调度。创新做法不断突破、创新生产技术领先01工艺智能闭环调优技术针对制造工艺精细且机理复杂、工......
  • 逆向实战28——补环境过瑞数6
    前言本文章中所有内容仅供学习交流，抓包内容、敏感网址、数据接口均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请联系我立即删除！此外出于某种原因。本章大部分调试会省略，仅简单说个大概。之前写了补环境瑞数4的流程。小伙伴有空可以翻一......
  • 盘点一个Excel数据分割和explode()实战问题
    大家好，我是皮皮。一、前言前几天在Python白银交流群【JethroShen】问了一个Pandas数据处理的问题。问题如下：各位大佬这种情况我怎么处理一下啊？标记的商品内容后后面的数量是一一对应的想把它们铺开。下面是他自己写的代码：jigou_df=pd.read_excel(jigou_path)data={'商......
  • java flink（二十六） 实战之电商黑名单过滤 Flink CEP编程实现、什么是CEP、CEP组合模式d
    javaflink（二十六）实战之电商黑名单过滤FlinkCEP编程实现、什么是CEP、CEP组合模式demo、CEP循环模式demo什么是CEP：1、复杂事件处理2、Flink中实现复杂事件处理库3、CEP允许在无休止的事件中检测事件模式，让我们有机会掌握数据中的重要部分4、一个或多个由简单事件构成的事......
  • OOM实战演练
    1.实战:OutOfMemoryError异常在《Java虚拟机规范》的规定里，除了程序计数器外，虚拟机内存的其他几个运行时区域都有发生OutOfMemoryError(OOM)异常的可能，并且将初步介绍若干最基本的与自动内存管理子系统相关的HotSpot虚拟机参数。本节实战的目的有两个:第一，通过代码验证《Jav......
  • 12.分组并发压测实战
    1.压测计划制定压测策略不同的并发数10，50，100，200，……持续时间30s记录结果测试期望结果验证能够支撑多大并发数，峰值数验证错误率，定义可接受范围，<=0.1%or<=0.5%ormust=0%2.压测策略通过对比并发数与流量还有错误率的关系，找到一个最合理的系统可支撑最......
  • ChatGPT全栈开发实战：从需求分析到数据可视化，一站式指南助你快速构建全面应用
    《ChatGPT全栈开发实战：从需求分析到数据可视化，一站式指南助你快速构建全面应用》是一本旨在引领我们进入全栈开发世界的综合指南。通过结合强大的ChatGPT技术和全栈开发的实践，我们将探索需求分析、后端开发、前端开发、测试、运维、算法优化、数据库、网络安全、人工智能、自然......
  • 华为WLAN FIT AC+AP 模式配置案例-1
    配置流程：1.带外管理配置：设备名称、http、ssh、ntp、snmp、dns、自动上传配置以备份等。2.vlan配置：业务vlan、AP管理vlan、vrrpvlan。3.网络配置：管理IP、hsbIP、上下联端口、路由。4.WLAN业务配置：ssid模板、认证模板、vap模板，AP上线5.认证配置：802.1x认证配置6.VRRP配置7.......
  • Deep3DFaceRecon 2D图像转3D模型实战
    本案例通过Deep3DFaceRecon_pytorch实现前置文档：https://github.com/sicxu/Deep3DFaceRecon_pytorchhttps://blog.csdn.net/flyfish1986/article/details/121861086本文是在本地没有gpu硬件的支持下的实现方案，并不具体描述部署过程，部署过程建议看上面两个文档地址准备工程文......
  • 阿里云参编业内首个代码大模型标准，通义灵码获 2023 AI4SE “银弹” 案例
    日前，中国人工智能产业发展联盟智能化软件工程工作组（AIforSoftwareEngineering，下文简称AI4SE）在京召开首届“AI4SE创新巡航”活动。阿里云作为AI4SE首批成员单位，与中国信息通信研究院等组织联合发起的《智能化软件工程技术和应用要求第一部分：代码大模型》（标准编号AIIA/PG0110......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99