3.美化网页元素

3.1为什么要美化网页

1.有效的传递页面信息

2.美化网页，页面漂亮才能吸引用户

3.凸显页面的主题

4.提高用户的体验

span标签：重点要突出的字使用span标签套起来

 
 
 
   
   
   
 
 
 欢迎学习JAVA
 
 

3.2字体样式

江淮、江汉、江南、四川盆地等地将出现持续高温天气，累计高温日数可达7～10天。

3.3文本样式

1.颜色 color rgb/rgba

2.文本对齐方式 text-align center(居中)

3.首行缩进 text-indent: em;

4.行高line-height: px;单行文字上下居中line-en">
 
   
   
   
 
   
 
 
 

123123123

123123123

123123123

值得关注的是，未来10天

江淮、江汉、江南、四川盆地等地将出现持续高温天气，累计高温日数可达7～10天。

3.4阴影

 /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
 #price{
    text-shadow:red 5px 5px 5px ;
 }

3.5超链接伪类

 /*鼠标悬浮的状态（重点）*/
 a:hover{
    color: orange;
    font-size: 50px;
 }
 /*鼠标按住未释放的状态*/
 a:active{
    color: green;
 }
 /*已访问的链接*/
 a:visited{
    color: red;
 }

3.6列表

 /*ul li*/
 /* list-style: none;
 none 去掉原点
 circle 空心圆
 decimal 数字
 square 正方形
 */
 ul{
    background: gold;
 }
 ul li{
    height: 30px;
    list-style:none;
    text-indent: 1em;
 ​
 }

3.7背景

背景颜色

背景图片

 div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("image/1.jpg");
            /*默认是全部平铺的*/
        }
        .div1{
            background-repeat: repeat-x ;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }

3.8渐变

background-image: linear-gradient( 方向/角度 , 颜色1，颜色2，颜色3....);