Blogger Information
Blog 5
fans 0
comment 1
visits 3636
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0704作业
A王侨的博客
Original
726 people have browsed it

html页面的代码:

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="0703.css"></link><!---- 外部样式 链接CSS样式    ----->
    </head>
    <body>
            <div>
                <div></div>
            </div>
            <div>
                <ul>
                    <li>今</li>
                    <li>天</li>
                    <li>是</li>
                    <li>7</li>
                    <li>月</li>
                    <li>5</li>
                    <li>日</li>
                    <li>天</li>
                    <li>气</li>
                    <li >热</li>
                </ul>
            </div>
    </body>
</html>

css属性代码:

.box1{
    background-color:red;
    height:200px;
    width:200px;
    padding:20px;
    border:6px dotted green;
    border-radius:50%;
    
}
ul{
    margin:0;
    padding-left:0;
    border:2px solid red;
    width:700px;
}
ul li{
    list-style:none;
    width:40px;
    height:40px;
    background-color:DarkViolet;
    border:2px solid red;
    text-align:center;
    line-height:40px; /*行高*/
    border-radius:50%;/*设置圆角的角度*/
    display:inline-block;/*设置内联块,使多个块元素可以显示在同一行*/   

margin-left:20px;/*设置小球之间距离*/
    
}
.bg-color{
    background-color:LightGreen;
}
ul :nth-last-child(3){  /* 倒数第3个子元素, */  

 background-color:DeepSkyBlue;
    
}
ul :nth-of-type(6){    /* 选择第6个li类型的元素 */

    background-color:green;
}



实例如下:

QQ图片20190705115725.png


Correction status:qualified

Teacher's comments:写得不错, 特别是配的图片
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post