(간단한 과정 설계) 방금 프런트 엔드 Xiaobai에서 만든 간단한 모바일 터미널 프로젝트 공유 및 요약

프로그래밍 언어 2023-07-19 01:12:53 독서 시간: null

프론트 엔드 Xiaobai에서 방금 만든 간단한 모바일 프로젝트 공유 및 요약

사용된 기술은 간단한 div+css입니다.

그림에 직접

여기에 이미지 설명 삽입
여기에 이미지 설명 삽입
여기에 이미지 설명 삽입
여기에 이미지 설명 삽입
여기에 이미지 설명 삽입

코드 부분 물방울 서비스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="Common.css">

    <style>
        .cell{
     
     display: table;width: 100%;height: 80px;margin-bottom: 10px;
            background-color: white;}
        .cell a{
     
     display: table-cell;width: 33.3%;text-align: center;vertical-align: middle;text-decoration: none;color: black}

    </style>
</head>
<body>
<div class="title-top" >
    小滴服务
</div>

<div >
    <img src="../icon/banner1.png" alt="" class="middle-picture">
</div>

<div class="cell">
    <a href=""><img src="../icon/index1.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index2.png" alt=""><p>平台风采</p></a>
    <a href=""><img src="../icon/index3.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
    <a href=""><img src="../icon/index4.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index5.png" alt=""><p>平台风采</p></a>
    <a href=""><img src="../icon/index6.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
    <a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a>
    <a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
    <a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a>
    <a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
    <a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a>
    <a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell" style="padding-bottom: 50px">
    <a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a>
    <a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>

<div class="cell-navigation" >
    <a href="First-page.html"><img src="../icon/nav11.png" alt=""><p style="color: red">小滴服务</p></a>
    <a href="EnterPrise-Project.html"><img src="../icon/nav20.png" alt=""><p>企业项目</p></a>
    <a href="Service-process.html"><img src="../icon/nav30.png" alt=""><p>服务流程</p></a>
    <a href="Platform-Style.html"><img src="../icon/nav40.png" alt=""><p>平台风采</p></a>
    <a href="Myself.html"><img src="../icon/nav50.png" alt=""><p>我的小滴</p></a>
</div>
</body>
</html>

다음은 엔터프라이즈 프로젝트 섹션입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1,user-scalable=no">
    <title>公司项目</title>
    <link rel="stylesheet" href="Common.css">
    <style>

        .two{
     
     
            padding-top: 40px;
            background-color: white;
            display: table;
            width: 100%;
            text-align: center;
            height: 44px;
            line-height: 44px;
        }
        .two a{
     
     
            display: table-cell;
            width: 33.3%;
            text-decoration: none;
            color:rgb(28,109,192);

        }
    </style>
</head>
<body>

<div class="title-top">
    创业项目
</div>

<div class="two">
    <a href="EnterPrise-Project.html">钻石创业者</a>
    <a href="EnterPrise-Project-gold.html">金牌创业者</a>
    <a href="EnterPrise-Project-Silver.html">银牌创业者</a>
</div>

<div style="background-color:white;" >
    <img src="../icon/banner3.png" alt="" style="width: 100%">
    <h5 style="text-align: center">服务内容</h5>
    <img src="../icon/10w_1.png" alt="" style="width: 100%">
    <p style="font-size: 10px;text-align: center">提供以上两个学院的技术支持、咨询服务，课件学习等内容</p>
</div>

<div >
    <h5 style="text-align: center">创业者享受的回报收益</h5>
    <img src="../icon/10w_2.png" alt="" style="width: 100%">
    <ol style="font-size: 10px">
        <li>渠到可以享有的股份额度</li>
        <li>渠道个人业绩流水总额累计</li>
        <li>历年渠道全部各方面业绩流水总额累计</li>
        <li>宏鑫互联网集团所拥有的上市或者充足公司纵谷本数</li>
        <li>宏鑫互联网集团上市总股本数的20%</li>
    </ol>
</div>
<div style="background-color:white;padding-bottom: 50px">
    <h5 style="text-align: center">获得收益条件</h5>
    <ol style="font-size: 10px">
        <li>N≥10人</li>
        <li>业绩流水≥1.2亿。</li>
        <li>当满足两个以上条件时，钻石创业者才能取得期权。<br>
            注：上面的y/z为财务数据，由财务部门按期提供，录入即可。
        </li>
    </ol>
</div>

<div class="cell-navigation" >
    <a href="First-page.html"><img src="../icon/nav10.png" alt=""><p>小滴服务</p></a>
    <a href="EnterPrise-Project.html"><img src="../icon/nav21.png" alt=""><p style="color: red">企业项目</p></a>
    <a href="Service-process.html"><img src="../icon/nav30.png" alt=""><p>服务流程</p></a>
    <a href="Platform-Style.html"><img src="../icon/nav40.png" alt=""><p>平台风采</p></a>
    <a href="Myself.html"><img src="../icon/nav50.png" alt=""><p>我的小滴</p></a>
</div>

</body>
</html>

다음은 내 드롭릿 부분입니다(다른 두 부분은 매우 간단하므로 코드를 붙여넣을 필요가 없습니다)

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1 user-scalable=no">
    <title>我的小滴</title>
    <link rel="stylesheet" href="Common.css">
    <style>
        .self{
     
     
            position: absolute;
            top: 83px;
            left: 50%;
            text-align: center;
            margin-left:-32px;

        }
        .frame{
     
     
            position: relative;
            left: 5%;

        }
        .arrow{
     
     
            position: relative;
            left: 50%;
        }
         td{
     
     
             border: 1px #dddddd solid;
             background-color: white;
             border-radius:5px;
        }
        

    </style>
</head>
<body>
<div class="title-top">
    我的小滴
</div>

<div style="padding-top: 40px">
    <img src="../icon/banner5.png" alt=""width="100%">
</div>

<div class="self">
    <img src="../icon/head.png" alt=""><br>
    <p>华衫科技</p>
    <span style="background-color:rgb(28,109,192);">退出登录</span>
</div>
<div  style="padding-bottom: 50px">
    <table width="90%" class="frame"cellspacing="10px"  >
        <tr style="height: 40px">
            <td  >
                <span><img src="../icon/gr_1.png" alt=""></span>
                <span>我的客户</span>
                <span class="arrow"><img src="../icon/jt.png" alt=""></span>
            </td>
        </tr>
        <tr style="height: 40px;">
            <td >
                <span><img src="../icon/gr_1.png" alt=""></span>
                <span>我的客户</span>
                <span class="arrow"><img src="../icon/jt.png" alt=""></span>
            </td>
        </tr>
        <tr style="height: 40px;">
            <td >
                <span><img src="../icon/gr_1.png" alt=""></span>
                <span>我的客户</span>
                <span class="arrow"><img src="../icon/jt.png" alt=""></span>
            </td>
        </tr>
        <tr style="height: 40px;">
            <td >
                <span><img src="../icon/gr_1.png" alt=""></span>
                <span>我的客户</span>
                <span class="arrow"><img src="../icon/jt.png" alt=""></span>
            </td>
        </tr>
        <tr style="height: 40px;">
            <td >
                <span><img src="../icon/gr_1.png" alt=""></span>
                <span>我的客户</span>
                <span class="arrow"><img src="../icon/jt.png" alt=""></span>
            </td>
        </tr>
        <tr style="height: 40px;">
            <td >
                <span><img src="../icon/gr_1.png" alt=""></span>
                <span>我的客户</span>
                <span class="arrow"><img src="../icon/jt.png" alt=""></span>
            </td>
        </tr>
        <tr style="height: 40px;">
            <td >
                <span><img src="../icon/gr_1.png" alt=""></span>
                <span>我的客户</span>
                <span class="arrow"><img src="../icon/jt.png" alt=""></span>
            </td>
        </tr>
        <tr style="height: 40px;">
            <td >
                <span><img src="../icon/gr_1.png" alt=""></span>
                <span>我的客户</span>
                <span class="arrow"><img src="../icon/jt.png" alt=""></span>
            </td>
        </tr>
        <tr style="height: 40px;">
            <td >
                <span><img src="../icon/gr_1.png" alt=""></span>
                <span>我的客户</span>
                <span class="arrow"><img src="../icon/jt.png" alt=""></span>
            </td>
        </tr>


    </table>
</div>

<div class="cell-navigation" >
    <a href="First-page.html"><img src="../icon/nav10.png" alt=""><p>小滴服务</p></a>
    <a href="EnterPrise-Project.html"><img src="../icon/nav20.png" alt=""><p>企业项目</p></a>
    <a href="Service-process.html"><img src="../icon/nav30.png" alt=""><p>服务流程</p></a>
    <a href="Platform-Style.html"><img src="../icon/nav40.png" alt=""><p>平台风采</p></a>
    <a href="Myself.html"><img src="../icon/nav51.png" alt=""><p style="color: red">我的小滴</p></a>
</div>

</body>
</html>

내가 만난 문제 및 요약

------------------테이블 및 테이블 셀-----------------
상위 요소 스타일 표시 제공: 테이블, 하위 요소 제공 스타일 테이블 셀은 9-그리드 탐색 효과를 얻을 수 있습니다.
구체적인 세부 사항: 1. 일반적으로 사용되는 태그는 태그가 포함된 div를 포함합니다.
2. 상위 요소인 div가 너비와 높이를 지정하지 않으면 하위 요소 a의 너비와 높이에 의해 결정됩니다. 3.
a 태그 vertical-align: middle을 사용하여 이 요소를 부모 요소 div의 중간에 배치할 수 있습니다.

---------------------공개 스타일 섹션 -------------------------- --- 먼저 모든 요소는 모든 레이블 요소를 참조하는
내부 및 외부 테두리
{ padding: 0; margin: 0; } 로 이동합니다.


두번째

일반 콘텐츠 의 표시 방식에 영향을 주지 않고 화면 상단과 하단의 헤드에 제목 표시줄과 꼬리에 내비게이션 바를 고정하는 방법
- 위치: 위치 고정 후 테두리 마진이나 패딩 거리 제목 표시줄 또는 탐색 열 너비로 가장 가까운 블록

----------------------- 직위 사용 ----------------------- -
이 프로젝트에서 위치는 절대 위치 지정(absolute), 상대 위치 지정(relative positioning relative) 및
브라우저 창에 대한 상대 위치 지정(absolute positioning fixed)을 사용합니다.

bsolute는
정적 위치가 아닌 첫 번째 상위 요소에 상대적으로 위치가 지정된 절대 위치 요소를 생성합니다.
요소의 위치는 "left", "top", "right" 및 "bottom" 속성으로 지정됩니다.

fixed는
브라우저 창에 상대적으로 배치된 절대적으로 배치된 요소를 생성합니다.
요소의 위치는 "left", "top", "right" 및 "bottom" 속성으로 지정됩니다.

상대적
정상 위치를 기준으로 상대적으로 배치된 요소를 생성합니다.
따라서 "left:20"은 요소의 LEFT 위치에 20픽셀을 추가합니다.

Baidu Netdisk 공유 링크
링크: https://pan.baidu.com/s/1QRfrfLvk4RCIr6SSXBHR2w
추출 코드: jzs2
이 콘텐츠를 복사한 후 작동이 더 편리한 Baidu Netdisk 모바일 앱을 엽니다.

추천

출처blog.csdn.net/qq_40259528/article/details/110402869
추천
행
반응 라우터 같은 길, 다른 매개 변수 페이지가 새로 고쳐지지 않습니다
, MP의를 mybatisplus의 springboot을 이해하기 간단한
Qtum Qtum, QIP-7 출시 : Qtum 가상 머신 업그레이드, 5 가지 주요 업데이트로 포괄적으로 개발 성능 향상
LeetCode 20191111
어떻게 JSP 루프에 사용 루프 체크 박스에?
《TCP/IP网络编程》阅读笔记--基于TCP的服务器端/客户端
인형 비브라토 자동 일괄 업로드 비디오
파이썬의 os 모듈은 회고
어떻게 HH에서 카운트 다운 타이머를 표시하기 : MM : SS (영업 시간 : 분 : 초)
[Opencv-python] cv2.bitwise_and (...) 이미지 산술 연산-비트 AND 연산
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com