课后作业静态网页制作-仿Argo官网

最新推荐文章于 2022-07-19 18:26:04 发布

dj5156

最新推荐文章于 2022-07-19 18:26:04 发布

阅读量556

点赞数 1

分类专栏： html+css学习作业

本文链接：https://blog.csdn.net/dj5156/article/details/51765529

版权

html+css学习作业专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="global.css">
</head>
<body>
  <div class="bg"></div>
  <div class="page">
    <div class="header">
      <div class="nav">
        <img src="./images/logo.png" alt="">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">PRODUCTS</a></li>
          <li><a href="#">TECHNOLOGY</a></li>
          <li><a href="#">PRICING</a></li>
          <li><a href="#">CONTACTS</a></li>
        </ul>
      </div>
      <div class="show">
        <img src="./images/slide-3.jpg" alt="">
        <p>GROWING CLEAN AND FULL OF HEALTH PRODUCTS</p>
        <div class="lborder"></div>
        <div class="rborder"></div>
      </div>
    </div>
    <div class="main">
      <div class="lside">
        <div class="lside_up">
          <h3>Our products:</h3>
          <div class="product pre3">
            <img src="./images/page2-img6.jpg" alt="">
            <p><span>Tomatoes</span><br>Vitamus handrerit mauris
              ut du gravida ut viverra lectus tincidunt.
             </p>
          </div>
          <div class="product pre3">
            <img src="./images/page2-img6.jpg" alt="">
            <p><span>Tomatoes</span><br>Vitamus handrerit mauris
              ut du gravida ut viverra lectus tincidunt.
             </p>
          </div>
          <div class="product pre3">
            <img src="./images/page2-img6.jpg" alt="">
            <p><span>Tomatoes</span><br>Vitamus handrerit mauris
              ut du gravida ut viverra lectus tincidunt.
             </p>
          </div>
          <div class="product last">
            <img src="./images/page2-img6.jpg" alt="">
            <p><span>Tomatoes</span><br>Vitamus handrerit mauris
              ut du gravida ut viverra lectus tincidunt.
             </p>
          </div>
        </div>
        <div class="lside_bm">
          <p><a href="#">Read more ></a></p>
          <h3>Need a useful advice from breeder?</h3>
            <h6>WE WANT TO RAISE YOUR CROPS & LIVESTOCK!</h6>
          <p class="john">
            <img src="./images/quote-before.png" alt="">
            <span>This website template has several pages:Home,
            Products,Technology,Pricing,Contacts</span>
            (note that contact us from doesn't work)Vivams hendrerit
            mauris ut dui.gravida ut viverra lectus Vivams hendrerit
            mauris ut dui.gravida ut viverra lectus Vivams hendrerit
            mauris ut dui.gravida ut viverra lectus Vivams hendrerit
            mauris ut dui.gravida ut viverra lectus mauris ut dui.
            gravida
            <img src="./images/quote-after.png" alt="">
            <span class="name">John Smith<i>(breeder)</i></span>
          </p>
          <img class="oldman" src="./images/banner-box-img.png" alt="">
        </div>
      </div>
      <div class="rside">
        <div class="rside_up">
          <h3>Welcome!</h3>
          <p class="firp">AgroPlus is one of<a href="#">Free website templates</a>
            created by <br>TemplatesMonster.com team.
          </p>
          <p class="secp">
            This website template is optimized for 1280x1024 screen resolution.
            It is also XHTML & CSS valid. The PSD source files of this
            The PSD source files of this<a href="">AgroPlus</a>
            The PSD source files of this The PSD source files of this
          </p>
        </div>
        <div class="rside_bm">
          <p><a href="#">Read more ></a></p>
          <h3>Our programs:</h3>
          <ul>
            <li>Agronomic Practices</li>
            <li>Biotechnology</li>
            <li>Biotechnology Research</li>
            <li>Benefits of Biotechnology</li>
            <li>The Regulatory Process</li>
            <li>Breeding</li>
            <li>Learning Centers</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="copyright">
        <p>
          &copy;2012 <span>AgroPlus</span> <br>
          Professional free web templates
          <a href="">at <br>www.websitetemplatesonline.com.
          |<br>Flashtemplates.com. </a>Flash Design-the Smart
          Choice. <br>
          <a href="#">Website Templates</a> by TempalteMonster.com
        </p>
      </div>
      <div class="arch">
        <h4>Achives:</h4>
        <ul>
          <li>October 2012</li>
          <li>September 2012</li>
          <li>August 2012</li>
          <li>July 2012</li>
        </ul>
      </div>
      <div class="link">
        <h4>Links:</h4>
        <ul>
          <li>Documentation</li>
          <li>Plugins</li>
          <li>SuggestIdeas</li>
          <li>SupportForum</li>
        </ul>
      </div>
      <div class="support">
        <h4>Support:</h4>
        <ul>
          <li>Special Proposition</li>
          <li>Free Phone</li>
          <li>Solutions</li>
        </ul>
      </div>
      <ul id="commu">
        <li><img src="./images/social-icon-1.png" alt=""></li>
        <li><img src="./images/social-icon-2.png" alt=""></li>
        <li><img src="./images/social-icon-3.png" alt=""></li>
      </ul>
    </div>
  </div>
</body>
</html>

css源代码：

*{
  padding:0;
  margin: 0;
}
body{
  width: 100%;
  background: url("./images/body-bg.gif") repeat;
  /*font-size: 0;*/
}
a{
  text-decoration: none;
}
.page{
  width: 952px;
  margin-right: auto;
  position: absolute;
  top: 80px;
  left: 22%;
  z-index: 2;
  background: url("./images/body-bg.gif") repeat;
}
.bg{
  width: 100%;
  height: 810px;
  background: url("./images/main-bg.jpg") no-repeat;
}
.header{
  width: 100%;
  height: 512px;
  margin: 0 auto;
  position: relative;
}
.nav{
  width: 888px;
  height: 108px;
  position: absolute;
  left: 0;
  top: 0;
  padding-left:32px;
  padding-right: 32px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.5);
}
.nav img{
  display: block;
  float: left;
  width: 200px;
  height: 65px;
  padding-top: 20px;
}
.nav li{
  list-style: none;
  float:left;
  padding-top: 45px;
  padding-left: 68px;
  font-size: 13px;
}
.nav li a{
  color: white;
  padding-top: 5px;
}
.nav li a:hover{
  background: url("./images/nav-active.png") no-repeat 3px -1px;
}
.show{
  width: 100%;
}
.show img{
  width: 100%;
}
.show p{
  font-size: 70px;
  font-weight: bolder;
  font-family: "segeo ui";
  color: white;
  width: 770px;
  height: 304px;
  text-align: center;
  position: absolute;
  left: 80px;
  bottom: 60px;
  z-index: 5;
}
.lborder{
  background: url("./images/slider-prev.png") no-repeat -32px 0;
  width: 32px;
  height: 403px;
  position: absolute;
  left: 0px;
  top: 108px;
  z-index: 4;
}
.rborder{
  background: url("./images/slider-next.png") no-repeat -32px 0;
  width: 32px;
  height: 403px;
  position: absolute;
  right: -1px;
  top: 108px;
  z-index: 4;
}
.lborder:hover{
  width: 32px;
  height: 403px;
  background: url("./images/slider-prev.png") no-repeat;
}
.rborder:hover{
  width: 32px;
  height: 403px;
  background: url("./images/slider-next.png") no-repeat;
}
a:hover{
  color: red!important;
}
.main{
  width: 873px;
  /*height: 724px;*/
  margin: 0 auto;
}
.lside{
  width: 632px;
  height: 100%;
  margin-right: 46px;
  float: left;
}
.lside_up{
  width: 632px;
  height: 317px;
  border-bottom: 1px solid gray;
}
.lside_up h3{
  width: 100%;
  height: 53px;
  padding-top: 40px;
  color: white;
  font-size: 25px;
}
.product{
  width: 152px;
  height: 225px;
  float: left;
}
.pre3{
    margin-right: 8px;
}
.product img{
  width: 152px;
  height: 122px;
}
.product p{
  width: 100%;
  font-size: 13px;
  color: grey;
  margin-top: 10px;
}
.product p span{
  color: #b5921c;
  line-height: 30px;
}
.last{
  margin-right: 0;
}
.lside_bm{
  width: 100%;
  height: 408px;
  clear: both;
  position: relative;
}
.lside_bm p{
  width: 100%;
  height: 45px;
  text-align: right;
  padding-top: 15px;
}
.lside_bm p a{
  font-size: 13px;
  color: white;
  text-decoration: underline;
}
.oldman{
  display: block;
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 6;
}
.lside_bm>.john{
  width: 345px;
  height: 295px;
  padding-left: 38px;
  font-size: 13px;
  color: grey;
  text-align: left;
  font-style: italic;
}
.lside_bm span{
  color: #b5921c;
  font-style: italic;
}
.lside_bm h3,.lside_bm h6{
  padding-left: 38px;
  color: white;
}
.lside_bm h3{
  font-weight: bold;
}
.lside_bm h6{
  font-size: 15px;
}
.lside_bm .john .name{
  display: block;
  margin-top: 25px;
  padding-left: 200px;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  color: white;
}
.lside_bm .john .name i{
  font-size: 14px;
  font-style: italic;
  font-weight: lighter;
}
.rside{
  width: 195px;
  float: right;
}
.ride_up{
  width: 100%;
  height:310px;
}
.rside_up h3{
  width: 100%;
  height: 52px;
  padding-top: 40px;
  color: #ae050a;
  font-size: 25px;
}
.rside_up .firp{
  color: #ae050a;
  font-size: 13px;
}
.firp a,.secp a{
  color: white;
  text-decoration: underline;
}
.secp {
  font-size: 14px;
  color: grey;
  padding-bottom: 13px;
  border-bottom: 1px solid grey;
}
.rside_bm {
  width:100%;
}
.rside_bm p:nth-child(1){
  width:100%;
  height: 54px;
  padding-top: 14px;
  text-align: right;
}
.rside_bm p:nth-child(1) a{
  font-size: 13px;
  color: white;
  text-decoration: underline;
}
.rside_bm h3{
  width: 100%;
  height: 50px;
  color: white;
  font-size: 28px;
}
.rside_bm ul{
  list-style:inside url("./images/list-1-marker.gif");
}
.rside_bm li{
  font-size: 15px;
  padding: 5px 0;
  color: grey;
  border-bottom: 1px solid grey;
}
.rside_bm li:nth-child(7){
  border-width: 0;
}
.footer{
  width: 100%;
  border-top: 3px solid grey;
  clear: both;
}
.copyright{
  font-size: 13px;
  color: grey;
  width: 300px;
  height: 205px;
  float: left;
  margin-top: 20px;
}
.copyright span{
  font-size: 20px;
  font-weight: bolder;
  font-family: "Impact";
  text-shadow: 1em,1em,0.5em;
}
.copyright p a{
  text-decoration: underline;
  color: grey;
}
.arch{
  float: left;
}
.link{
  float: left;
}
.support{
  float: left;
}
.commu{
  float: right;
}
.footer ul{
  list-style: inside url("./images/list-1-marker.gif");
  margin-left:45px;
}
.footer li{
  font-size: 14px;
  color: grey;
  padding: 7px 0;
}
.footer h4{
  padding-left: 45px;
  color: #ae050a;
  margin-top: 20px;
}
#commu{
  margin-top: 20px;
  list-style-type: none;
  float: right;
}
#commu img{
  width: 32px;
  height: 30px;
}
#commu li{
  display: block;
  width: 40px;
  height: 20px;
  background: gray;
  margin-top: 10px;
  text-align: center;
}