css简单的页面效果

原创 2015年11月19日 14:55:43

昨天中午看到的一个网页效果图,,感觉挺好,,自己就尝试着做了一下(不要在意其中的图片,)注:图片是我用python爬下来的
这个就是效果图

1、先选择一个图片作为背景,随便选了一张图片作为背景,其他的图片放在images文件下,,调用是要叫上路劲名,背景图片没有放在那里,直接就是跟目录下。
`
body{background-image: url("1.jpg");background-size: cover}

2、设计一个div块,,高度长度,自己决定就行,这个是我的长宽

width: 860px,height:310px;

3、设计ul li并且将他们水平排列,在安排一下边距什么的,,

width: 220px;height: 160px;float: left;
      margin-top:10px;margin-left:5px;  }

4、将图片插入到li中,并在上面写上标签,

#box ul li a p {height: 30px;width: 90px;
        background: rgba(0,0,0,0.4);font-size: 14px;text-decoration: none;font-family: 微软雅黑;text-align: center;line-height: 20px;position: absolute;bottom: 0px;left: 0px;
        margin-left:65px;
       }
<li>
      <a href="#">
      <img src="images/1.jpg">
      <p>摄影</p>
      </a>
    </li>

5、最后加上图片的效果,第一条语句是用来将图片变形的,第二条语句是有一个延迟的变形

#box ul li a:hover img{transform:scale(1.5,1);}
#box ul li a img{transition:all 1000ms linear;}

接下来是总的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title></title>
    <style type="text/css">
     body{background-image: url("1.jpg");background-size: cover} 
     #box{width: 860px,height:310px;background-color: rgba(255,255,255,0.75);margin:100px auto;}
     #box ul li{border:1 solid blue;list-style: none;
      width: 220px;height: 160px;float: left;
      margin-top:10px;margin-left:5px;  }
      #box ul{border:1px;solid:red;}
      #box ul li a img{width: 220px;height: 160px;
        }

        #box ul li a{width: 160px;height: 30px;position: relative;bottom: 0px;left: 0px;}
      #box ul li a p {height: 30px;width: 90px;
        background: rgba(0,0,0,0.4);font-size: 14px;text-decoration: none;font-family: 微软雅黑;text-align: center;line-height: 20px;position: absolute;bottom: 0px;left: 0px;
        margin-left:65px;
       }
       #box ul li a:hover img{transform:scale(1.5,1);}
       #box ul li a img{transition:all 1000ms linear;}
     </style>
</head>
<body>
    <div id ="box">
    <ul>
    <li>
      <a href="#">
      <img src="images/1.jpg">
      <p>摄影</p>
      </a>
    </li>
    <li>
<a href="#">
      <img src="images/2.jpg">
      <p>摄影</p>
      </a>
    </li>
    <li>
<a href="#">
      <img src="images/3.jpg">
      <p>摄影</p>
      </a>
    </li>
    <li>
<a href="#">
      <img src="images/4.jpg">
      <p>摄影</p>
      </a>
    </li>
    <li>
<a href="#">
      <img src="images/5.jpg">
      <p>摄影</p>
      </a>
    </li>
    <li>
<a href="#">
      <img src="images/6.jpg">
      <p>摄影</p>
      </a>
    </li>

    <li>
<a href="#">
      <img src="images/7.jpg">
      <p>摄影</p>
      </a>
    </li>

    <li>
<a href="#">
      <img src="images/8.jpg">
      <p>摄影</p>
      </a>
    </li>

    <li>
<a href="#">
      <img src="images/9.jpg">
      <p>摄影</p>
      </a>  </li>

    <li>
<a href="#">
      <img src="images/10.jpg">
      <p>摄影</p>
      </a>
    </li>

    </ul>
    </div>

</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

用CSS实现一个简单的幻灯片效果页面

又是一个常见面试题,不搜不知道,一搜吓一跳,有很多很有意思的写法。第一反应是利用CSS3的animation。不过为了兼容浏览器,记得加各浏览器前缀(“chrome和safira:-webkit-”、...

jQuery+css3实现3D翻书页面布局效果

  • 2013年09月18日 11:30
  • 556KB
  • 下载

Flexslider图片轮播、文字图片相结合滑动切换效果HTML 首先在页面head部位载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件。

转载篇jquery插件使用文章,可用于移动web前端 Flexslider是一款基于的jQuery内容滚动插件。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。开发者可以使用Flexslid...

css效果点击返回页面顶端

  • 2011年11月05日 16:30
  • 2KB
  • 下载

CSS控制HTML页面效果的方式及优先顺序

CSS控制HTML页面效果的方式及优先顺序 第一:如何让CSS去控制HTML页面效果呢? 有这么4 种方式,行内方式、内嵌方式、链接方式、导入方式 1)行内方式 虽然这...

jQuery+CSS3页面内容加载效果

  • 2014年03月15日 01:10
  • 37KB
  • 下载

CSS控制HTML页面效果的四种方法

CSS控制HTML页面效果的四种方法:行内方式、内嵌方式、链接方式、导入方式
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css简单的页面效果
举报原因:
原因补充:

(最多只允许输入30个字)