AI智能
改变未来

制作静态首页 巩固CSS语法

1.明确布局结构,分为大结构内嵌小结构,在html中使用不同的

元素和标签
2.CSS样式介绍
(1)css语法规则
selector{ declaration1; declaration2; declaration3; …}
(2) css背景语法
div{
background-color: #00ff00; 背景暗色
background-image: url(./…/…jpg); 背景图片
background-repeat: no-repeat; 不重复,还有repeat-x,repeat-y等重复
background-position: center; 背景定位,center居中, top顶部,bottom底部,right右边
background-attachment: fixed; 背景关联
}
(3) css文本设置
p{
text-align: center; 文本对齐方式,文本水平居中
font-family:“宋体”; 字体样式
font-size: 12px; 字体大小
font-weight: bold; 字体加粗
}
(4) 链接
a:link{color: #ff0000;} 未被访问的链接
a: visited{color: #fff000;} 已经被访问的链接
a:hover{color: #ff00ff;} 鼠标移动到链接上
a:active{color: #ff0a00;} 正在被点击的链接

(5) css盒子模型
div{
height: 500px; 高度
width:500px; 宽度
padding:5px 5px; 内边距
margin:5px 5px; 外边框
border:5px; 边框
position: absolute; 定位
display:none; 显示
overflow:visiable; 溢出显示方式
float:left; 浮动
}
(6)不改变元素类型实现水平居中
1.使用margin:auto
#page-header.cotainer{
width:120px;
margin: 0 auto; 使用auto自动达到水平居中,(作用对象必须是块级标签,且有固定宽度时才可以实现)
}
2. 使用position:relative
#page-header.cotainer{
position: relative;
left:50%; 设置left让.container向右移动50%的相对距离
width:120px;
margin-left:-600px; 利用负左外边距向左移动自身宽度的一半距离,实现水平居中.
}

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 制作静态首页 巩固CSS语法