CSS常用属性 、简单练习——德云社静态网页

CSS基本属性

背景效果

• background-color：定义了元素的背景颜色.
  CSS中，颜色值通常以以下方式定义:
  十六进制 - 如："#ff0000"
  RGB - 如：“rgb(255,0,0)”
  颜色名称 - 如：“red”

h1 {background-color:red;}
p {background-color:#e0ffff;}
div {background-color:rgb(255,0,0)}

• background-image：描述了元素的背景图像,默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

body {background-image:url('图片路径');}

• background-repeat：设置背景图像是否及如何重复。
• background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
• background-position:设置背景图像的起始位置。

文本颜色

颜色(color)属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:none;}

其他文本属性

字体属性

边框属性

边框样式：border-style
边框宽度：border-width
边框颜色：border-color
…

margin(外边距)属性

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

Padding(填充)属性

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

简单练习静态页面

部分页面效果图

部分CSS代码

/* 公共样式 */
body{font-size: 12px;font-family: 'microSoft YaHei';color: #333333;}
body,ul,li,a,p,h2,h3{margin: 0;padding: 0;text-decoration: none;list-style: none;}
.float_left{float: left;}
.float_right{float: right;}
/* 顶端最大框的样式 */
#header{width: 100%;height: 130px;}
/* 红色内容边框 */
.top_bar{width: 100%;height:40px;background:#b1030c;}
.wrap{width: 1160px;height: 100%;margin :0 auto;}
/* 左边购票框 */
.wrap_left{width: 80px;height: 100%;background: url(../img/car.png) no-repeat;background-position-y: 3px ;cursor: pointer;}
.wrap_left a{font-size: 14px;width: 100%;height: 100%;display: block;line-height: 37px;color: #fff;margin-left: 23px;}
/* 右边电话框 */
.wrap_right{width: 123px;height: 100%;background: url(../img/tel.png) no-repeat;line-height: 37px;background-position-y: 3px ;}
.wrap_right span{font-size: 14px;width: 100%;height: 100%;display: block;margin-left: 23px;color: #fff;}
/* 中间框 */
.marquee{height: 100%;width: 850px;margin:0 auto;line-height: 37px;font-size: 14px;color: #fff;}
/* 导航框 */
.nav{width: 1196px;height:90px;margin:0 auto;padding: 10px 0;}
.nav li{text-align: center;line-height: 70px;letter-spacing: 0.1em;font-size: 14px;
    width: 135px;height: 70px;float: left;margin:0 auto;position: relative;}
.nav ul li a i{display: block;height: 3px;position: absolute;bottom: 0;/**bottom: -10px;*/
    left: 50%;right: 50%;background: #b0020c;z-index: -1;}
.nav ul li a:hover i{
    left: 0;
    right: 0;
    /* -webkit-transition-property: left, right; */
    transition-property: left, right;
    /* -webkit-transition-duration: 0.3s; */
    transition-duration: 0.3s;
    transition-timing-function: ease-out;}
.nav a{color: black;line-height: 70px;position: relative;padding: 0 0 10px 0;}
.nav_logo{width: 370px ! important;height: 70px;}
/* 图片框 */
.banner_border{width: 1583px;height: 33px;margin:0 auto;}
.banner_pic{width: 100%;height: 400px;border: 1px solid black;
    background: url(../img/pic_4.jpg);
    animation: isliving 3s steps(2) infinite;margin-bottom: 30px;}
@keyframes isliving{
    from{
        background-position: 0px 0px;
    }
    to{
        background-position: 0px -936px;
    }
}

菜鸟教程 德云社官网