html+css 小案例(一)

前端 专栏收录该内容
6 篇文章 2 订阅

文章目录

index.html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Demo_Test</title>
    <link rel="stylesheet" href="css/Dec.css">
</head>
<body>

<div class="header" >
    <div class="logo" >
        <img src="Photo/01-M1.jpg" height="50" width="142"  />
    </div>
    <nav class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Why Actority?</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>

        </ul>
    </nav>
    <nav class="But">
        <ul><li><a href="#">FOR ACTORS</a> </li></ul>
    </nav>
</div>

<div class="bodyone">
      <div class="logo1">
          <img src="Photo/01-p1.jpg" height="82" width="571"/>
          <div  class="content1" id="content1"  style="background-color:#1e2831;height:116px;width:300px;">
              <p class="title1">Best talents in one place</p>
              <p class="character1">Suspendisse potenti Morbi sed maurs dui.<br>
                  Duis sedligula odio,ac sollicitudin leo.<br>
                  Etiam eget erat nisl,nec rhoncus risus.
              </p>
          </div>
      </div>

    <div  class="content2" id="content2"  style="background-color:#1e2831;height:116px;width:300px;">
        <p class="title2">High-quality services</p>
        <p class="character2">Nulla quis massa eros,placerat<br>
            condimentum leo.Curabitur semper lectus<br>
            eu nisi lacinia pretium.</p>
    </div>
    <div   class="content3" id="content3"  style="background-color:#1e2831;height:116px;width:300px;">
        <p class="title3">Lowest prices</p>
        <p class="character3">Sed dui mauris,semper non sodales sed,<br>
            dignissim ac magna,In non viverra turpis.<br>
            Donecturpis est,iaculis in varius nec.
        </p>
    </div>
</div>

<div class="bodytwo">
    <div class="logo2">
        <img src="Photo/01-home.jpg" height="40" width="448"/>
    </div >
    <nav><a class="button1" href="#1">SEND THE SPEC</a></nav>
    <div><p class="S">OR</p></div>
    <nav><a class="button2" href="#2">CONTACT US</a></nav>


</div>

<div class="bodythree">
      <div>
          <p class="T">Casting Actority:IMG Group</p>
      </div>
      <div class="logo3">
          <img src="Photo/01-p2.jpg" height="190" width="299"/>
      </div>
    <div><p class="R">Excepteur sin:occaecat cupidatat non proident,<br>
        sunt in culpa qui officia.</p></div>
     <div>
         <p class="P">Featured Casting Work</p>
         <p class="L">View more</p>
     </div>

    <div class="Adobe">
            <div class="a1" ><img src="Photo/01-p3%20.jpg" height="90" width="140"/></div>
            <div  class="a2"><img src="Photo/01-pS.jpg" height="91" width="140"/></div>
            <div  class="a3"><img src="Photo/01-p4.jpg" height="90" width="140"/></div>
            <div class="a4"><img src="Photo/01-p5.jpg" height="90" width="140"/></div>
            <div  class="a5"><img src="Photo/01-p5%206.jpg" height="90" width="140"/></div>
            <div  class="a6"><img src="Photo/01-p7.jpg" height="90" width="140"/></div>
            <div  class="a7"><img src="Photo/01-p8.jpg" height="90" width="140"/></div>
            <div class="a8"><img src="Photo/01-p9.jpg" height="90" width="140"/></div>

    </div>

</div>

<div class="bodyfour">
    <div ><p class="W" >What People Are Saying</p></div>
    <div class="TF"><img src="Photo/01-t1.jpg" height="200" width="159"/></div>
    <div>
        <p class="J">Lorem ipsum dolor sit amet,<br>consectetur adipisicing elit,sed do<br>eiusmod tempor incididunt!
        </p>
    </div>
      <div><p class="Q">//Joe Doe,Actor</p></div>
    <div class="logo4"><img src="Photo/F1.jpg" height="60" width="60"/></div>
    <div><p class="B"> // Garry Doe,Producer</p>
    </div>
    <div>
        <p class="A">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do<br>eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut<br>enim ad minim veniam,quis nostrud.
        </p></div>
    <div class="logo5"><img src="Photo/F2.jpg" height="60" width="60"/></div>
    <div><p class="C">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do<br>eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut<br>enim ad minim veniam,quis nostrud.</p></div>
    <div><p class="D"> // Garry Doe,Producer</p></div>
</div>



<div class="bodyfive">
      <div>
          <p class="K">Recent Posts</p>
      </div>
    <div class="logo6"><img src="Photo/01-s3.jpg" height="240" width="399"/></div>
    <div><p class="acm">Post Title Example</p></div>
    <p class="adb">posted on <span style="color:#dc4545">April,15</span> by <span style="color:#dc4545">admin</span></p>
    <p class="RNG">Mauris lobritis vehicula ultricies.Cum sociisnatoque penaatibus et<br>magnis dis parturientmontes,nascetur ridiculus mus.Nunc tellus<br>nisi,pharetra id elementum non,aliquam vel tellus.</p>
    <p class="TL">25 comments //397 views</p>
    <nav><a class="button3" href="#1">READ MORE</a></nav>
    <p class="FPX">Post Title Example</p>
    <div class="logo7"><img src="Photo/01-s2.jpg" height="100" width="160"/></div>
    <p class="flash">posted on <span style="color:#dc4545">April,15</span> by <span style="color:#dc4545">admin</span></p>
    <p class="IG">Mauris lobritis vehicula ultricies.Cum sociis<br>natoque penaatibus et magnis dis parturient<br>montes,nascetur ridiculus mus.
        </p>
    <p class="OK">25 comments //397 views</p>
    <P CLASS="JDG">- - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - - -</P>
    <div class="logo8"><img src="Photo/s4.jpg" height="100" width="160"/></div>
    <div><p class="CTF">Post Title Example</p></div>
    <p class="player">posted on <span style="color:#dc4545">April,15</span> by <span style="color:#dc4545">admin</span></p>
    <p class="LPL">Mauris lobritis vehicula ultricies.Cum sociis<br>natoque penaatibus et magnis dis parturient<br>montes,nascetur ridiculus mus.
    </p>
    <p class="LCK">25 comments //397 views</p>
    <p class="JK">View all posts</p>


</div>


<div class="bodysix">
    <div class="end">
        <input type="text" value="Enter Your Email Address"  style=" font-size:15px;color:#5a6066;border-radius:3px;width: 300px ;height: 40px">
    </div>
    <p class="CF">About</p>
    <p class="NZ">Recent tweets</p>
    <p class="JS">Etiam cursus libero in libero consequat<br>consequat,Nullam fringilla sapien massa.Nam<br>velit nisl,bibendum at placerat at,pretium sed<br>magna.</p>
    <nav><a class="button4" href="#1">SEND THE SPEC</a></nav>
    <p class="LJ"><span style="color: #dc4545">@bestwebsoft</span>velit,vitae tincidunt orci.Proin<br>vitae auctor lectus.<span style="color: #dc4545">http://bestwebsoft.com/</span>
    </p>
    <p class="NS">posted 2 days ago</p>
    <p class="SF"><span style="color: #dc4545">@bestwebsoft</span>velit,vitae tincidunt orci.Proin<br>vitae auctor lectus.<span style="color: #dc4545">http://bestwebsoft.com/</span></p>
    <p class="COOL">posted 2 days ago</p>
    <p class="beg" >Newsletter Signup</p>
    <p class="last">Etiam cursus libero in libero consequat<br>consequat.</p>
    <nav><a class="button5" href="#1">SUBMIT</a></nav>
</div>


<div class="bodyseven">
    <div class="logo12"><img src="Photo/01-e1.jpg" height="86" width="146"/></div>
    <div class="logo13"><img src="Photo/01-e2.jpg" height="48" width="301"/></div>
    <div ><p class="Z"> <span style="color:#999999 ">Design with love by</span> <span style="color: #1e2831">BestWebSoft</span></p>
    </div>
</div>
</body>
</html>

Dec.css

*{
    margin:0;
    padding: 0;/*边缘消失*/
}
body{
    background-color: #f8f8f8;
    width: 1200px;
    height: 2250px;
    margin: 0 auto;/*上下间距设计*/
}
.header{
    width: 100%;
    height: 88px;
    background-color: #2a3743;
}
/*!!!第一部分*/
/*图片*/
.logo{
    position: relative;
    top:20px;
    float: left;
    margin-left: 120px;
}
.nav ul{
    margin:0 auto;
    width: 1000px;
    height: 50px;
}
/*菜单四个标签栏*/
.nav ul li{
    list-style: none;
    float: left;
}
.nav ul li a:link,.nav ul li a:visited{
    display: block;
    text-decoration: none;
    text-align:center;
    line-height: 92px;
    width: 110px;
    height: 70px;
    font-size:18px;
    color:#FFFFFF;


}
.nav ul li a:hover,.nav ul li a:active{
    background-color: #404b56;
}
/*菜单第五个标签栏*/
.But ul li{
    list-style: none;
    float: right;
}
.But ul li a:link,.But ul li a:visited{
    display:block;
    font-size:18px;
    text-decoration: none;
    margin-right: 96.5px;
    color:#FFFFFF;
    width: 115px;
    height: 25px;
    position: relative;
    top: -18px;
}
.But ul li a:hover,.But ul li a:active{
    background-color: #404b56;
}
/*!!!第二部分*/
.bodyone{
    margin: 0 auto;
    width: 1200px;
    height: 361px;
    background-color:#3b4e5f;
}
/*图片*/
.logo1{
    position: relative;
    top:54px;
    float: left;
    margin-left: 120px;
}
.content1{
    position: absolute;
    top:130px;
    left: -1px;
}
.content2{
    position: absolute;
    top:271.8px;
    right:600px;
}
.content3{
    position: absolute;
    top:271.5px;
    right:260px;
}
/*第一个框中字体和标题*/
.title1{
    font-size:15px;
    color:white;
    position:relative;
    top: 16px;
    float:left;
    margin-left: 43px;
}
.character1{
    font-size: 15px;
    color:#999999;
    position: relative;
    top:25px;
    float:left;
    margin-left:19px;
}
/*第二个框中字体和标题*/
.title2{
    color:#FFFFFF;
    font-size: 15px;
    position:relative;
    top:16px;
    float:left;
    margin-left: 43px;

}
.character2{
    font-size: 15px;
    color:#999999;
    position: relative;
    top:25px;
    float:left;
    margin-left:19px;
}
/*第三个框中字体和标题*/
.title3{
    color:#FFFFFF;
    font-size: 15px;
    position:relative;
    top:16px;
    float:left;
    margin-left: 43px;

}
.character3{
    font-size: 15px;
    color:#999999;
    position: relative;
    top:25px;
    float:left;
    margin-left:19px;
}

/*!!!第三部分*/
.bodytwo{
    margin: 0 auto;
    width: 1200px;
    height: 80px;
    background-color: #fdfdfd;
}
.logo2{
    position:relative;
    top:20px;
    float:left;
    margin-left:119px;
}
.button1:link,.button1:visited{
    position: absolute;
    text-decoration: none;
    margin-left: 225px;
    margin-top: 20px;
    padding: 10px 18px;
    font-weight: bold;
    font-size: 13px;
    color:white;
    background-color: #dd4747;
    border-radius:5px;    /*设置圆弧*/
    box-shadow: 0px 2px 2px #888888;
    border-style: solid;
    border-color:#bf3c3c;
    border-top-color: #e77c7c;
}
.S{
    color:#dddddd;
    font-weight: bold;
    font-size: 15px;
    position: relative;
    top:30px;
    right:-377px;
}
.button2:link,.button2:visited{
    position:absolute;
    text-decoration: none;
    margin-left: 409.5px;
    margin-top: 2.0px;
    padding: 10px 18px ;/*内置文字到边框的距离*/
    font-weight: bold;
    font-size: 13px;
    color:white;
    background-color: #4398db;
    border-radius:5px;    /*设置圆弧*/
    box-shadow: 0px 2px 2px #888888;/*设置阴影*/
    border-style: solid;
    border-color:#4398db;
    border-top-color: #59a8e1;
}

/*!!!第四部分*/
.bodythree{
    margin:0 auto;
    width:1200px;
    height:370px;
    background-color: #e7e9eb;
}
.T{
    font-weight: bold;
    font-size: 15px;
    color:#5a6066;
    postion:relative;
    float:left;
    line-height: 120px;
    margin-left: 120px;
}
.logo3{
    position:absolute;
    top:18px;
    float:left;
    line-height: 1560px;
    margin-left:120px;
}
.R{
    font-size: 14px;
    font-weight: bold;
    color:#999999;
    position:absolute;
    margin-top: 292px;
    margin-left: 120px;
}
.P{
  font-size: 15px;
  font-weight: bold;
    color:#5a6066;
    position: relative;
    float:right;
    line-height: 124px;
    margin-right: 570px;
}
.L{
    font-size: 15px;
    font-weight: bold;
    color:#999999;
    position:relative;
    float: right;
    line-height: 126px;
    margin-right: -623px;
}
.a1{
    width:400px;
    height:200px;
    overflow-y:hidden;  /*只出现水平滚动条*/
    position: relative;
    margin-top:-34px;
    float:right;
    margin-right: 320px;
}
.a2{
    width:400px;
    height:200px;
    position: relative;
    margin-top:-200px;
    float:right;
    margin-right: 159px;
}
.a3{
    width:400px;
    height:200px;
    position: relative;
    margin-top:-200px;
    float:right;
    margin-right: -2px;
}
.a4{
    width:400px;
    height:200px;
    position: relative;
    margin-top:-200.5px;
    float:right;
    margin-right: -162px;
}
.a5{
    width:400px;
    height:200px;
    position: relative;
    margin-top:-100.25px;
    float:right;
    margin-right: -162px;
}
.a6{
    width:400px;
    height:200px;
    position: relative;
    margin-top:-100px;
    float:right;
    margin-right: -240px;
}
.a7{
    width:400px;
    height:200px;
    position: relative;
    margin-top:-100px;
    float:right;
    margin-right: -240px;
}
.a8{
    width:400px;
    height:200px;
    position: relative;
    margin-top:-100px;
    float:right;
    margin-right: -238px;
}

/*第五部分*/
.bodyfour{
    margin:0 auto;
    width:1200px;
    height:358px;
    background-color: #fdfdfd;
}
.W{
    font-size: 15px;
    font-weight: bold;
    color:#6f7479;
    line-height: 135px;
    position: relative;
    left: 120px;
}
.TF{
    position:relative;
    top:-44px;
    float:left;
    margin-left:120px;
}
.J{
    font-weight: bold;
    font-size: 15px;
    color:#5a6066;
    postion:relative;
    float:left;
    margin-left: 30px;
    margin-top: -46px;
}
.Q{
    font-weight: bold;
    font-size: 15px;
    color:#999999;
    postion:relative;
    float:right;
    margin-right: 780px;
    line-height: 150px;
    margin-top: -52.5px;
}
.logo4{
    position:absolute;
    top:980px;
    margin-left: 590px;
}
.B{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1056px;
    margin-left: 668px;
    color:#999999;
}
.A{
    position:absolute;
    top:980px;
    margin-left: 668px;
    color:#5a6066;
    font-size: 15px;
    font-weight: bold;
}
.logo5{
    position:absolute;
    top:1124px;
    margin-left: 590px;
}
.C{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1125px;
    color:#5a6066;
    margin-left: 668px;
}
.D{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1200px;
    color:#999999;
    margin-left: 668px;
}
/*第六部分*/
.bodyfive{
    margin: 0 auto;
    width:1200px;
    height:612px;
    background-color: #e5e7e9;
}
.K{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1320px;
    color:#a2a6a9;
    margin-left: 120px;
}
.logo6{
    position:absolute;
    top:1350px;
    margin-left: 120px;
}
.acm{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1610px;
    color:#373f47;
    margin-left: 120px;
}
.adb{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1635px;
    color:#5a6066;
    margin-left: 120px;
}
.RNG{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1665px;
    color:#454c52;
    margin-left: 120px;
}
.TL{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1750px;
    color:#5a6066;
    margin-left: 120px;
}
.button3:link,.button3:visited{
    position:absolute;
    text-decoration: none;
    margin-left: 405px;
    top: 1735px;
    padding: 12px 18px ;/*内置文字到边框的距离*/
    font-weight: bold;
    font-size: 15px;
    color:white;
    background-color: #db4343;
    border-radius:5px;    /*设置圆弧*/
    box-shadow: 0px 2px 2px #888888;/*设置阴影*/
    border-style: solid;
    border-color:#bf3c3c;
    border-top-color: #e77c7c;
}
.FPX{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1350px;
    color:#373f47;
    margin-left: 770px;
}
.logo7{
    position:absolute;
    top:1350px;
    margin-left: 590px;
}
.flash{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1370px;
    color:#5a6066;
    margin-left: 770px;
}
.IG{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1405px;
    color:#454c52;
    margin-left: 770px;
}
.OK{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1480px;
    color:#5a6066;
    margin-left: 770px;
}
.JDG{
    color:#5a6066 ;
    position: absolute;
    top:1540px;
    margin-left: 590px;
}
.logo8{
    position:absolute;
    top:1585px;
    margin-left: 590px;
}
.CTF{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1585px;
    color:#373f47;
    margin-left: 770px;
}
.player{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1610px;
    color:#5a6066;
    margin-left: 770px;
}
.LPL{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1645px;
    color:#454c52;
    margin-left: 770px;
}
.LCK{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1715px;
    color:#5a6066;
    margin-left: 770px;
}
.JK{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1320px;
    color:#5a6066;
    margin-left: 990px;
}

/*第七部分*/
.bodysix{
    margin: 0 auto;
    width:1200px;
    height:287px;
    background-color:#fbfbfb;
}
.end{
    position: absolute;
    font-weight: bold;
    top:2005px;
    margin-left: 775px;
}
.CF{
    position: absolute;
    font-size:18px;
    font-weight: bold;
    top:1925px;
    color:#373f47;
    margin-left: 120px;
}
.NZ{
    position: absolute;
    font-size:18px;
    font-weight: bold;
    top:1925px;
    color:#373f47;
    margin-left: 450px;
}
.JS{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1950px;
    color:#454c52;
    margin-left: 120px;
}
.button4:link,.button4:visited{
    position: absolute;
    text-decoration: none;
    margin-left: 120px;
    top: 2050px;
    padding: 11px 18px;
    font-weight: bold;
    font-size: 13px;
    color:white;
    background-color: #dd4747;
    border-radius:5px;    /*设置圆弧*/
    box-shadow: 0px 2px 2px #888888;
    border-style: solid;
    border-color:#bf3c3c;
    border-top-color: #e77c7c;
}
.LJ{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1950px;
    color:#454c52;
    margin-left: 450px;
}
.NS{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:2010px;
    color:#454c52;
    margin-left: 450px;
}
.SF{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:2055px;
    color:#454c52;
    margin-left: 450px;
}
.COOL{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:2105px;
    color:#454c52;
    margin-left: 450px;
}
.beg{
    position: absolute;
    font-size:18px;
    font-weight: bold;
    top:1925px;
    color:#454c52;
    margin-left: 770px;
}
.last{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:1956px;
    color:#454c52;
    margin-left: 770px;
}
.button5:link,.button5:visited{
    position:absolute;
    text-decoration: none;
    margin-left: 770px;
    top: 2058px;
    padding: 10px 20.5px ;/*内置文字到边框的距离*/
    font-weight: bold;
    font-size: 13px;
    color:white;
    background-color: #4398db;
    border-radius:4px;    /*设置圆弧*/
    box-shadow: 0px 2px 2px #888888;/*设置阴影*/
    border-style: solid;
    border-color:#4398db;
    border-top-color: #59a8e1;
}


/*第八部分*/
.bodyseven{
    margin:0 auto;
    width: 1200px;
    height: 86px;
    background-color:#f5f5f5;
}
.logo12{
    position:absolute;
    top:2175px;
    margin-left: 130px;
}
.logo13{
    position:absolute;
    top:2193px;
    margin-left: 768px;
}
.Z{
    position: absolute;
    font-size:15px;
    font-weight: bold;
    top:2208px;
    margin-left: 495px;
}

效果图:
在这里插入图片描述在这里插入图片描述在这里插入图片描述

点击下载

点击下载

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页

打赏作者

ア灬格子衬衫々

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值