CSS学习（第四天）附件案例

加蓓努力我先飞

已于 2022-04-18 10:17:29 修改

阅读量318

点赞数

分类专栏： 2.CSS 文章标签： css

于 2020-08-30 18:11:07 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/108152804

版权

2.CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

附件案例

1 浮动元素经常和标准流父级搭配使用
- 1.1
- 1.2
- 1.3
- 1.4
2 学成在线案例

ctrl+g光标直接跳转

1 浮动元素经常和标准流父级搭配使用

1.1

参考
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title> 浮动元素经常和标准流父级搭配使用</title>
  <style >
   .box {
    width: 1527px;
    height: 574px;
    background-color: pink;
    margin: 0 auto;
   }
   .left {
    float: left;
    height: 574px;
    width: 294px;
    background-color: #0000FF;
   }
   .right {
    float: left;
    height: 574px;
    width: 1233px;
    background-color: purple;
   }
  </style>
 </head>
 <body>
  <div class="box">
   <div class="left">左侧</div>
   <div class="right">右侧</div>
  </div>
 </body>
</html>

在这里插入图片描述

1.2

参考
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   * {
    margin: 0;
    padding: 0;
    list-style: none;
   }
   .box {
    width: 1226px;
    height: 285px;
    background-color: pink;
    margin: 0 auto;
   }
   .box li {
    width: 296px;
    height: 285px;
    background-color: purple;
    float: left;
    margin-right: 14px;
   }
   /* 这里必须写.box .last 要注意权重的问题 */
   .box .last {
    margin-right: 0;
   }
  </style>
 </head>
 <body>
  <ul class="box">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li class="last">4</li>
  </ul>
 </body>
</html>

在这里插入图片描述

1.3

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style> 
   .box {
    width: 1226px;
    height: 615px;
    background-color: #0000FF;
    margin: 0 auto;
   }
   .left {
    width: 234px;
    height: 615px;
    background-color: pink;
    float: left;
   }
   .right {
    width: 992px;
    height: 615px;
    background-color: lightblue;
    float: left;
   }
   .right>div {
    width: 234px;
    height: 300px;
    background-color: purple;
    float: left;
    margin-left: 14px;
    margin-bottom: 14px;
   }
  </style>
 </head>
 <body>
  <div class="box">
   <div class="left"></div>
   <div class="right">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
   </div>
  </div>
 </body>
</html>

在这里插入图片描述

1.4

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   * {
    margin: 0;
    padding: 0;
   }
   li {
    list-style: none;
   }
   .top {
    height: 50px;
    background-color: gray;
   }
   .banner {
    width: 980px;
    height: 150px;
    margin: 10px auto;
    background-color: gray;
   }
   .box {
    width: 980px;
    height: 200px;
    background-color: pink;
    margin: 10px auto;
   }
   .box li{
    width: 237px;
    height: 200px;
    background-color: gray;
    float: left;
    margin-right: 10px;
   }
   .box .last {
    margin-right: 0;
   }
   .footer {
    height: 100px;
    background-color: gray;
   }
  </style>
 </head>
 <body>
  <div class="top">top</div>
  <div class="banner">banner</div>
  <div class="box">
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="last">4</li>
   </ul>
  </div>
  <div class="footer">footer</div>
 </body>
</html>

在这里插入图片描述

2 学成在线案例

成品：

https://github.com/llb1997/css_learn

2.1 案例准备工作

我们本次采取结构与样式相分离思想:
1.创建study目录文件夹(用于存放我们这个页面的相关内容)。
2.用vscode打开这个目录文件夹.
3. study目录内新建images文件夹，用于保存图片。
4.新建首页文件index.html（以后我们的网站首页统一规定为index.html).
5.新建style.css样式文件。我们本次采用外链样式表。
6.将样式引入到我们的HTML页面文件中。
7.样式表写入清除内外边距的样式，来检测样式表是否引入成功。

2.2 CSS属性书写顺序（重点）

建议遵循以下顺序∶
1.布局定位属性:display / position / float / clear/ visibility / overflow(建议display第一个写，毕竟关系到模式)

2.自身属性: width/ height / margin/ padding / border / background

3.文本属性:color / font / text-decoration / text-align/ vertical-align/ white- space / break-word

4.其他属性(CSS3) :content/ cursor / border-radius/ box-shadow / text-shadow/ background:linear-gradient…

2.3 页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路:
1．必须确定页面的版心（可视区），我们测量可得知。
2．分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
3.一行中的列模块经常浮动布局,先确定每个列的大小之后确定列的位置.页面布局第二准则
4.制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
5．所以，先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累.