CSS:层叠样式表

作用和优点：
用于网页美化的装饰作用，对网页的布局，它可以提供更多的网页样式，使网页的元素更丰富，使内容与表现形式相分离的状态。比如它可以方便的设置文字的大小、间距，图片的阴影、位置等。
用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
老式的采用表格形式的网页制作方式已经被淘汰了，现在网络上的各大网站，基本全部采用div+css的表现形式。
引用方式：

外部链接式：

<link rel="stylesheet" href="css/css.css" type="text/css">

内嵌式：

<style type="text/css"></style>

内联式:（只针对于当前标签产生作用）

 <a href="#" style=""></a>

样式表优先级
内联式》内嵌式》外部链接式

引用之后用选择器打开，并输入需要的操作：

css中有三种选择器：

选择器
a.标签选择器	针对于特有的HTML标签
b.类选择器	根据类名找对象class .
c.id选择器	根据id找对象 #

- 建议：关于选择器的选择：使用class选择器

  ***## 在css里面常会的属性***
 -
 1. overflow   "hidden" 作用不仅仅上浮，还有对盒子隐藏的功能，包装盒子自动装箱拆箱的效果。
 2. padding:内边距
	 margin：外边距
	 margin-"direction"    可以调整盒子布局位置，想放哪里就放那里。

 3.一般盒子的实际专用宽度=width+左边padding+右边的padding+左边的border+右边的border。
 4.绝对定位和相对定位
 position absolute 或者 position relevant 
 ------绝对定位相对于窗体的左上角开始就算，和绝对路径相对路径一个道理，窗体上角属于跟盘符
 ------相对定位是相对于上一个的插件位置的坐标进行调整
      属性是left **px    right   top   bottom

自己写的框架样子

html代码

<html>
<head>

    <title>

    </title>
    <link rel="stylesheet" type="text/css" href="css/css.css">

</head>


<body>
    <div class="fill">

        <div class="top">
            <div class="top_left">
                    
            </div>
            <div class="top_right_up">
                          
            </div>
            <div class="top_right_down">
                    
            </div>
        </div>

        <div class="mid">
            <div class="mid_left">
                
            </div>
            <div class="mid_right">
                <div class="mid_right_left">
                    
                    <div class ="mid_right_left_up">
                        
                    </div>
                    <div class=" cl space">
                        
                    </div>
                    <div class ="mid_right_left_mid">
                        
                    </div>
                    <div class=" cl space">
                        
                    </div>
                    <div class ="mid_right_left_down">
                        
                    </div>
                    <div class=" cl space">
                        
                    </div>
                </div>
                <div class="mid_right_right">
                    
                </div>
            </div>
            <div class="mid_down">
                超连接
            </div>
        </div>

        <div class="bottom">
                下
        </div>
    </div>
</body>

</html>

css代码

.fill{
    border: 1px solid red;
    width: 800px;
    
}
.top{
    border: 1px solid red;
    width: 800px;
    height: 200px;
}
.top_left{
    border: 1px solid red;
    width: 250px;
    height: 200px;
    float: left;
}

.top_right_up{
    border: 1px solid red;
    width: 70px;
    height: 50px;
    float: right;
}

.top_right_down{
    border: 1px solid red;
    width: 500px;
    height: 40px;
    float: right;
    margin-top: 90px;
}

.mid{
    border: 1px solid red;
    width: 800px;
    height: 500px;
}
.mid_left{
    border: 1px solid red;
    width: 295px;
    height: 500px;
    float: left;
}

.mid_right{
    border: 1px solid red;
    width: 495px;
    height: 470px;
    float: left;
}

.mid_right_left{
    border: 1px solid red;
    width: 295px;
    height: 470px;
    float: left;
}
.mid_right_left_up{
    border: 1px solid red;
    width: 205px;
    height: 148px;
}
.mid_right_left_mid{
    border: 1px solid red;
    width: 245px;
    height: 148px;
}
.mid_right_left_down{
    border: 1px solid red;
    width: 290px;
    height: 138px;
}
.mid_right_right{
    border: 1px solid red;
    width: 195px;
    height: 470px;
    float: left;
}
.cl{
    clear: both;
}
.space{
    height: 5px;
}

.bottom{
    border: 1px solid red;
    width: 800px;
    height: 40px;
}

样式图片：

在这里插入图片描述

自己写的框架样子

猜你喜欢