前端css基本布局
Posted Steady_Man
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端css基本布局相关的知识，希望对你有一定的参考价值。
初始css
css简介：
css是一个层叠样式表
css可以把样式和htm分离
css简单实用：
css三种样式表
1. 第一种：内联样式表: 在标签中，把CSS值写在Style属性中。此种做法不推荐！不推荐的原因：①多个相同的Style就要写多遍，代码量大 ② 没有实现标签和CSS分离，后期维护性差
2. 第二种：内嵌样式表：把CSS样式写在head标签中. 实现CSS复用， 还是没有实现html标签和CSS文件级别的分离
3. 第三种：外部样式表：把CSS存在单独的CSS文件中，在HTML中Link 相应的CSS文件即可
div标签：
div默认是一个矩形容器。
div对网页经行布局。
width：宽度
height：高度
background-color ：背景色
css基本语法：
选择器 {
样式}
id选择器：#id名称
class选择器：.class名称
标签选择器： div（直接写标签）
css设置容器和字体大小：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
font-size:20px;
}
body{
background-color:red;
}
div {
width:1200px;
height: 200px;
background-color: navy;
font-size: 40px;
}
div>div{
float:left; /*所有的子div横向排列*/
}
div>.one{
width:50%;
height: 90%;
background-color:indianred;
font-size:50px;/*div里面字体大小*/
}
div>.two{
width:30%;
height: 90%;
background-color:yellow;
font-size:0.5em;
}
div>.three{
width:20%;
height: 90%;
background-color:magenta;
font-size:1.2rem;
}
#div01{
width:800px;
height: 200px;
background-color:rgba(0,0,128,.5);
/*color:#778899; 可以简写为：color:#789*/
color:rgb(78,190,22);
color:#333333
}
</style>
</head>
<body>
<div>
<div class="one">div01</div>
<div class="two">div02</div>
<div class="three">div03</div>
</div>
<div id="div01">
Web前端课程之CSS
</div>
</body>
</html>背景的设置background：
background-color：red--------------设置背景颜色
background-image：url("地址")------设置背景图片
background-repeat：repeat（填充），no-repeat（不填充）
background-attachment：fixed-------将背景图固定
background-position：（横向）left，center，right。（纵向）top，center，bottom
background-size：100%，cover-------设置背景图的大小
background：url(地址)(repeat fixed center center/ fixed)-----填充整个页面属性
以上是关于前端css基本布局的主要内容，如果未能解决你的问题，请参考以下文章