发表于: 2020-08-04 23:37:17

2 941


了解到了一些css样式,比如css3圆角属性可以直接使用bord-radius来生成圆角,参考自:http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html(CSS3圆角详解)

以及css自适应屏幕:

https://www.cnblogs.com/cuoreqzt/p/5848270.html(CSS百分比实现高度占位自适应(margin/padding))

最后定义出.css文件

div{
width: 30%;
/*height: 80px;*/
   float: left;
border-radius: 15px;
padding-top: 30%;
margin-left: 2%;
margin-top: 2%;
background-color: orange;
}

在html中引入这个.css并且建立九个盒子模型

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="../css/boxAttribute.css">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

最终可以生成


返回列表 返回列表
评论

    分享到