day24jingdong

01其他简单的CSS属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{
                text-decoration: none;
            }
            /*-----背景相关的------*/
            li{
                float: left;
                background-color: saddlebrown;
                
            }
            /*--------列表------*/
            ul{
                /*float: left;*/
                background-color: royalblue;
                /*1.设置符号样式
                 * disc(实心圆)、circle(空心圆)、square(实心方块)、none(去掉列表符号)
                */
                list-style-type: disc ;
                
                
                /*2.设置图片的符号*/
                list-style-image: url(img/images/icon.ico);
            
                /*3.设置符号的位置*/
                /*outside(li标签的外边)inside(li标签的里面)*/
                list-style-position: inside;

            }
            
            #d1{
                background-color: hotpink;
                width: 800px;
                height: 300px;
                /*背景图*/
                /*如果背景图大于盒子的大小,背景图能显示多少就显示多少*/
                /*如果背景图小于盒子的大小,就会平铺(重复显示)*/
                background-image: url(img/images/logo.png) ;
                
                /*2.是否平铺*/
                background-repeat: no-repeat ;
                
                /*3.背景图片的位置*/
                /*backgroud-position:x,y*/
                /*x:left/center/right 坐标值
                *y: top/center/bottom 坐标值
                */
                /*background-position: 100px 100px;*/
                background-position: center;
                /*4.同时设置
                 * 
                 * */
                background: url(img/images/icon.ico) no-repeat top blanchedalmond;
            }
            
            
            
            
            
            /*-----文字相关-----*/
            p{
                /*1.文字大小*/
                font-size:20px;
                
                /*2.文字颜色*/
                color:cornflowerblue;
                
                /*3.设置字体名*/
                font-family:'黑体';
                
                /*4.设置字体粗细*/
                /*取值100-900*/
                font-weight: bold;
                
                /*5.倾斜*/
                font-style: italic;
                
                /*6.内容的对齐方式*/
                /*center,left,right*/
                text-align: left;
            
                background-color: gold;
                /*7.设置行高*/
                /*文字一行的高度(当文字只有一行的时候设置行高和标签的高度一样,可以让文字垂直居中)*/
                height: 500px;
                line-height: 50px;
                
                /*8.文字修饰
                 
                 * none:去掉文字修饰
                 * underline:添加下划线
                 * */
                text-decoration: underline;
                /*9.首行缩进*/4
                /*注意:单位是em*/
                text-indent:4em;
                /*10字间距*/
                letter-spacing: 2px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <!--<img src="img/images/bg.png" />-->
        </div>
        <p>
            永和九年,岁在癸丑,<br />
            暮春之初,会于会稽山阴之兰亭,<br />
            修禊事也。群贤毕至,<br />
            少长咸集。此地有崇山峻岭,<br />
            茂林修竹,又有清流激湍,<br />
            映带左右,引以为流觞曲水,<br />
            列坐其次。虽无丝竹管弦之盛,<br />
            一觞一咏,亦足以畅叙幽情。
        </p>
        <ul>
            <li>Python</li>
            <li>H5</li>
            <li>Java</li>
            <li>Andriod</li>
            <li>C</li>
        </ul>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,802评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,092评论 0 0
  • 院子里有口空井,早打不出水来,一天下雨了,井却被灌满了水,人们纷纷过来打水,一尝味道居然很不错,众口相传,井水再次...
    许你故作姿态阅读 339评论 1 2
  • 一年之计在于春,新春伊始, 正是家庭装修的最好时节,为什么很多人选择春季装修呢? 今天旧房改造翻新专家e修鸽就来给...
    家装头条阅读 381评论 0 0