国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css3制作商品展示

raise_yang / 2144人閱讀

摘要：今天看到一個(gè)用制作的簡(jiǎn)單的展示頁(yè)面所以，我自己又是初學(xué)者所以決定模仿著寫一個(gè)，下面右邊是一開始的，右邊是鼠標(biāo)放上去暫時(shí)的。這個(gè)是由下到上逐漸顯示的首先直接上代碼。

今天看到一個(gè)用css3制作的簡(jiǎn)單的展示頁(yè)面所以，我自己又是初學(xué)者所以決定模仿著寫一個(gè)，下面右邊是一開始的，右邊是鼠標(biāo)放上去暫時(shí)的。這個(gè)是由下到上逐漸顯示的首先直接上代碼。

?

 1  
 2  DOCTYPE html>
 3 <html lang="en">
 4 
 5 <head>
 6   <meta charset="UTF-8">
 7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9   <link rel="stylesheet" href="./style.css">
10   <title>Documenttitle>
11 head>
12 
13 <body>
14   <div class="box">
15     <div class="pic">
16       <img src="./1.jpeg" alt="">
17     div>
18     <div class="desc">
19       <div class="title">
20         <span>立即訂制span>
21       div>
22       <div class="ui">
23         <p>ui課程設(shè)計(jì)p>
24         <p>***人在學(xué)習(xí)p>
25       div>
26     div>
27   div>
28 body>
29 
30 html>

下面是css代碼

* {
  padding: 0px;
  border: 0px;
}

.box {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  position: relative;
  text-align: center;
}

.pic {
  width: 100%;
  height: 100%;
}

.pic img {
  width: 100%;
  height: 100%;
}

.desc {
  position: absolute;
  bottom: 0px;
  width: 100%;
  /* width: 0px; */
  height: 0px;
  overflow: hidden;
  text-align: center;
  opacity: 0.5;
  transition: all 0.6s;
}

.desc .title {
    width: 80%;
}

.box:hover .desc{
  height: 100%;
  width: 100%;
  border: 1px solid red;
  background-color: black;
}

.box:hover .title{
  margin-top: 120px;
}

.desc .title span {
  border: 1px solid red;
  color: red;
  padding-left: 20%;
  padding-right: 20%;
  margin: 0;
}

.ui p {
  float: left;
  margin: 10px 10px 0px 30px;
  color: white;
}

下面展示我做的，由于是初學(xué)所以對(duì)與美化不是太好

?

這就是效果了，主要是用了

.box:hover .desc{
  height: 100%;
  width: 100%;
  border: 1px solid red;
  background-color: black;
}

同時(shí)，你可以直接用bottom,或left或top或right你會(huì)發(fā)現(xiàn)這個(gè)有不同的效果

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1324.html

相關(guān)文章

  • 作為前端開發(fā)，如何寫好一個(gè)簡(jiǎn)歷

    摘要：項(xiàng)目地址需求來(lái)源通常在各個(gè)招聘網(wǎng)站，我們填寫完一些信息后，網(wǎng)站就可以幫助我們生成一個(gè)很不錯(cuò)的簡(jiǎn)歷。但是作為一名開發(fā)者，尤其是前端開發(fā)者，可能對(duì)這種簡(jiǎn)歷并不滿意。，前端開發(fā)神器。最后，為了保護(hù)隱私。 背景 前一陣子，閑下來(lái)便開始著手做一個(gè)一直想做的東西--resume。經(jīng)過(guò)幾天業(yè)余時(shí)間的折騰，終于做出了一番模樣。Github項(xiàng)目地址：https://github.com/eternity...

    abson 評(píng)論0 收藏0

  • 作為前端開發(fā)，如何寫好一個(gè)簡(jiǎn)歷

    摘要：項(xiàng)目地址需求來(lái)源通常在各個(gè)招聘網(wǎng)站，我們填寫完一些信息后，網(wǎng)站就可以幫助我們生成一個(gè)很不錯(cuò)的簡(jiǎn)歷。但是作為一名開發(fā)者，尤其是前端開發(fā)者，可能對(duì)這種簡(jiǎn)歷并不滿意。，前端開發(fā)神器。最后，為了保護(hù)隱私。 背景 前一陣子，閑下來(lái)便開始著手做一個(gè)一直想做的東西--resume。經(jīng)過(guò)幾天業(yè)余時(shí)間的折騰，終于做出了一番模樣。Github項(xiàng)目地址：https://github.com/eternity...

    KunMinX 評(píng)論0 收藏0

  • 用impress.js制作幻燈片

    摘要：前兩天學(xué)長(zhǎng)回學(xué)校進(jìn)行洗腦宣講，做了一個(gè)看上去很炫的縮放式幻燈片。可以用如下的方法添加第一頁(yè)的幻燈片你需要寫的是和。如果用戶剛點(diǎn)開幻燈片而沒(méi)反應(yīng)，這個(gè)提示會(huì)自動(dòng)浮現(xiàn)。雖然這些東西很簡(jiǎn)單，但做一個(gè)演講使用的幻燈片，也已經(jīng)足夠好了。 前兩天學(xué)長(zhǎng)回學(xué)校進(jìn)行洗腦宣講，做了一個(gè)看上去很炫的縮放式幻燈片。我不知道是不是太淺薄了，找了很久才找到幾個(gè)Web幻燈片工具。看了幾個(gè)之后，我決定學(xué)習(xí)一下其中最G...

    noONE 評(píng)論0 收藏0

  • CSS 3D Panorama（全景） - 淘寶造物節(jié)技術(shù)剖析

    摘要：淘寶造物節(jié)的活動(dòng)頁(yè)就是全景的一個(gè)很贊的頁(yè)面，它將全景圖分割成等份，相鄰的元素構(gòu)成的夾角，相鄰兩側(cè)面相對(duì)于棱柱中心所構(gòu)成的夾角。 本文轉(zhuǎn)自凹凸實(shí)驗(yàn)室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鮮事物了，但以前...

    LiuRhoRamen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<