CSS学习笔记第17天--内部样式不生效

网站建设 · 2020-11-05
今天学习CSS,照着视频做,代码敲了两遍,发现CSS内部样式都不生效,但范例的内部样式是生效的,我html头部用的是html5,范例的头部是html过渡版,不知道和这个有没有关系,现将视频中的正确代码择录如下,我自己对着再慢慢研究一下,那里出了问题。U4gIT米工网
3.2.2 图片布局
<style type="text/css">
* {
    margin:0px;
    padding:0px;
}
.container {
    width:430px;
    padding-left:30px;
}
.one .left {
    float:left;
    width:85px;
    height:30px;
    margin-top:10px;
}
.one .right {
    float:right;
    width:345px;
    border-bottom:#CCCCCC 1px dashed;
    height:35px;
    margin-bottom:15px;
}
.two .left {
    float:left;
    width:120px;
    height:85px;
}
.two .right {
    float:right;
    width:280px;
    height:85px;
    padding-left:30px;
}
.two .left img {
    border:#FF3300 1px solid;
    margin-left:5px;
}
h3 {
    color:#FF0000;
    padding-bottom:10px;
    font-size:16px;
}
ul {
    padding-left:10px;
    font-size:14px;
}
li {
    padding-bottom:5px;
}
</style>
</head>
<body>
<div class="container">
    <div class="one">
        <div class="left"> <img src="images/001.jpg"/> </div>
        <div class="right"> </div>
    </div>
    <div class="two">
        <div class="left"> <img src="images/002.jpg"/> </div>
        <div class="right">
            <h3>�Ը�͸����ϯ��8�½�ͷ</h3>
            <ul>
                <li>������ʾ�� ���ﴩ��������</li>
                <li>ʱ��Ů��2011�����ɫ����</li>
                <li>����� ��ִ�����ض�����</li>
            </ul>
        </div>
    </div>
    <div class="one">
        <div class="left"> <img src="images/003.jpg"/> </div>
        <div class="right"> </div>
    </div>
    <div class="two">
        <div class="left"> <img src="images/004.jpg"/> </div>
        <div class="right">
            <h3>��̲�ȼ����� �ɾͼ���Ħ��Ů��</h3>
            <ul>
                <li>9�����ѿڱ����޵�������˪</li>
                <li>��������ױ�����˹�ᾭ��</li>
                <li>6���ϰ ����ײ�������</li>
            </ul>
        </div>
    </div>
    <div class="one">
        <div class="left"> <img src="images/005.jpg"/> </div>
        <div class="right"> </div>
    </div>
    <div class="two">
        <div class="left"> <img src="images/006.jpg"/> </div>
        <div class="right">
            <h3>�������Ĵ�</h3>
            <ul>
                <li>������ʿ�������а�TOP10</li>
                <li>����ɹ��ҵ� ����������</li>
                <li>�����Ź� ���ַ���</li>
            </ul>
        </div>
    </div>
    <div class="one">
        <div class="left"> <img src="images/007.jpg"/> </div>
        <div class="right"> </div>
    </div>
    <div class="two">
        <div class="left"> <img src="images/008.jpg"/> </div>
        <div class="right">
            <h3>�����������շ�����</h3>
            <ul>
                <li>���д��PK 22����ɱ��Ʒ</li>
                <li>�����ƿ� �������ָ�Ь</li>
                <li>50Ԫ���³����