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

水深无声 2023-03-02 04:52 9阅读 0赞

# 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;}

## 其他文本属性 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center][]

## 字体属性 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1][]

## 边框属性 ##

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

## margin(外边距)属性 ##

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

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

## Padding(填充)属性 ##

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

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

# 简单练习静态页面 #

部分页面效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3]  
部分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;
        }
    }

> 菜鸟教程 德云社官网

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/1b357ed4cafa41c58fe1412688a5d087.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200727171331345.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200727171731405.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20200727172142938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center