静态页面练习

最新推荐文章于 2024-10-15 23:57:40 发布

weixin_49596018

最新推荐文章于 2024-10-15 23:57:40 发布

阅读量338

点赞数 1

文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_49596018/article/details/110956900

版权

静态页面笔记
效果图：
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目五</title>
    <link rel="stylesheet" href="./five.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li>HOME PAGE</li>
                <li>ABOUT US</li>
                <li>ARTICLES</li>
                <li>CONTACT US</li>
                <li>SITE MAP</li>
            </ul>
        </nav>
        <section>
            <p>
                BUSINESS CO .
            </p>
            <p>
                BE SUCCESSFUL,
            </p>
            <P>
                IT`S EASIER THAN YOU THINK
            </P>
            <P>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est dolorum consequatur
            </P>
            <P>
                dolores blanditiis repudiandae, animi fuga laboriosam vel sed excepturi
            </P>
            <P>
                exercitationem velit numquam placeat autem ea unde nemo natus explicabo?
            </P>
            <p>
                <a href="#1">KNOW MORE</a>
            </p>
            <div class="three-brother">
                <div>
                    <h2>Business Line</h2>
                    <div>
                        <img src="./images/img1.jpg" alt="">
                    </div>
                    <div>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, similique esse animi
                        exercitationem repellendus
                    </div>
                </div>
                <div>
                    <h2>About Template</h2>
                    <div>
                        <img src="./images/img2.jpg" alt="">
                    </div>
                    <div>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, similique esse animi
                        exercitationem repellendus
                    </div>
                </div>
                <div>
                    <h2>Business Plans</h2>
                    <div>
                        <img src="./images/img3.jpg" alt="">
                    </div>
                    <div>
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, similique esse animi
                        exercitationem repellendus
                    </div>
                </div>
            </div>
        </section>
    </header>
    <article>
        <div>
            <h2>Be Successful</h2>
            <p class="need10px">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde nobis asperiores voluptatum fugit vel nisi
                distinctio suscipit itaque hic nulla veniam quibusdam doloremque, aspernatur velit nostrum atque!
                Voluptas, pariatur aut?
            </p>
            <p class="need10px">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam explicabo corporis dolores? Debitis
                voluptatibus enim, dolorem cum magni quod eaque voluptate labore laudantium quia! Quaerat consectetur
                praesentium veritatis
            </p>
        </div>
        <div>
            <div class="changPosition">
                <span class="titles">
                    Tesitmonials
                </span>
                <span>
                    <img src="./images/prev.gif" alt="">
                </span>
                <span>
                    <img src="./images/next.gif" alt="">
                </span>
            </div >
            <!-- 下方第二个div -->
            <div class="nth2">
                <div>
                    <img src="./images/slide-img.jpg" alt="">
                </div>
                <div>
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi vel commodi cumque dolores magni esse. Optio, odio obcaecati voluptatem natus fugiat quae! Eos libero minus culpa fuga eum, consequatur velit!
                   <p>
                       manager
                   </p>
                   <p>
                       MARKUS FISHER
                   </p>
                </div>
            </div>
        </div>
    </article>
    <footer>
        <div>copyright-type in your name here</div>
        <div>
            <a href="#1">website  </a>
                <span>template designed by templateMonster.com</span>
                &nbsp;&nbsp;  &nbsp;&nbsp;  &nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;| &nbsp;&nbsp;
        </div>
        <div>
            <a href="#1">3D Modeles </a> <span>probided by templates.com</span>
        </div>
    </footer>
</body>

</html>

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}
span{
    display: inline-block;
}
header{
    width: 1000px;
    height: 723px;
    background-image: url("./images/header-bg.jpg");
    background-size: 100%;
    margin: 0 auto;
  
    
   
}
header ul{
    display: flex;
    color: white;
}
header li{
    list-style: none;
    margin-top: 25px;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius:10px;
    margin-right: 60px;
    font-size: 10px;
    
}
header li:nth-of-type(1){
    background-color: white;
    color: black;
    margin-left: 110px;
}
header li:hover{
  
    background-color: white;
    color: black;
    cursor: pointer;
}

header p:nth-of-type(1){
    margin-top: 30px;
    color: black;
    font-size: 70px;
    margin-left:100px;
}
header p:nth-of-type(2){
    font-size: 36PX;
    margin-left:100px;
    color: #BC2644;
}
header p:nth-of-type(3){
    font-size: 36PX;
    margin-left:100px;
}
header p:nth-of-type(4){
    font-size:10PX;
    margin-left:100px;
    margin-top: 30px;
}
header p:nth-of-type(5){
    font-size:10PX;
    margin-left:100px;
    margin-top: 10px;
}
header p:nth-of-type(6){
    font-size:10PX;
    margin-left:100px;
    margin-top: 10px;
}  
header p:nth-of-type(7){
    font-size:10PX;
    margin-left:100px;
    margin-top: 20px;
    display: inline-block;
    width: 106px;
    height: 30px;
    color: white;
    background-color: #BC2644;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:20px;
}  
header p:nth-of-type(7)>a{
    color: white;
}
.three-brother>div{
    width: 270px;
    height: 270px;
    background:linear-gradient(#ffc535,#ff761f);
    margin-right: 30px;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
    padding-left: 25px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
}
.three-brother{
    display: flex;
    margin-left: 70px;
    margin-top: 55px;
}
.three-brother img{
    margin-top:15px;
    margin-bottom: 15px;
}
article{
    background-color: #f8f8f8;
    width: 1000px;
    height:350px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left:70px;
    padding-right: 70px;
    padding-top: 70px;
    display: flex;
}
article div:nth-of-type(1){
    width: 400px;
}
article>div:nth-of-type(1)>p:nth-of-type(1){
    margin-top: 20px;
    margin-bottom: 20px;
}
article>div:nth-of-type(1)>p:nth-of-type(2){
    margin-top: 20px;
    margin-bottom: 50px;
}
/* 右边第二个盒子 */
article>div:nth-of-type(2){
    margin-left: 80px;
}
.titles{
    font-size: 24px;
    font-weight: 800;
}
.changPosition{
    display: flex;
    justify-content: center;
    align-items: center;
}
.changPosition>span:nth-of-type(2){
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-left: 100px;
  
}
.changPosition>span:nth-of-type(3){
    width: 20px;
    height: 20px;
}

.nth2{
    display: flex;
    width: 410px;
    overflow: hidden;
}
.nth2>div:nth-of-type(1){
    margin-top: 40px;
   
}
.nth2>div:nth-of-type(2){
    margin-top:50px;
    margin-left: 30px;
    font-size: 10px;
    color: #9e9ec2;
   
}
.nth2>div:nth-of-type(2)>P:nth-of-type(1){
   font-size: 14PX;
   color: black;
   display: flex;
   justify-content: flex-end;
   
}
.nth2>div:nth-of-type(2)>P:nth-of-type(2){
    font-size: 16PX;
    color: black;
    display: flex;
    justify-content: flex-end;
 }
 .need10px{
     font-size: 10px;
     color: #8c8c8c;
 }
 /* 脚步设置 */
 footer{
     color: white;
     display: flex;
     align-items: center;
     width: 1000px;
     height: 90px;
     margin: 0 auto;
     background-color: black;
     font-size: 10px;
     justify-content: space-evenly;
 }
 footer a{
     display: inline-block;
     color: white;
     font-size: 10px;
     text-decoration: none; 
     border-bottom: 1px solid white; 
 }片