简单的CSS布局
<style typle="text/css"> //设置文本样式为CSS样式
#one{ // 以选择器来选择元素的id、选择器有两种：class和id、class选择器前面是一个点号、id选择器前面是#号
border: 5px solid red; // 设置元素的边框宽度和颜色、border边框、solid边框颜色
border-radius: 10px; // 设置边框四角的圆角、radius圆角半径
position: relative; // 相对定位、相对于最近的父元素进行定位，如果没有父元素则相对于整个HTML，position位置、relative相对
top: 5%; // 顶边距、该元素顶部距离父元素顶部之间的距离为父元素高度的5%，top顶端
left: 5%; // 左边距、该元素左边框与父元素左边框之间的距离为父元素宽度的5%、设置了左边距和宽度后可以不用设置右边距，left左边
width: 90%; // 元素宽度、该元素的宽度是父元素宽度的90%，width宽度
height: 20%; // 元素高度、该元素的高度是父元素高度的20%、height高度
//百分比是相对值、相对值会随浏览器窗口缩小对该元素进行百分比缩小，px是绝对值，绝对值不会浏览器随窗口缩小而缩小
background-image: url (图片路径)； //把图片设置成元素的背景、background背景—image图像、url路径
background-size：100% 100%; //背景图片宽度和高度100%填充满该元素、background背景—size大小
font-size: 2.em; //设置该元素的字体大小、font字体—size大小
text-align: center; //设置该元素文本的对齐方式、text文本—align对齐
color: white; //设置该元素字体的颜色、color字体颜色
font-family:"楷体"; //设置该元素字体的样式 、font-family指定字体
}
</style>
<div id="one">此处可添加<h>和<p>标签或者直接输入想要的内容</div>
