4-3练习
来源：4-3 编程练习
慕村1704847
2017-10-09 13:29:29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.page{
width:100%;
height:2000px;
background:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png") center top no-repeat;
}
.div1{
width:200px;
height:200px;
background-color:#ff6347;
position:fixed;
left:0;
top:50%;
margin-top:-100px;
}
.div2{
width:200px;
height:200px;
background-color:#00bfff;
position:fixed;
right:0;
top:50%;
margin-top:-100px;
}
a:link,a：visited,a:hover,a:active{
color:#fff;
text-decoration: none;
}
.text{
font-family:"微软雅黑";
font-weight:bold;
color:#fff;
font-size:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="page">
<div class="div1">
<div class="text">Web<br>前端工程师<hr/><a href="#">职业路径 ></a>
</div> </div>
<div class="div2">
<div class="text">Java<br/>工程师<hr/><a href="#">职业路径 ></a></div></div>
</div>
</body>
</html>
是这样吗？颜色下划线 渐变怎么设置？
1回答
-
樱桃小胖子
2017-10-09
效果实现的很好，渐变线条可以这样实现：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #grad1 { height: 5px; background: -webkit-linear-gradient(left, #fff , blue , #fff); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #fff , blue , #fff); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #fff , blue , #fff); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #fff , blue , #fff); /* 标准的语法（必须放在最后） */ } </style> </head> <body> <div id="grad1"></div> </body> </html>祝学习愉快！
0
