老师我这样是不是比较接近了?

来源:4-3 编程练习

白船袜七分裤

2017-11-26 16:27:43

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.page{
width:100%;
height:4043px;
background:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png") center top no-repeat;
}
.ad{
width:280px;
height:330px;
position:fixed;
top:50%;
margin-top:-150px;
}
.ad1{
left:0;
background:-moz-linear-gradient(top,#FF2A4D,#FF9BAB);
background:-webkit-linear-gradient(top,#FF2A4D,#FF9BAB);
background:-webkit-gradient(linear,top,bottom,#FF2A4D,#FF9BAB);
background:-o-gradient(top,#FF2A4D,#FF9BAB);
background:linear-gradient(top,#FF2A4D,#FF9BAB);
}
.ad2{
right:0;
background:-moz-linear-gradient(top,#0b94CD, #93D1EF);
background:-webkit-linear-gradient(top,#0b94CD, #93D1EF);
background:-webkit-gradient(linear,top,bottom,#0b94CD, #93D1EF);
background:-o-gradient(top,#0b94CD, #93D1EF);
background:linear-gradient(top,#0b94CD, #93D1EF);
}
.con{
margin:30px 0 0 20px;
font-family: "Microsoft Yahei";
color:#fff;
}
.job{
font-size: 40px;
font-weight: bolder;
}
.line{
height:1px;
width:220px;
margin: 20px 0;
background:-moz-linear-gradient(left,rgba(255,255,255,1),rgba(255,255,255,0));
background:-webkit-linear-gradient(left,rgba(255,255,255,1),rgba(255,255,255,0));
background:-o-linear-gradient(left,rgba(255,255,255,1),rgba(255,255,255,0));
}
</style>
</head>
<body>
<div class="page">
<div class="ad ad1">
<div class="con">
  <div class="job">Web<br/>前端工程师</div>
  <div class="line"></div>
  <div class="lj">职业路径&nbsp;&nbsp;&gt;</div>
</div>
</div>

<div class="ad ad2">
<div class="con">
  <div class="job">Java<br/>工程师</div>
  <div class="line"></div>
  <div class="lj">职业路径&nbsp;&nbsp;&gt;</div>
</div>
</div>
</div>
</body>
</html>


写回答

1回答

小丸子爱吃菜

2017-11-27

经测试,效果实现的不错了!

祝学习愉快!

1

0 学习 · 36712 问题

查看课程