---------------以下内容改编来自codeacademy
Let's remedy the first problem. On thestylesheet.css
tab, give your <div>
aheight
, a width and border
. You can make it any size you like!
<strong><span style="color:#cc0000;">CSS</span></strong>
div{width:100px;height:100;border:4px;}
<span style="font-family: 'Open Sans', 'Hevetica Neue', Helvetica, sans-serif;">div{width:80px;height:50;border:500px;color:red;background:yellow;font:Arial;}</span>
<strong><span style="color:#cc0000;">CSS3</span></strong><span style="color:#333333;">
div{box-shadow: 5px 5px 5px #888;width:100;height:50;border:500px;color:red;background-color:yellow;font:Arial;}
</span>
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
</head>
<body>
<div id="orange"><br/>Submit!</div>
<div id="green">✓</div>
<div id="red">X</div>
</body>
</html>
#orange {
width: 100px;
height: 60px;
background-color: #F38630;
color: #FFFFFF;
border-radius: 5px;
border: 4px solid #FA6900;
font-family: Verdana, Arial, Sans-Serif;
font-size: 1em;
font-weight: bold;
text-align: center;
box-shadow: 5px 5px 5px #888;
display: inline-block;
margin-right: 20px;
}
#green {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #9DE0AD;
color: #008800;
text-align: center;
font-weight: bold;
font-size: 2em;
border: 4px solid #008800;
box-shadow: 5px 5px 5px #888;
display: inline-block;
margin-right: 20px;
}
#red {
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 2px;
color: #CC0000;
font-family: Verdana, Arial, sans-serif;
text-align: center;
font-weight: bold;
font-size: 2.5em;
border: 4px solid #CC0000;
box-shadow: 5px 5px 5px #888;
display: inline-block;
position: relative;
top: 10px;
margin-right: 20px;
}