前端——CSS

最新推荐文章于 2024-11-18 18:18:46 发布

暴食症控制者

最新推荐文章于 2024-11-18 18:18:46 发布

阅读量293

点赞数

本文链接：https://blog.youkuaiyun.com/wzzhahaha/article/details/84347571

版权

1、样式——内嵌式（一般用在网站的首页，这样加载的快）

   </style>
   <div>
       以北京来讲，房价高、落户难、限购严，门槛越来越高，这就给他们周边三四线城市的房地产市场发展创造了条件，因为相比之下这些城市不要太友好，尤其城市群日益协同下，北京与周边三四线城市之间的壁垒不断下降，所以工作在北京居住在环京的现象就越来越常见
   </div>
   <div>
       有相当规模的人口，他们工作在北京，而居住在天津和河北，尤其离北京越近的区县，这类人口居住越多，如廊坊三河市、香河、保定的涿州、天津的武清，他们都可在1小时左右直达北京市中心。
   </div>

2、样式——外链式 (？？执行时没出结果？？？)

3、

<title>文本设置</title>
</head>
<body>
   <style type="text/css">
       div{
           color:blue;
           font-size: 20px;
           font-family: 'Maceosoft Yahei';
           line-height: 40px;
           text-indent: 40px;
       }
       h2{
           color:red;
           font-weight:normal;
           text-align: center;
       }
       a{
           text-decoration: none;
       }
       em{
           font-style: italic;
       }
   </style>
   <a href="http://www.baidu.com">百度搜索</a>
   <h2>北京人口负增长</h2>
   <div>
       以北京来讲，房价高、<em>落户难、限购严，门槛越来越高</em>，这就给他们周边三四线城市的房地产市场发展创造了条件，因为相比之下这些城市不要太友好，尤其城市群日益协同下，北京与周边三四线城市之间的壁垒不断下降，所以工作在北京居住在环京的现象就越来越常见
   </div>

4、

5、样式选择器：

<title>样式选择器</title>
   <style type="text/css">
       div{
           color: blue;                //标签选择器
       }
       #box{
           color:green;             //id选择器
       }
       .purple{
           color: purple;
       }                                 //类选择器（大多用这个）
       .bold{
           font-weight: bold;
       }
       .yahei{
           font-family: "Microsoft Yahei";
       }
   </style>
</head>
<body>

   <div>这是第一个div</div>
   <div id="box" class="purple bold yahei">这是第二个div</div>
   <div class="purple">这是第三个div</div>

6、层级选择器：

<title>层级选择器</title>
   <style type="text/css">
       .duanluo{
           font-size: 20px;
           text-indent: 40px;
       }
       .duanluo em{
           color: pink;
           font-style: nomal;
       }
       .list{
           list-style: none;
       }
       .list li{
           height: 30px;
           text-decoration: none；

   }
       .list a{
           text-decoration: none;
       }
   </style>
</head>
<body>
   <p class="duanluo">以北京来讲，<em>房价高、落户难、限购严，门槛越来越高</em>，这就给他们周边三四线城市的房地产市场发展创造了条件，因为相比之下这些城市不要太友好，尤其城市群日益协同下，北京与周边三四线城市之间的壁垒不断下降，所以工作在北京居住在环京的现象就越来越常见</p>
   <p>有相当规模的人口，他们工作在北京，而居住在天津和河北，<em>尤其离北京越近的区县，这类人口居住越多</em>，如廊坊三河市、香河、保定的涿州、天津的武清，他们都可在1小时左右直达北京市中心。</p>
   <ul class="list">
       <li><a href="">新闻标题</a></li>
       <li><a href="">新闻标题</a></li>
       <li><a href="">新闻标题</a></li>
       <li><a href="">新闻标题</a></li>
       <li><a href="">新闻标题</a></li>
   </ul>

7、组选择器：

<title>组选择器</title>
   <style type="text/css">
       .box1,.box2,.box3{                 //用逗号隔开
           font-size:24px;
           text-indent: 48px;              //相同的属性就放在一起
       }
       .box1{
           color:purple;
       }
       .box2{
           color:green;
       }
       .box3{
           color:pink;
       }
   </style>
</head>
<body>
   <div class="box1">第一个</div>
   <div class="box2">第二个</div>
   <div class="box3">第三个</div>
</body>

8、伪类选择器：

<title>伪类选择器</title>
   <style type="text/css">
       .list a:hover{
           color:gold;
           text-decoration:none;
       }
       p:hover{
           color:red;
       }
   </style>
</head>
<body>
   <ul class="list">
       <li><a href="">新闻标题</a></li>
       <li><a href="">新闻标题</a></li>
       <li><a href="">新闻标题</a></li>
       <li><a href="">新闻标题</a></li>
   </ul>
   <p>啊啦啦啦啦巴啦啦小魔仙</p>

9、表格样式：

<title>表格样式</title>
   <style type="text/css">
       .goods_list{
           width: 600px;
           height: 200px;
           border:1px solid #333;       #边框粗细的大小，实线，颜色
           border-collapse: collapse;       #将边线塌陷

       }
       .goods_list th,.goods_list td{
           border:1px solid #333;
           text-align:center;

       }
       .goods_list th{
           background-color: #3366cc;
           color: #fff;
       }
   </style>
</head>
<body>
   <table class="goods_list">
       <tr>
           <th>序号</th>
           <th>名称</th>
           <th>单价</th>
           <th>数量</th>
           <th>备注</th>
       </tr>
       <tr>
           <td>1</td>
           <td>苹果</td>
           <td>￥5.00</td>
           <td>3000</td>
           <td>销售中</td>
       </tr>
       <tr>
           <td>2</td>
           <td>苹果</td>
           <td>￥5.00</td>
           <td>3000</td>
           <td>销售中</td>
       </tr>
       <tr>
           <td>3</td>
           <td>苹果</td>
           <td>￥5.00</td>
           <td>3000</td>
           <td>销售中</td>
       </tr>
   </table>

10、盒子模型：

<title>盒子模型</title>
   <style type="text/css">
       .box{
           width: 300px;
           height: 150px;
           background-color: gold;
           border-top:10px solid #000;       #实线
           border-left: 10px dashed #000;    #虚线
           border-right: 10px dotted #000;     #点线
           border-bottom: 10px solid #000;

            padding: 20px 40px 50px 30px ;    //顺时针方向，分别是上、右、下、左。如果是三个值，那分别是上、左右、下。       如果是两个值，那分别是上下、左右
           margin: 60px 40px 100px 100px;   //顺时针方向，分别是上、右、下、左。如果是三个值，那分别是上、左右、下。如果是两个值，那分别是上下、左右*/
       }
   </style>
</head>
<body>
   <div class="box"></div>

11、盒子的真实尺寸计算：

盒子的宽度：width+左右的padding值+左右的border的值

盒子的高度：height+上下的padding值+上下的border的值

12、margin合并：

<title>margin合并</title>
   <style type="text/css">
       .box{
           width: 500px;      //不设高度，防止上下溢出
           border: 1px solid #333;
           margin: 50px auto;     //auto：左右居中
       }
       .box div{
           text-indent: 32px;
           /*margin-left: 20px;
           margin-right:20px;
           margin-top:30px;
           margin-bottom: 30px;*/    //多段落时，margin合并
           margin: 30px 20px;

       }
   </style>
</head>
<body>
   <div class="box">     //这个div是盒子的，下面三个div是文本的
       <div>以北京来讲，房价高、落户难、限购严，门槛越来越高，这就给他们周边三四线城市的房地产市场发展创造了条件，因为相比之下这些城市不要太友好，尤其城市群日益协同下，北京与周边三四线城市之间的壁垒不断下降，所以工作在北京居住在环京的现象就越来越常见</div>
       <div>以北京来讲，房价高、落户难、限购严，门槛越来越高，这就给他们周边三四线城市的房地产市场发展创造了条件，因为相比之下这些城市不要太友好，尤其城市群日益协同下，北京与周边三四线城市之间的壁垒不断下降，所以工作在北京居住在环京的现象就越来越常见</div>
       <div>以北京来讲，房价高、落户难、限购严，门槛越来越高，这就给他们周边三四线城市的房地产市场发展创造了条件，因为相比之下这些城市不要太友好，尤其城市群日益协同下，北京与周边三四线城市之间的壁垒不断下降，所以工作在北京居住在环京的现象就越来越常见</div>
   </div>

13、margin塌陷

14、元素溢出

在最外面的盒子中使用overflow

overflow:hidden、overflow:auto、overflow:scroll、

15、元素：

转换成内联块元素：display:inline-block;

16、浮动

<title>浮动</title>
   <style type="text/css">
       .box1,.box2,.box3{
           width: 200px;
           height: 200px;
           background-color: gold;
           text-align: center;
           margin: 20px;
           font:30px/200px "Microsoft Yahei";       //   30px/200px：文字大小/行高
       }
       .box1{
           float: left;
       }
       .box2{
           float: right;
       }
       .box3{
           float: left;
       }
   </style>
</head>
<body>
   <div class="box1">1</div>
   <div class="box1">1</div>
   <div class="box1">1</div>
   <div class="box1">1</div>
   <div class="box1">1</div>
   <a href="#" class="box1">这是一个a标签</a>
   <div class="box2">2</div>
   <div class="box3">3</div>

17、清除浮动

<title>清除浮动</title>
   <style type="text/css">
   .con2{
       width: 300px;
       border: 1px solid #000;
       margin: 50px auto 0;
       font-size: 0;      //消除块之间自带的间隙

}
   .con2{
       /*overflow: hidden;*/    ：消除浮动的方法一
   }

   .con2 a{
       width: 50px;
       height: 50px;
       background-color: gold;
       font-size: 16px;
       margin: 10px;
       text-align: center;
       line-height: 50px;
       text-decoration: none;
       float: left;       //左浮动
   }
   .clearfix:before,.clearfix:after{
       content: " ";
       display: table;
   }
   .clearfix:after{
       clear:both;
   }
   .clearfix{
       zoom:1;
   }                                         ：消除浮动的方法二
   </style>

</head>
<body>
   <div class="con2 clearfix">
       <a href="">1</a>
       <a href="">2</a>
       <a href="">3</a>
       <a href="">4</a>
       <a href="">5</a>
       <a href="">6</a>
       <a href="">7</a>
       <a href="">8</a>
       <a href="">5</a>
       <a href="">6</a>
       <a href="">7</a>
       <a href="">8</a>
          ：消除浮动的方法三
   </div>

18、定位

相对定位：

<title>相对定位</title>
   <style type="text/css">
       .con{
           width: 300px;
           height: 300px;
           border: 1px solid #000;
           margin: 100px auto 0;
       }
       .con div{
           width: 70px;
           height: 70px;
           background-color: gold;
           margin: 20px;
           text-align: center;
           line-height: 70px;
       }
       body .box1{
           position: relative;               //相对于自己本身定位

           left:50px;
           top:50px;
           background-color: green;
       }

   </style>
</head>
<body>
   <div class="con">
       <div class="box1">1</div>
       <div class="box2">2</div>
       <div class="box3">3</div>
   </div>

绝对定位：

<title>绝对定位</title>
   <style type="text/css">
       .con{
           width: 300px;
           height: 300px;
           border: 1px solid #000;
           margin: 100px auto 0;
           position: relative;
       }
       .con div{
           width: 70px;
           height: 70px;
           background-color: gold;
           margin: 20px;
           text-align: center;
           line-height: 70px;
       }
       body .box1{
           position: absolute;        //相对于父级或body定位
           left:50px;
           top:50px;
           background-color: green;
       }

   </style>
</head>
<body>
   <div class="con">
       <div class="box1">1</div>
       <div class="box2">2</div>
       <div class="box3">3</div>
   </div>

固定定位：

<title>固定定位</title>
   <style type="text/css">
       .con{
           width: 300px;
           height: 300px;
           border: 1px solid #000;
           margin: 100px auto 0;
           position: relative;    //有没有都没影响
       }
       .con div{
           width: 70px;
           height: 70px;
           background-color: gold;
           margin: 20px;
           text-align: center;
           line-height: 70px;
       }
       body .box1{
           position: fixed;        //相对于body定位
           left:0px;
           top:0px;
           background-color: green;
       }

   </style>
</head>
<body>
   <div class="con">
       <div class="box1">1</div>
       <div class="box2">2</div>
       <div class="box3">3</div>
   </div>

19、背景属性

<title>背景</title>
   <style type="text/css">
       .box{
           width: 400px;
           height: 400px;
           background-color: gold;
           background-image: url(./baidu.jpg);
           background-repeat: no-repeat;
           background-position: right bottom;

       }
   </style>
</head>
<body>
   <div class="box"></div>