1165次阅读
前端静态页面

我们先来看首页,首先整个网站有一个背景色,需要给body一个background-color,然后标题栏可以是一个div,图片展示区是一个div,日记展示区是一个div。标题栏中的元素用div配合margin和左浮就能搞定,其中的几个超链可以用ul li来搞定。图片展示区是典型的ul li用武之地,九宫格的样式我们之前已经做过。下面的日记展示区也是ul li,所以这个页面很快就能做出来:

<!DOCTYPE html>
<head>
  <meta charset=utf-8 />
  <title>pet show</title>
  <style>
    * {
      margin : 0px;
      padding : 0px;
    }
    body {
      background-color : #B1ECFE;
    }
    .totalDiv {
      width : 1000px;
      margin : 10px auto;
    }
    .titleDiv {
      width : 100%;
      height : 100px;
      background-color : #AEFFCF;
      margin-top : 10px;
    }
    .imgDiv {
      float : left;
    }
    .twoTitle {
      float : left;
    }
    .bigTitle {
      font-size : 45px;
      color : #FF5400;
      font-weight : bold;
      margin-top : 8px;
      margin-left : 28px;
    }
    .subTitle {
      font-size : 20px;
      color : #FF0000;
      margin-top : 5px;
      margin-left : 35px;
    }
    .menu {
      float : left;
      margin-left : 120px;
      margin-top : 15px;
    }
    .menu li {
      float : left;
      margin-left : 50px;
      list-style-type : none;
    }
    .menu a {
      font-size : 60px;
      text-decoration : none;
      color : #FFC600;
    }
    .menu a:hover {
      color : #6CDBFF;
    }
    .picDiv, .blogDiv {
      width : 100%;
      
      background-color : #6CDBFF;
      margin-top : 10px;
    }
    .picUl {
      width : 800px;
      margin : 0px auto;
    }
    .picLi {
      list-style-type : none;
      width : 350px;
      float : left;
      margin-left : 40px;
    }
    .picLi li {
      list-style-type : none;
      float : left;
      margin-top : 10px;
      margin-left : 10px;
    }
    .picTitle {
      color : #2B6BB2;
      font-size : 20px;
      font-weight : bold;
      text-align : center;
      margin-top : 10px;
    }
    .blogUl {
      width : 900px;
      margin : 0px auto;
      
    }
    .blogLi {
      list-style-type : none;
      padding-top : 15px;
      padding-bottom : 15px;
    }
    .blogTitle {
      color : #2B6BB2;
      font-size : 50px;
    }
  </style>
</head>
<body>
  <div class="totalDiv">
    <div class="titleDiv">
      <div class="imgDiv">
        <img src="../../images/logo.jpg" width="150px" height="100px" />
      </div>
      <div class="twoTitle">
        <div class="bigTitle">
          宠恋秀
        </div>
        <div class="subTitle">
          秀出你的宠物
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.php">首页</a></li>
          <li><a href="pic.php">图片</a></li>
          <li><a href="blog.php">日记</a></li>
        </ul>
      </div>
    </div>
    <div class="picDiv">
      <ul class="picUl">
        <li class="picLi">
          <div class="picTitle">喵喵和狗狗</div>
          <ul>
            <li><img src="../../images/pics/pic1.jpg" /></li>
            <li><img src="../../images/pics/pic2.jpg" /></li>
            <li><img src="../../images/pics/pic3.jpg" /></li>
            <li><img src="../../images/pics/pic4.jpg" /></li>
            <li><img src="../../images/pics/pic5.jpg" /></li>
            <li><img src="../../images/pics/pic6.jpg" /></li>
            <li><img src="../../images/pics/pic7.jpg" /></li>
            <li><img src="../../images/pics/pic8.jpg" /></li>
            <li><img src="../../images/pics/pic9.jpg" /></li>
          </ul>
        </li>
        <li class="picLi">
          <div class="picTitle">喵喵和狗狗</div>
          <ul>
            <li><img src="../../images/pics/pic1.jpg" /></li>
            <li><img src="../../images/pics/pic2.jpg" /></li>
            <li><img src="../../images/pics/pic3.jpg" /></li>
            <li><img src="../../images/pics/pic4.jpg" /></li>
            <li><img src="../../images/pics/pic5.jpg" /></li>
            <li><img src="../../images/pics/pic6.jpg" /></li>
            <li><img src="../../images/pics/pic7.jpg" /></li>
            <li><img src="../../images/pics/pic8.jpg" /></li>
            <li><img src="../../images/pics/pic9.jpg" /></li>
          </ul>
        </li>
        <li class="picLi">
          <div class="picTitle">喵喵和狗狗</div>
          <ul>
            <li><img src="../../images/pics/pic1.jpg" /></li>
            <li><img src="../../images/pics/pic2.jpg" /></li>
            <li><img src="../../images/pics/pic3.jpg" /></li>
            <li><img src="../../images/pics/pic4.jpg" /></li>
            <li><img src="../../images/pics/pic5.jpg" /></li>
            <li><img src="../../images/pics/pic6.jpg" /></li>
            <li><img src="../../images/pics/pic7.jpg" /></li>
            <li><img src="../../images/pics/pic8.jpg" /></li>
            <li><img src="../../images/pics/pic9.jpg" /></li>
          </ul>
        </li>
        <li class="picLi">
          <div class="picTitle">喵喵和狗狗</div>
          <ul>
            <li><img src="../../images/pics/pic1.jpg" /></li>
            <li><img src="../../images/pics/pic2.jpg" /></li>
            <li><img src="../../images/pics/pic3.jpg" /></li>
            <li><img src="../../images/pics/pic4.jpg" /></li>
            <li><img src="../../images/pics/pic5.jpg" /></li>
            <li><img src="../../images/pics/pic6.jpg" /></li>
            <li><img src="../../images/pics/pic7.jpg" /></li>
            <li><img src="../../images/pics/pic8.jpg" /></li>
            <li><img src="../../images/pics/pic9.jpg" /></li>
          </ul>
        </li>
      </ul>
      <div style="clear : both; height : 10px;"></div>
    </div>
    <div class="blogDiv">
      <ul class="blogUl">
        <li class="blogLi">
          <div class="blogTitle">狗狗到我家</div>
          <div class="blogArticle">
          有一天,我在路上遇到一只小狗。就用声问:“小汪,你怎么在这,你的主人呢?”“汪汪
          ,我被主人赶出来了,我的主人是小明。”小狗好像说。我好奇地继续又问:“那你主人
          为什么把你赶出门呢?”小狗愁眉苦脸地回答道:“我跟小明看电视,我们看到公益广告,
          那个汽车排气管排出烟雾全是灰色,把屏幕弄得全灰色,我也不懂就随便大叫,小明叫我
          别吵,但我还叫着,小明一脚把我给踹到门外,我只好在街上走来走去,哎!”我叹了口
          气说:“你也够可怜的,哦!我觉得你也叫得对……
          </div>
        </li>
        <li class="blogLi">
          <div class="blogTitle">狗狗到我家</div>
          <div class="blogArticle">
          有一天,我在路上遇到一只小狗。就用声问:“小汪,你怎么在这,你的主人呢?”“汪汪
          ,我被主人赶出来了,我的主人是小明。”小狗好像说。我好奇地继续又问:“那你主人
          为什么把你赶出门呢?”小狗愁眉苦脸地回答道:“我跟小明看电视,我们看到公益广告,
          那个汽车排气管排出烟雾全是灰色,把屏幕弄得全灰色,我也不懂就随便大叫,小明叫我
          别吵,但我还叫着,小明一脚把我给踹到门外,我只好在街上走来走去,哎!”我叹了口
          气说:“你也够可怜的,哦!我觉得你也叫得对……
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>	
check the result

我知道你看这个是看不懂的,最好的学习方法就是自己实现,有什么不懂的再来这里对照哦

在这里,我们用到了*选择器,用它把margin和padding清零,避免一些元素自带的margin和padding给我们带来困扰。而其他的,就是用div的嵌套就能搞定了,其实div布局,主要是搞清楚嵌套关系,搞清楚了嵌套关系,其他的就迎刃而解了。

再来看看图片页,其实与主页的技巧类似,要注意clear的用法,可用来清除浮动。但是图片页还有一个遮罩的效果,这个效果就要用到一些技巧了。首先是半透明的遮罩层,需要设置透明度,通过opacity来设置,然后是中间的大图,我们希望页面滚动时,大图始终出现在视野中,这就要用到position中非常重要,但是我们没讲的fixed,fixed就是指无论页面怎么滚动,它都不会随着页面滚动,就像固定在那里一样。图片和按钮的定位就是用top和left啦,那么怎么居中呢,可以先设置margin-left为50%,然后left设为-(width/2)px,最后一点就是遮罩层的高度,设为100%是不行的,因为当滚动的时候,遮罩会遮不全,这就要借助于javascript,document.body.scrollHeight就是body的全高,但是body要等页面加载完毕才能算出全高,所以要延迟100ms后再执行高度设定,也就出现了代码中的javascript。

<!DOCTYPE html>
<head>
  <meta charset=utf-8 />
  <title>pet show</title>
  <style>
    * {
      margin : 0px;
      padding : 0px;
    }
    body {
      background-color : #B1ECFE;
    }
    .totalDiv {
      width : 1000px;
      margin : 10px auto;
    }
    .titleDiv {
      width : 100%;
      height : 100px;
      background-color : #AEFFCF;
      margin-top : 10px;
    }
    .imgDiv {
      float : left;
    }
    .twoTitle {
      float : left;
    }
    .bigTitle {
      font-size : 45px;
      color : #FF5400;
      font-weight : bold;
      margin-top : 8px;
      margin-left : 28px;
    }
    .subTitle {
      font-size : 20px;
      color : #FF0000;
      margin-top : 5px;
      margin-left : 35px;
    }
    .menu {
      float : left;
      margin-left : 120px;
      margin-top : 15px;
    }
    .menu li {
      float : left;
      margin-left : 50px;
      list-style-type : none;
    }
    .menu a {
      font-size : 60px;
      text-decoration : none;
      color : #FFC600;
    }
    .menu a:hover {
      color : #6CDBFF;
    }
    .picDiv {
      width : 100%;
      background-color : #6DDBFF;
      margin-top : 30px;
    }
    .picLi {
      width : 950px;
      background-color : #29CAFF;
      list-style-type : none;
      margin : 0px auto;
      padding : 5px;
    }
    .picTitle {
      color : #2B6BB2;
      font-size : 40px;
    }
    .picLi ul {
      width : 900px;
      margin : 0px auto;
    }
    .picLi li {
      list-style-type : none;
      float : left;
      margin : 25px;
    }
    .grayDiv {
      position : absolute;
      width : 100%;
      height : 100%;
      background-color : gray;
      top : 0px;
      left : 0px;
      opacity : 0.5;
    }
    .wrapDiv {
      position : fixed;
      top : 100px;
      left : -250px;
      width :100%;
      margin-left : 50%;
    }
    .leftButton, .rightButton {
      position : fixed;
      top : 300px;
      width :100%;
      margin-left : 50%;
    }
    .leftButton {
      left : -320px;
    }
    .rightButton {
      left : 270px;
    }
  </style>
</head>
<body>
  <div class="totalDiv">
    <div class="titleDiv">
      <div class="imgDiv">
        <img src="../../images/logo.jpg" width="150px" height="100px" />
      </div>
      <div class="twoTitle">
        <div class="bigTitle">
          宠恋秀
        </div>
        <div class="subTitle">
          秀出你的宠物
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.php">首页</a></li>
          <li><a href="pic.php">图片</a></li>
          <li><a href="blog.php">日记</a></li>
        </ul>
      </div>
    </div>
    <div class="picDiv">
      <ul class="picUl">
        <div style="height : 30px;"></div>
        <li class="picLi">
          <div class="picTitle">喵喵和狗狗</div>
          <ul>
            <li><img src="../../images/pics/pic1.jpg" /></li>
            <li><img src="../../images/pics/pic2.jpg" /></li>
            <li><img src="../../images/pics/pic3.jpg" /></li>
            <li><img src="../../images/pics/pic4.jpg" /></li>
            <li><img src="../../images/pics/pic5.jpg" /></li>
            <li><img src="../../images/pics/pic6.jpg" /></li>
            <li><img src="../../images/pics/pic7.jpg" /></li>
            <li><img src="../../images/pics/pic8.jpg" /></li>
            <li><img src="../../images/pics/pic9.jpg" /></li>
          </ul>
          <div style="clear : both;"></div>
        </li>
        <div style="height : 30px;"></div>
        <li class="picLi">
          <div class="picTitle">喵喵和狗狗</div>
          <ul>
            <li><img src="../../images/pics/pic1.jpg" /></li>
            <li><img src="../../images/pics/pic2.jpg" /></li>
            <li><img src="../../images/pics/pic3.jpg" /></li>
            <li><img src="../../images/pics/pic4.jpg" /></li>
            <li><img src="../../images/pics/pic5.jpg" /></li>
            <li><img src="../../images/pics/pic6.jpg" /></li>
            <li><img src="../../images/pics/pic7.jpg" /></li>
            <li><img src="../../images/pics/pic8.jpg" /></li>
            <li><img src="../../images/pics/pic9.jpg" /></li>
          </ul>
          <div style="clear : both;"></div>
        </li>
        <div style="height : 30px;"></div>
        <li class="picLi">
          <div class="picTitle">喵喵和狗狗</div>
          <ul>
            <li><img src="../../images/pics/pic1.jpg" /></li>
            <li><img src="../../images/pics/pic2.jpg" /></li>
            <li><img src="../../images/pics/pic3.jpg" /></li>
            <li><img src="../../images/pics/pic4.jpg" /></li>
            <li><img src="../../images/pics/pic5.jpg" /></li>
            <li><img src="../../images/pics/pic6.jpg" /></li>
            <li><img src="../../images/pics/pic7.jpg" /></li>
            <li><img src="../../images/pics/pic8.jpg" /></li>
            <li><img src="../../images/pics/pic9.jpg" /></li>
          </ul>
          <div style="clear : both;"></div>
        </li>
        <div style="height : 30px;"></div>
      </ul>
    </div>
  </div>
  <div class="grayDiv" id="grayDiv"></div>
  <div class="wrapDiv"><img src="../../images/pics/pic1.jpg" width="500px" height="500px" /></div>
  <div class="leftButton"><img src="../../images/left.png" /></div>
  <div class="rightButton"><img src="../../images/right.png" /></div>
  <script>
    setTimeout(function() {
      document.getElementById("grayDiv").style.height = document.body.scrollHeight + "px";
    }, 100);
  </script>
</body>	
check the result

再来看看日记页,同样用div布局,没有什么特别:

<!DOCTYPE html>
<head>
  <meta charset=utf-8 />
  <title>pet show</title>
  <style>
    * {
      margin : 0px;
      padding : 0px;
    }
    body {
      background-color : #B1ECFE;
    }
    .totalDiv {
      width : 1000px;
      margin : 10px auto;
    }
    .titleDiv {
      width : 100%;
      height : 100px;
      background-color : #AEFFCF;
      margin-top : 10px;
    }
    .imgDiv {
      float : left;
    }
    .twoTitle {
      float : left;
    }
    .bigTitle {
      font-size : 45px;
      color : #FF5400;
      font-weight : bold;
      margin-top : 8px;
      margin-left : 28px;
    }
    .subTitle {
      font-size : 20px;
      color : #FF0000;
      margin-top : 5px;
      margin-left : 35px;
    }
    .menu {
      float : left;
      margin-left : 120px;
      margin-top : 15px;
    }
    .menu li {
      float : left;
      margin-left : 50px;
      list-style-type : none;
    }
    .menu a {
      font-size : 60px;
      text-decoration : none;
      color : #FFC600;
    }
    .menu a:hover {
      color : #6CDBFF;
    }
    .blog {
      margin-top : 30px;
      background-color : #6DDAFF;
    }
    .blog li {
      list-style-type : none;
      background-color : #29CAFF;
      width : 950px;
      margin : 0px auto;
      padding : 15px;
    }
    .blogTitle {
      margin-top : 10px;
      color : #2B6BB2;
      font-size : 50px;
    }
  </style>
</head>
<body>
  <div class="totalDiv">
    <div class="titleDiv">
      <div class="imgDiv">
        <img src="../../images/logo.jpg" width="150px" height="100px" />
      </div>
      <div class="twoTitle">
        <div class="bigTitle">
          宠恋秀
        </div>
        <div class="subTitle">
          秀出你的宠物
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.php">首页</a></li>
          <li><a href="pic.php">图片</a></li>
          <li><a href="blog.php">日记</a></li>
        </ul>
      </div>
    </div>
    <div class="blog">
      <ul>
        <div style="height : 30px;"></div>
        <li>
          <div class="blogTitle">狗狗的故事</div>
          <div class="blogArticle">
          有一天,我在路上遇到一只小狗。就用声问:“小汪,你怎么在这,你的主人呢?”“汪汪
          ,我被主人赶出来了,我的主人是小明。”小狗好像说。我好奇地继续又问:“那你主人
          为什么把你赶出门呢?”小狗愁眉苦脸地回答道:“我跟小明看电视,我们看到公益广告,
          那个汽车排气管排出烟雾全是灰色,把屏幕弄得全灰色,我也不懂就随便大叫,小明叫我
          别吵,但我还叫着,小明一脚把我给踹到门外,我只好在街上走来走去,哎!”我叹了口
          气说:“你也够可怜的,哦!我觉得你也叫得对……</div>
        </li>
        <div style="height : 30px;"></div>
        <li>
          <div class="blogTitle">狗狗的故事</div>
          <div class="blogArticle">
          有一天,我在路上遇到一只小狗。就用声问:“小汪,你怎么在这,你的主人呢?”“汪汪
          ,我被主人赶出来了,我的主人是小明。”小狗好像说。我好奇地继续又问:“那你主人
          为什么把你赶出门呢?”小狗愁眉苦脸地回答道:“我跟小明看电视,我们看到公益广告,
          那个汽车排气管排出烟雾全是灰色,把屏幕弄得全灰色,我也不懂就随便大叫,小明叫我
          别吵,但我还叫着,小明一脚把我给踹到门外,我只好在街上走来走去,哎!”我叹了口
          气说:“你也够可怜的,哦!我觉得你也叫得对……</div>
        </li>
        <div style="height : 30px;"></div>
        <li>
          <div class="blogTitle">狗狗的故事</div>
          <div class="blogArticle">
          有一天,我在路上遇到一只小狗。就用声问:“小汪,你怎么在这,你的主人呢?”“汪汪
          ,我被主人赶出来了,我的主人是小明。”小狗好像说。我好奇地继续又问:“那你主人
          为什么把你赶出门呢?”小狗愁眉苦脸地回答道:“我跟小明看电视,我们看到公益广告,
          那个汽车排气管排出烟雾全是灰色,把屏幕弄得全灰色,我也不懂就随便大叫,小明叫我
          别吵,但我还叫着,小明一脚把我给踹到门外,我只好在街上走来走去,哎!”我叹了口
          气说:“你也够可怜的,哦!我觉得你也叫得对……</div>
        </li>
        <div style="height : 30px;"></div>
        <li>
          <div class="blogTitle">狗狗的故事</div>
          <div class="blogArticle">
          有一天,我在路上遇到一只小狗。就用声问:“小汪,你怎么在这,你的主人呢?”“汪汪
          ,我被主人赶出来了,我的主人是小明。”小狗好像说。我好奇地继续又问:“那你主人
          为什么把你赶出门呢?”小狗愁眉苦脸地回答道:“我跟小明看电视,我们看到公益广告,
          那个汽车排气管排出烟雾全是灰色,把屏幕弄得全灰色,我也不懂就随便大叫,小明叫我
          别吵,但我还叫着,小明一脚把我给踹到门外,我只好在街上走来走去,哎!”我叹了口
          气说:“你也够可怜的,哦!我觉得你也叫得对……</div>
        </li>
        <div style="height : 30px;"></div>
        <li>
          <div class="blogTitle">狗狗的故事</div>
          <div class="blogArticle">
          有一天,我在路上遇到一只小狗。就用声问:“小汪,你怎么在这,你的主人呢?”“汪汪
          ,我被主人赶出来了,我的主人是小明。”小狗好像说。我好奇地继续又问:“那你主人
          为什么把你赶出门呢?”小狗愁眉苦脸地回答道:“我跟小明看电视,我们看到公益广告,
          那个汽车排气管排出烟雾全是灰色,把屏幕弄得全灰色,我也不懂就随便大叫,小明叫我
          别吵,但我还叫着,小明一脚把我给踹到门外,我只好在街上走来走去,哎!”我叹了口
          气说:“你也够可怜的,哦!我觉得你也叫得对……</div>
        </li>
        <div style="height : 30px;"></div>
      </ul>
    </div>
  </div>
</body>	
check the result

日记详情页,技巧类似,值得注意的就是p标签,也就是段落标签,首行缩进可以用text-indent来实现。

<!DOCTYPE html>
<head>
  <meta charset=utf-8 />
  <title>pet show</title>
  <style>
    * {
      margin : 0px;
      padding : 0px;
    }
    body {
      background-color : #B1ECFE;
    }
    .totalDiv {
      width : 1000px;
      margin : 10px auto;
    }
    .titleDiv {
      width : 100%;
      height : 100px;
      background-color : #AEFFCF;
      margin-top : 10px;
    }
    .imgDiv {
      float : left;
    }
    .twoTitle {
      float : left;
    }
    .bigTitle {
      font-size : 45px;
      color : #FF5400;
      font-weight : bold;
      margin-top : 8px;
      margin-left : 28px;
    }
    .subTitle {
      font-size : 20px;
      color : #FF0000;
      margin-top : 5px;
      margin-left : 35px;
    }
    .menu {
      float : left;
      margin-left : 120px;
      margin-top : 15px;
    }
    .menu li {
      float : left;
      margin-left : 50px;
      list-style-type : none;
    }
    .menu a {
      font-size : 60px;
      text-decoration : none;
      color : #FFC600;
    }
    .menu a:hover {
      color : #6CDBFF;
    }
    .blog {
      background-color : #6DDBFF;
      margin-top : 30px;
    }
    .blogTitle {
      font-size : 50px;
      color : #2B6BB2;
      padding-top : 30px;
      text-align : center;
    }
    .blogArticle {
      margin-top : 30px;
    }
    .blogArticle p {
      text-indent : 35px;
      margin-top : 15px;
      margin-bottom : 15px;
    }
  </style>
</head>
<body>
  <div class="totalDiv">
    <div class="titleDiv">
      <div class="imgDiv">
        <img src="../../images/logo.jpg" width="150px" height="100px" />
      </div>
      <div class="twoTitle">
        <div class="bigTitle">
          宠恋秀
        </div>
        <div class="subTitle">
          秀出你的宠物
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.php">首页</a></li>
          <li><a href="pic.php">图片</a></li>
          <li><a href="blog.php">日记</a></li>
        </ul>
      </div>
    </div>
    <div class="blog">
      <div class="blogTitle">狗狗的故事</div>
      <div class="blogArticle">
        <p>有一天,刚放学我正在回家的路上走着,遇到了一只小狗……</p>
        <p>
        我看那只狗挺可爱的,毛绒绒的,毛是黄色的,看到它在流浪,觉得很可怜。就用声问:“小汪,
        你怎么在这,你的主人呢?”“汪汪,我被主人赶出来了,我的主人是小明。”小狗好像说。我好
        奇地继续又问:“那你主人为什么把你赶出门呢?”小狗愁眉苦脸地回答道:“我跟小明看电视,
        我们看到公益广告,那个汽车排气管排出烟雾全是灰色,把屏幕弄得全灰色,我也不懂就随便
        大叫,小明叫我别吵,但我还叫着,小明一脚把我给踹到门外,我只好在街上走来走去,哎!”
        我叹了口气说:“你也够可怜的,哦!我觉得你也叫得对,哦!不对,你叫得非常非常之非常对
        ,你想一想,你看到车发灰烟,就说明那些开车的人没有重视保护环境的重要意义,是不对的,
        而开车时车的尾部有个管子,是排出二氧化碳的,二氧化碳是破坏环境的一类。日本造那些核
        电站,无非是想要他们国家强大,但当海啸,地震的降临破坏了核电站导致核泄漏,这样破坏
        了环境,肯定会引来天灾!破坏了环境等于毁灭地球,世界谈什么和平强盛呢?还有那些大人
        们乱开车,丢垃圾,乱吸烟……这都是不好的行为。”</p>
        <p>
        小狗听得津津有味说:“那你们小朋友呢?”我认真地说:“我们小朋友即不会破坏环境又会保
        护环境,我们要提醒身边的每个人,叫他们保护环境,不要破坏环境。”小狗听了,很快回到
        家告诉小明。</p>
        <p>说了这么多我懂得了一个道理:人人都要保护环境,因为地球只有一个。</p>
      </div>
      <div style="height : 30px;"></div>
    </div>
  </div>
</body>	
check the result

最后就是管理页面了,其他都是类似的,只有select与视觉稿不用,因为select的样式很难定制,一般select要自定义样式都是用插件或者自己用div配合javascript来实现,而且这里是后台系统,不展现给用户,所以这里暂时就用默认的select效果好了。

<!DOCTYPE html>
<head>
  <meta charset=utf-8 />
  <title>pet show</title>
  <style>
    * {
      margin : 0px;
      padding : 0px;
    }
    body {
      background-color : #B1ECFE;
    }
    .totalDiv {
      width : 1000px;
      margin : 10px auto;
    }
    .titleDiv {
      width : 100%;
      height : 100px;
      background-color : #AEFFCF;
      margin-top : 10px;
    }
    .imgDiv {
      float : left;
    }
    .twoTitle {
      float : left;
    }
    .bigTitle {
      font-size : 45px;
      color : #FF5400;
      font-weight : bold;
      margin-top : 8px;
      margin-left : 28px;
    }
    .subTitle {
      font-size : 20px;
      color : #FF0000;
      margin-top : 5px;
      margin-left : 35px;
    }
    .menu {
      float : left;
      margin-left : 120px;
      margin-top : 15px;
    }
    .menu li {
      float : left;
      margin-left : 50px;
      list-style-type : none;
    }
    .menu a {
      font-size : 60px;
      text-decoration : none;
      color : #FFC600;
    }
    .menu a:hover {
      color : #6CDBFF;
    }
    .bodyDiv {
      width : 100%;
      background-color : #6DDBFF;
      padding-top : 10px;
      padding-bottom : 10px;
    }
    .picDiv, .blogDiv {
      width : 950px;
      background-color : #29CAFF;
      margin : 30px auto;
      padding : 15px;
    }
    .selectDiv {
      width : 950px;
      background-color : #29CAFF;
      margin : 10px auto;
      padding : 15px;
    }
    .blogDiv {
      text-align : center;
    }
    .picTitle {
      color : #2B6BB2;
      font-size : 40px;
    }
    .picUl li {
      list-style-type : none;
      float : left;
      margin : 15px;
    }
    .bodyDiv select {
      width : 200px;
      height : 30px;
    }
    .blogDiv input[type="text"] {
      width : 100%;
      height : 30px;
      font-size : 20px;
    }
    .blogDiv textarea {
      margin-top : 10px;
      width : 100%;
      font-size : 20px;
    }
    .blogDiv button {
      background-color : #4C42C7;
      color : white;
      width : 150px;
      height : 50px;
      font-size : 30px;
      margin-top : 10px;
    }
  </style>
</head>
<body>
  <div class="totalDiv">
    <div class="titleDiv">
      <div class="imgDiv">
        <img src="../../images/logo.jpg" width="150px" height="100px" />
      </div>
      <div class="twoTitle">
        <div class="bigTitle">
          宠恋秀
        </div>
        <div class="subTitle">
          秀出你的宠物
        </div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="index.php">首页</a></li>
          <li><a href="pic.php">图片</a></li>
          <li><a href="blog.php">日记</a></li>
        </ul>
      </div>
    </div>
    <div class="bodyDiv">
      <div class="selectDiv">
        <select>
          <option>狗狗的故事</option>
          <option>狗狗的故事</option>
          <option>狗狗的故事</option>
        </select>
      </div>
      <div class="picDiv">
        <div class="picTitle">狗狗的故事</div>
        <ul class="picUl">
          <li><img src="../../images/pics/pic1.jpg" /></li>
          <li><img src="../../images/pics/pic2.jpg" /></li>
          <li><img src="../../images/pics/pic3.jpg" /></li>
          <li><img src="../../images/pics/pic4.jpg" /></li>
          <li><img src="../../images/pics/pic5.jpg" /></li>
          <li><img src="../../images/pics/pic6.jpg" /></li>
          <li><img src="../../images/pics/pic7.jpg" /></li>
          <li><img src="../../images/pics/pic8.jpg" /></li>
          <li><img src="../../images/pics/pic9.jpg" /></li>
          <li><img src="../../images/add.jpg" /></li>
        </ul>
        <div style="clear : both;"></div>
      </div>
      <div class="blogDiv">
        <form action="#" method="post">
          <input type="text" name="title" placeholder="标题"/>
          <textarea name="article" placeholder="正文" cols="100" rows="30"></textarea>
          <button>提交</button>
        </form>
      </div>
    </div>
  </div>
</body>	
check the result

这样,前端页面就全部完成了,其实使用的技术很简单,关键还是细心和耐心,前端编写可谓所见即所得,写完后刷新就能看到效果,所以还是很好做的。

本文的代码放在这里,欢迎大家下载!

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录