CSS样式-实战练习2
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body,
div,
h4,
p {
margin: 0;
padding: 0;
}
.container { width: 905px; height: 310px; margin: 120px auto; padding-left: 31px; border: 1px solid #ccc; }
.container>h4 { margin-top: 20px; /* 给h4设置一个高度，这样微调字体时，不会影响太大 */ height: 46px; font-size: 17px; }
.container>h4>img { /* 设置左右方向的margin */ margin: 0 4px; }
.container>h4>a { font-weight: 400; /* font-size: 16px; */ color: #f00; }
.container>textarea { width: 844px; height: 110px; padding: 10px; color: #ccc }
.container input { width: 68px; height: 29px; margin-top: 24px; /* input的type为button时，默认带有边框，border-width: 0;是消除边框 */ border-width: 0; border-radius: 9%; color: #fff; background-color: #ccc; font-size: 15px; font-weight: 700; line-height: 29px; }
.container>p { margin-top: 24px; color: #f00; font-size: 14px; } </style> </head> <body> <div class="container"> <h4>评论<img src="images/star.png" /><a href="#">我要评论</a></h4> <textarea>请输入</textarea> <!-- 把input包在一个div中，这样能够保证单独一行 --> <div> <input type="button" value="提交"> </div> <p>暂时没有评论</p> </div> </body> </html>
.container { width: 905px; height: 310px; margin: 120px auto; padding-left: 31px; border: 1px solid #ccc; }
.container>h4 { margin-top: 20px; /* 给h4设置一个高度，这样微调字体时，不会影响太大 */ height: 46px; font-size: 17px; }
.container>h4>img { /* 设置左右方向的margin */ margin: 0 4px; }
.container>h4>a { font-weight: 400; /* font-size: 16px; */ color: #f00; }
.container>textarea { width: 844px; height: 110px; padding: 10px; color: #ccc }
.container input { width: 68px; height: 29px; margin-top: 24px; /* input的type为button时，默认带有边框，border-width: 0;是消除边框 */ border-width: 0; border-radius: 9%; color: #fff; background-color: #ccc; font-size: 15px; font-weight: 700; line-height: 29px; }
.container>p { margin-top: 24px; color: #f00; font-size: 14px; } </style> </head> <body> <div class="container"> <h4>评论<img src="images/star.png" /><a href="#">我要评论</a></h4> <textarea>请输入</textarea> <!-- 把input包在一个div中，这样能够保证单独一行 --> <div> <input type="button" value="提交"> </div> <p>暂时没有评论</p> </div> </body> </html>
标签：实战,container,样式,h4,height,color,font,margin,CSS 来源： https://www.cnblogs.com/Friday1/p/14491843.html