Some Apply For CSS

最新推荐文章于 2024-08-08 14:27:26 发布

Anwhere_jin

最新推荐文章于 2024-08-08 14:27:26 发布

阅读量482

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Anwhere_jin/article/details/51812052

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

I am making a resume for a friend, It's no use to say anything about it.But I find that people do take it for granted if you do something free for them. It is not worth mentioning.At least you should do as what I say instead of giving me the information without anything detail about your work and no words on your paper.
So I think a designer is hard to keep a friendship.

背景图片的设置

<div id="image">
    <img src="images/IU004.jpg">
</div>

#image{ 
position:fixed; 
top:0; 
left:0; 
bottom:0; 
right:0; 
z-index:-1; 
}

z-index:-1; 背景图片浮现最下，类似于优先度

超链接

    <div class="link" id="num2">
        <p>
            <a href="http://blog.csdn.net/anwhere_jin" id="text" >MY CNDS BLOG</a>
        </p>
        <p>
            <a href="https://github.com/orgs/AnwhereJin/dashboard" id="text">GITHUB</a>
        </p>
        <p>
            <a href="http://www.w3school.com.cn/index.html" id="text">W3C</a>
        </p>
    </div>

#num2{
  color: #FFF;
  font-family: "Felix Titling";
  font-size:18px;
  position: absolute;
  top:5px;
  left: 40px;
  text-shadow:#f7c7cb 2px 2px 4px;
}

text-shadow设置文字阴影，可设计发光。
这里写图片描述

超链接状态

a:link,a:visited{
 text-decoration:none;  /*超链接无下划线*/
}
a:hover{
 text-decoration:underline;  /*鼠标放上去有下划线*/
}

分区以及盒子模型中放入图片

在div定位图片主要是设置为背景图片定位的

    <div class="block1" id="num4">
        <h2>
            <p>BLOCK</p>
            <p>Ⅰ</p>
        </h2>
    </div>

    <div class="block2" id="num4">
        <h2>
            <p>BLOCK</p>
            <p>Ⅱ</p>
        </h2>
    </div>

    <div class="block3" id="num4">
        <h2>
            <p>BLOCK</p>
            <p>Ⅲ</p>
        </h2>
    </div>


.block1 {
  display: inline-block;
  margin: 20px 0 0 220px;
  padding: 160px 100px;
  position: absolute;
  top:140px;
  left: 10px;
  border: 1px solid #9f8671;
  color: #FFF;
  transform: skew(-20deg);
  background: url(../images/block1.jpg) no-repeat ;
  -webkit-box-shadow:8px 4px 8px #333333; 
  -moz-box-shadow:5px 4px 8px #333333;
}
.block1 h2 {
  transform: skew(20deg);
}

.block2 {
  display: inline-block;
  margin: 20px 0 0 20px;
  padding: 160px 100px;
  position: absolute;
  top:140px;
  left: 520px;
  border: 1px solid #9f8671;
  color: #FFF;
  transform: skew(-20deg);
  background: url(../images/block2.jpg) no-repeat ;
  -webkit-box-shadow:8px 4px 8px #333333; 
  -moz-box-shadow:5px 4px 8px #333333;
}
.block2 h2 {
  transform: skew(20deg);
}

.block3 {
  display: inline-block;
  margin: 20px 0 0 20px;
  padding: 160px 100px;
  position: absolute;
  top:140px;
  left: 830px;
  border: 1px solid #9f8671;
  color: #FFF;
  transform: skew(-20deg);
  background: url(../images/block3.jpg) no-repeat ;
  -webkit-box-shadow:8px 4px 8px #333333; 
  -moz-box-shadow:5px 4px 8px #333333;
}
.block3 h2 {
  transform: skew(20deg);
}