23.9.6（淘宝示例）

萌思思
54 阅读4分钟
移动1班2班 我是辅助
盒子标签
  • 无序列表标签
  • 无序列表标签
  • 无序列表标签
            <ul type="square">
                <li>无序列表标签</li>
                <li>无序列表标签</li>
                <li>无序列表标签</li>
            </ul>

            <ul type="disc">
                <li>无序列表标签</li>
                <li>无序列表标签</li>
                <li>无序列表标签</li>
            </ul>
            <ol type="a" start="3">
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
                <li>有序列表</li>
            </ol>

            <dl>
                <dt>西游记</dt>
                <dd>是中国四大名著之一</dd>
                <dd>主要讲了师徒四人去西天取经的神话故事</dd>
            </dl>
            <!-- 
                h1 ~ h6
                p
                span
                
                div:盒子标签，独占一行，用来搭建页面结构
                ul > li:无序列表标签，独占一行，默认小黑点修饰，通常取消小黑点
                ol > li:有序列表标签，独占一行，默认阿拉伯数字排序，通常取消默认排序方式
            
            css创建方式:
            方式一—：外部样式
                1.创建一个独立的html样式，后缀为.html
                2.创建一个独立的css文件，后缀为.css
                3.关联
                    在html页面中的head标签里面添加
                    <link rel=:styesheet" type="text/css" href="css文件地址">
            
            常用选择器:
                三大基本选择器:
                    ID选择器:
                    <标签id="name"></标签>
                    #name{}
                        【注】  在同一个页面中相同的id值只有一个，不能多次出现
                                在同一个id中只有一个值
                                具有唯一性

                    class选择器:
                    .name{}
                    <标签></标签>
                        【注】  在同一个页面中相同的class值可以多次出现
                                在同一个class中可以有多个值
                                具有重用性

                    类型选择器（标签选择器）:
                    div{} p{} h1{} .....标签{}
                    <标签></标签>

                    后代选择器:
                    选择器1 选择器2 选择器3{} 选中1里面的2里面的3，最终选中的是指定位置的3

            常用的css属性:
                    width:宽度
                    height:高度

                    float:浮动
                        浮动的作用:让原本独占一行的元素在一行显示
                        浮动的影响:脱离文档流
                        值:
                            left
                            right
                            none

            定位: 改变元素的位置
                定位属性:position
                定位值:
                    relative 相对定位
                        1:占据文档流
                        2:参考自身加载到页面中的初始位置
                        3:能改变坐标属性

                    absolute 绝对定位
                        1:脱离文档流
                        2:参考浏览器窗口胡总做参考最近的有定位的父级元素（默认定位除外）
                        3:能修改坐标属性
                    
                    fixed 固定定位
                        1:脱离文档流
                        2:参考浏览器窗口的可视区域
                        3:能改变坐标属性

                    static 默认定位
                        1:添加与不添加对元素没有影响
                        2:不能改变坐标属性
                        
                    sticky 粘性定位
                        1:结合了相对得和固定定位的特征
                    
                包含块:
                    1:嵌套结构
                    2:父元素使用position:relative;
                      子元素使用position:absolute;
                    
                三角形:
                        width:0px;
                        height:0px;
                        border:10px solid transparent;/*边框颜色设置透明*/
                        border-top:red;

                背景相关属性:
                        background:颜色 url("背景图地址") 是否重复 背景图定位/背景图大小
                        background-color:背景颜色;
                            颜色单词:red green blue...
                            十六进制:# 0 - 9 a - f
                                    【注】#aabbcc 缩写为 #abc
                            三原色:rgb() rgba()
                                    r:red 0-255
                                    g:green 0-255
                                    b:blue 0-255
                                    a:alpha 透明度 0-1
                                    background-image:url("图片路径");
                                        相对路径:参考当前图片所在文件夹
                                        绝对路径:
                                                从盘符出发:
                                                域名地址:
                                    
                伪元素选择器:
                    :after{
                        contect:"内容"
                    }
                    -->
</body>

图形展现

盒子

附件css #one{ height: 1000px; width: 1500px; background: red; border: 2px solid black; }

#a{ height: 1000px; width: 400px; float: left; }

#b{ height: 250px; width: 1100px; border: 1px solid black; float: right; }

#c{ height: 250px; width: 1100px; border: 1px solid black; float: right; }

#d{ height: 500px; width: 1100px; border: 1px solid black; float: right; }

#1{ height: 250px; background: red; }

#2{ height: 200px; background: plum; }

#3{ height: 550px; background: red; }

#4{ width: 500px; background: greenyellow; }

#5{ width: 600px; background: red; }

#6{ width: 600px; background: green; }

#7{ width: 500px; background: greenyellow; }

#8{ height: 500px; width: 400px; float: left; background: plum; }

#9{ height: 200px; width: 700px; float: right; background: red; }

#10{ height: 300px; width: 700px; float: right; background: greenyellow; }

另一个

Document 
    <div class="line2">
        <div class="line2-left"></div>
        <div class="line2-cen">
            <div class="search"></div>
            <div class="h-list"></div>
        </div>
        <div class="line2-right"></div>
    </div>

    <div class="line3">
        <div class="line3-left"></div>
        <div class="line3-list"></div>
        <div class="line3-si"></div>
        <div class="line3-jia">
            <div class="jia1"></div>
            <div class="jia2"></div>
            <div class="jia3"></div>
        </div>
        <div class="line3-banner">
            <div class="ban1"></div>
            <div class="ban2"></div>
            <div class="ban3"></div>
        </div>
        <div class="line3-infor">
            <div class="in1"></div>
            <div class="in2"></div>
            <div class="in3"></div>
        </div>
    </div>
</div>
1063684012

css文件 *{ margin: 0; padding: 0; }

.box{ width: 600px; height: 500px; background: orange; }

.line1{ height: 40px; background: blue; }

.line1-left{ width: 300px; height: 40px; background: purple; float: left; }

.line1-right{ width: 300px; height: 40px; background: pink; float: left; }

.line2{ width: 600px; height: 100px; background: blue; }

.line2-left{ width: 100px; height: 100px; background: gold; float: left; }

.line2-cen{ width: 350px; height: 100px; background: yellow; float: left; }

.search{ width: 350px; height: 70px; background: yellowgreen; }

.h-list{ width: 350px; height: 30px; background: pink; }

.line2-right{ width: 150px; height: 100px; background: purple; float: left; }

.line3{ width: 600px; height: 360px; background: red; }

.line3-left{ width: 200px; height: 360px; background: purple; float: left; }

.line3-list{ width: 400px; height: 60px; background: greenyellow; float:left; }

.line3-si{ width: 400px; height: 30px; background: red; float:left; }

.line3-jia{ width: 400px; height: 60px; float: left; }

.jia1{ width: 80px; height: 60px; background: pink; float: left; }

.jia2{ width: 160px; height: 60px; background: purple; float: left; }

.jia3{ width: 160px; height: 60px; background: pink; float: left; }

.line3-banner{ width: 200px; height: 210px; float: left; }

.line3-infor{ width: 200px; height: 210px; float: left; }

.ban1{ width: 100px; height: 100px; background: purple; float: left; }

.ban2{ width: 100px; height: 100px; background: yellow; float: left; } .in1{ width: 100px; height: 100px; background: green; float: left; }

.in2{ width: 100px; height: 100px; background:purple; float: left; }

.ban3{ width: 200px; height: 110px; background: pink; float: left; }

.in3{ width: 200; height: 110px; background: pink; float: left; }

avatar
文章
阅读
粉丝