day4 京东登录项目以及相关文字操作

1.文字操作

重点操作方法：

/字体大小/ ：font-size: 20px;

/3.自提名字/：font-family: "仿宋";

/*4.文字加粗
bolder（更粗）bold（加粗）normal常规
600-900加粗
500常规
100-400一般
*/
font-weight: 900;

/5.文字倾斜
italic \oblique倾斜
normal*/
：font-style: normal;

水平对齐方式：text-align: left;

line-height: 150px;：一个标签中只有一行内容的时候，可以通过设置行高和标签高度相同，来让内容在垂直方向居中

/8.文字装饰器
*none - 去掉装饰漆

underline -下划线
*overline - 上划线：text-decoration: line-through;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                /*字体大小*/
                font-size: 20px;
                
                
                /*2.文字颜色*/
                color: deeppink;
                
                
                /*3.自提名字*/
                font-family: "仿宋";
                
                
                /*4.文字加粗
                 bolder（更粗）bold（加粗）normal常规
                 600-900加粗
                 500常规
                 100-400一般
                 */
                font-weight: 900;
                
                
                /*5.文字倾斜
                 italic \oblique倾斜
                 normal
                 * */
                font-style: normal;
                
                
                
                /*水平对齐方式
                 left（默认）：
                 right:
                 center:居中
                 :注意：这个属性是珍贵标签中的内容（内容可以是文字，也可以是其他标签）
                 * */
                text-align: left;
                
                
                /*7.文字的行高:设置一行文字的高度
                 *一个标签中只有一行内容的时候，可以通过设置行高和标签高度相同，来让内容在垂直方向居中
                 * */
                line-height: 150px;
                
                
                
                /*8.文字装饰器*
                 *none - 去掉装饰漆
                 * underline -下划线 
                 *overline - 上划线
                 * 
                 */
                text-decoration: line-through;
                
                
                /*9.首行缩进*/
                text-indent: 2em;
                
                
                /*10.字间距*/
                letter-spacing: 10px;
                
            }
            
        </style>
    </head>
    <body>
        <div id="" style="background-color: blue;">一段文字
            <a href="">a1</a>
            <a href="">a2</a>
            <a href="">a3</a>
        </div>
        
        
        <style type="text/css">

            ul{
                /*1.定义符号样式*
             *disc(实心圆) circle(空心圆)
             *
             */
                list-style-type: square;
                
                /*2.定义一张图片*/
                list-style-image: url(img/aaa.ico);
                /*3.定义符号位置*/
                
                
                list-style-position: inside;
            }
        </style>
        
        
        
        <!--2.列表相关属性-->
        <ul>
            <li>数学</li>
            <li>英语</li>
            <li>语文</li>
        </ul>
        
        <style type="text/css">
            #bg{
                /*1.设置背景图：默认是平铺*/
                background-image:url(img/logo.png) ;
                /*2.背景图是否平铺*
                 * repeat（默认） - 背景图必标签小，背景图会重复渲染，直到将标签全部渲染为止
                 */
                background-repeat: no-repeat;
                
                /*3.背景图的h位置*
                 *数值 - x，y坐标的值
                 * x坐标： - left，right，center
                 * y坐标： top：bottom，center
                 */
                background-position-x: right;
                background-position-y: 25%;
            }
        </style>
        <!--3.背景图-->
        <div id="bg" style="width: 600px;height: 500px;background-color: deeppink;"></div>
    </body>
</html>

最后编辑于：2018.12.07 20:59:46