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

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

时间：2024-02-04 15:33:36浏览次数：27  
标签：实战 width 必学 100px height 案例 background position 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>元素的相对、绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .outer,
        .outerTwo,
        .outerNext {
            width: 200px;
            border: 1px solid black;
            height: 100px;
            margin: 10px;
        }
        /* relative 定位是相对于自己来说 */
        
        .red {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            position: relative;
        }
        /* 如果green 也用上了定位，那么red就无法覆盖green的颜色 */
        
        .green {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        
        .outerTwo {
            position: relative;
        }
        
        .outerTwo div {
            width: 10px;
            height: 10px;
            float: left;
        }
        
        .orange {
            position: absolute;
            background: orange;
            bottom: 0;
            right: 0;
        }
        
        .outerTwo .outerThree {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            margin: 20px;
            /* position: relative; */
        }
        
        .outerNext div {
            width: 100px;
            height: 100px;
            float: left;
        }
        
        .pink {
            background: pink;
            position: absolute;
            z-index: -1;
        }
        
        .yellow {
            background: yellow;
            position: absolute;
            z-index: -2;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="red"></div>
        <div class="green"></div>
    </div>

    <div class="outerTwo">
        <div class="outerThree">
            <div class="orange"></div>
        </div>
    </div>

    <div class="outerNext">
        <div class="pink"></div>
        <div class="yellow"></div>
    </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>
        .fixed {
            width: 100px;
            height: 100px;
            background: black;
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 2;
        }
        
        .absolute {
            width: 100px;
            height: 100px;
            background: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
        }
        
        .static {
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .none {
            position: static;
        }
    </style>
</head>

<body>
    <div style="height: 3000px;">
        <div class="fixed"></div>
        <div class="absolute"></div>
        <div class="static none"></div>
    </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: 100px;
            height: 100px;
            background: black;
            /* position: fixed; */
            /* float: left; */
        }
        
        .leo_div {
            width: 10px;
            height: 10px;
            background: red;
            margin-top: 10px;
        }
        
        .sky {
            width: 100px;
            height: 100px;
            background: orange;
            float: left;
        }
    </Style>
</head>

<body>
    <div class="leo">
        <!-- 如果是在标准流情况下，那么子元素的margin-top会有影响 -->
        <!-- 注意：尽量标准流和标准流一起使用，非标准流和非标准流一起使用 -->
        <div class="leo_div">

        </div>

    </div>
    <div class="sky"></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>
        div {
            width: 200px;
            height: 200px;
            background: black;
            margin: 50px;
        }
        
        a {
            width: 200px;
            height: 200px;
            background: black;
            /* 行内元素 margin-top不支持 */
            margin: 50px;
            padding: 50px;
        }
        /* 浮动也会变成块状元素 */
        
        .fa {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        /* 定位也会把行内元素改为块状元素 */
        
        .position {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
        
        .block {
            width: 100px;
            height: 100px;
            background: red;
            display: block;
        }
        
        .inline {
            width: 100px;
            height: 100px;
            display: inline;
        }
        
        .ib {
            width: 100px;
            height: 100px;
            background: red;
            display: inline-block;
            margin-top: 50px;
            padding: 50px;
        }
    </style>
</head>

<body>
    <!-- 块状元素 块状元素会另起一行-->
    <!-- <div></div> -->
    <!-- 行内元素 会在同一行-->
    <!-- <a></a>
    <a></a> -->

    <!-- <a class="fa"></a>
    <a class="position"></a>
    <a class="block"></a> -->

    <!-- 块状元素改行内元素 -->
    <div class="inline">abc</div>

    <!-- 行内块元素 -->
    <img/>


    <!-- 行内块元素 -->
    <a class="ib">123</a>
</body>

</html>

CSS的重置方式与命名规范

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>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style>
        div {
            width: 100px;
            height: 100px;
            background: black;
        }
        
        .div1 {}
        
        .fbtnother {}
        
        .pfboxouter {}
        
        .pf-box-outer {
            background: red
        }
    </style>
</head>

<body>
    <div></div>
    <button class='fbtnother'></button>
    <div class='pf_box_outer'></div>
    <div class='pf-box-outer'></div>
    <div class='pf box outer'></div>
    <div class='pfBoxOuter'></div>
    <div class='leoTopBtn'></div>
    <div class='leo-top-btn'></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>
        body {
            background: #f6f7fb;
        }
        
        .centerNode {
            width: 870px;
            height: 572px;
            background: #ffffff;
            margin: auto;
            margin-top: 90px;
            box-shadow: 0px 60px 60px #c9d2dc;
            position: relative;
        }
        
        .leftTopText {
            font-size: 14px;
            height: 14px;
            line-height: 14px;
            position: absolute;
            left: 50px;
            top: 44px;
            color: #000000;
        }
        
        .rightTopText {
            height: 13px;
            line-height: 13px;
            font-size: 12px;
            color: #0d0d0e;
            position: absolute;
            right: 50px;
            top: 44px;
            background: url(img/topRight_icon.jpg) no-repeat;
            padding-left: 29px;
        }
        
        .rightCenter {
            position: absolute;
            right: 47px;
            top: 100px;
            /* X轴 y轴 粗细 颜色 */
            box-shadow: 0px 0px 45px #d1d1d1;
        }
        
        .leftCenterText {
            font-size: 26px;
            line-height: 26px;
            height: 26px;
            color: #19131a;
            position: absolute;
            top: 197px;
            left: 61px;
        }
        
        .leftCenterText span {
            font-weight: bold;
        }
        
        .leftCenterContent {
            width: 178px;
            line-height: 22px;
            font-size: 12px;
            color: #403e4d;
            position: absolute;
            left: 61px;
            top: 240px;
        }
        
        .leftBottom {
            width: 103px;
            height: 57px;
            position: absolute;
            left: 59px;
            bottom: 51px;
        }
        
        .leftBottom .leftRedTop {
            width: 3px;
            height: 30px;
            background: #f93828;
        }
        
        .leftBottom .leftGrayBottom {
            width: 3px;
            height: 27px;
            background: #e0dfe2;
        }
        
        .leftBottom p {
            font-size: 12px;
            line-height: 12px;
            color: #121212;
            height: 12px;
            position: absolute;
            left: 14px;
            top: 8px;
        }
    </style>
</head>

<body>
    <div class="centerNode">
        <div class="leftTopText">
            IMPR.
        </div>
        <div class="rightTopText">
            MENU
        </div>

        <div class="rightCenter">
            <img src="img/rightCenter.jpg" />
        </div>
        <p class="leftCenterText">
            <span>Explore</span>more
        </p>
        <p class='leftCenterContent'>
            Ever been labelled as the "createive" person in the room.Ever been labelled as the "createive" person in the room.
        </p>


        <div class='leftBottom'>
            <div class='leftRedTop'></div>
            <div class='leftGrayBottom'></div>
            <p>SCROLL DOWN</p>
        </div>
    </div>

</body>

</html>

标签：实战,width,必学,100px,height,案例,background,position,left
From： https://www.cnblogs.com/xiaochenNN/p/18006336

相关文章

  • 江苏苏州“太仓雪世界”，商业体网络运维项目案例
      太仓冰雪世界是位于江苏太仓市的一座大型室内滑雪场，拥有优越的地理位置和丰富的滑雪设施。游客们可以在这里全年无休地享受冰雪运动的乐趣，体验滑雪的激情与速度。太仓冰雪世界是华东地区冰雪运动的新地标，游客可以畅享冰雪盛宴。  太仓雪世界，作为一个集娱乐、商场及办公楼......
  • ABP-VNext 用户权限管理系统实战03---动态api调用并传递token
    一、使用动态api的目的ABP可以自动创建C#API客户端代理来调用远程HTTP服务(RESTAPIS).通过这种方式,你不需要通过 HttpClient 或者其他低级的HTTP功能调用远程服务并获取数据.现在有两个服务：BackgroundJob服务要调用IdentityManagement服务，并在调用时传递token二、集成步骤1、......
  • 大促削峰实战：评价QPS降低85%的背后逻辑
    一、背景京东APP商品详情页展示的评价数据通过单独请求评价接口获取，与商详模块流量近乎1:1，需要共同应对秒杀等海量流量的冲击，存在突发流量风险。经过对用户操作行为和评价埋点信息分析，评价调用与商详流量解耦可行，预期收益显著。为此，评价与商详模块研发人员组成虚拟攻坚小组，推进解耦......
  • 大促削峰实战：评价QPS降低85%的背后逻辑
    一、背景京东APP商品详情页展示的评价数据通过单独请求评价接口获取，与商详模块流量近乎1:1，需要共同应对秒杀等海量流量的冲击，存在突发流量风险。经过对用户操作行为和评价埋点信息分析，评价调用与商详流量解耦可行，预期收益显著。为此，评价与商详模块研发人员组成虚拟攻坚小组，推进解......
  • # yyds干货盘点 # 盘点一个txt文档合并的实战需求（方法二）
    大家好，我是皮皮。一、前言前几天在Python最强王者交流群【FiNε_】问了一个Pandas数据合并的问题。问题如下图所示：上一篇文章中我们已经看到了两个方法，这一篇文章我们一起来看看另外一个方法。二、实现过程这里【哎呦喂 是豆子～】给了一个指导，如下所示：并给出了如下代码：importpand......
  • lua 语法介绍与 NGINX lua 高级用法实战操作
    目录一、概述二、lua安装三、lua语法1）lua数据类型2）lua变量3）lua拼接字符串4）lua循环5）lua函数6）lua条件控制7）lua库模块四、NGINXlua高级用法一、概述lua是一种轻量小巧的脚本语言，用标准C语言编写并以源代码形式开放，其设计目的是为了嵌入应用程序中，从而为应用程序提供灵活......
  • R语言结构方程模型SEM、路径分析房价和犯罪率数据、预测智力影响因素可视化2案例|附代
    原文链接：http://tecdat.cn/?p=25044原文出处：拓端数据部落公众号最近我们被客户要求撰写关于结构方程模型的研究报告，包括一些图形和统计输出。1简介在本文，我们将考虑观察/显示所有变量的模型，以及具有潜在变量的模型。第一种有时称为“路径分析”，而后者有时称为“测量模型”。......
  • 设计一个学生管理系统（Python类的使用案例）
    设计一个学生管理系统设计学生类（Student）属性：姓名（name）、学号（student_id）、年龄（age）、成绩（grades） 设计学生管理系统类（StudentManagementSystem）属性：学生列表（students）  classStudent:def__init__(self,name,id,age,grades):self.name=namesel......
  • 单列集合综合案例-斗地主
    这个Java代码是实现了一个简单的扑克牌游戏逻辑框架，包括创建扑克牌类（Card）、房间类（Room）以及游戏主入口类（Game）。Card类：Card类代表一张扑克牌，包含三个属性：face（牌面，如"3","K"等）、suit（花色，如♠,♥等）和size（大小，用于排序或比较牌的大小）。提供了相应的getter/setter方法来获取和设......
  • # yyds干货盘点 # 盘点一个txt文档合并的实战需求（方法一）
    大家好，我是皮皮。一、前言前几天在Python最强王者交流群【FiNε_】问了一个Pandas数据合并的问题。问题如下图所示：二、实现过程这里【隔壁......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99