06＜复杂网页＞的一些技巧

Bertha 。 2022-09-07 12:10 172阅读 0赞

### 文章目录 ###

*   *   *   *  首先:以下内容都学自B站尚硅谷课程,链接在此
     *  框
     *   *  设置水平居中
         *  设置垂直居中
         *  探究默认布局
     *  练习
     *   *  图片列表
         *  京东左侧导航栏
         *  网易的新闻列表

#### 首先:以下内容都学自B站尚硅谷课程,链接在此 ####

链接在这:  
[Web前端零基础入门HTML5+CSS3基础教程][Web_HTML5_CSS3]

## 框 ##

### 设置水平居中 ###

*  使一个元素在其父元素中,水平居中

> 首先,设定父元素为一个水平框  
> 其次,设置子元素`width=xxx; margin:0 auto;`

示例:

div.outer{
        
          width : 100%;
          height: 50px;
          margin-top:0;
          margin-right:0;
          border: 1px solid yellow;
        }
    div.inner{
        
       width: 100px;
       height: 50px;
       margin:0 auto;
       background-color:green;
     }
    
    <div class="outer">
        <div class="inner">
    
        </div>
    </div>

![在这里插入图片描述][4471c8f1728c401085478973d6ca7fe2.png]

*  父元素区域会被内容撑开  
    下面的例子中,它的纵向,会被拆开.  
    所以,我们上面的`div`外样式,也可以设置为:

div.outer{
        
          background-color: yellow;
    }

其他的保持不变,效果如下:  
![在这里插入图片描述][cbbda8b1c11f4ef287b55da16749321b.png]

### 设置垂直居中 ###

*  overflow 设置竖直方向溢出:

> 默认值: `visible` ,子元素会从父元素中溢出显示  
> `hidden`: 一剪没,溢出部分不显示  
> `scroll`: 生成2个滚动条,推荐使用下面的  
> `auto`: 根据需要,生成滚动条(不会生成水平的)  
>   
>   
> 此外,还可分别设置水平和竖直方向: `overflow-x`或`-y`

div.v_outer{
        
      width: 200px;
       height:200px;
       background-color: yellow;
       overflow: visible;
     }
    div.v_inner{
        
      width: 100px;
      height:300px;
      background-color: green;
    }
    
    <div class="v_outer">
        <div class="v_inner">
    
        </div>
      </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70]

### 探究默认布局 ###

.outer{
    	width: 200px;
        height:100px;
        border:1px solid black;
    }
    
    <div class="outer"></div>
    <p>我是一个段落!</p>
    <p>我是一个段落!</p>
    <p>我是一个段落!</p>
    
    <ul>
    <li>我是列表1</li>
    <li>我是列表2</li>
    <li>我是列表3</li>
    </ul>

它会形成默认布局,如下:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 1]

*  这个的实现,是修改了默认样式,添加的css格式是:

body{
        
    	margin:0;
    }
    p{
        
    	margin:0;
    }
    ul{
        
    	margin:0;
        padding:0;
        list-style:none;  /*去除项目符号*/
    }

那是去除默认样式时,是怎么知道修改这些项的呢?  
`F12 -> Element -> computed`

*  上面的简写为以下格式:

*{
        
        margin:0;
        padding:0;
      }
      ul{
        
        list-style:none;  /*去除项目符号*/
      }

*  借鉴别人的成果  
    重置样式表:  
    [网站版文档在这里,可以复制][Link 1]

> reset.css 直接去除了浏览器的默认样式  
> normalize.css 对默认样式进行了统一

注意,外置样式表是放在<style>外面,也就是<head>–<style>之间

## 练习 ##

### 图片列表 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_26_color_FFFFFF_t_70_g_se_x_16]  
实现代码如下:

### 京东左侧导航栏 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_22_color_FFFFFF_t_70_g_se_x_16]

### 网易的新闻列表 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_25_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>网易的新闻框</title>
        <link rel="stylesheet" href="reset.css">
        <style>
            a{
          
                text-decoration: none;
            }
            .news-block{
          
                position: absolute;
                left: 50%;
                top:40%;
    
                width: 300px;
                height: 500px;
                background-color: white;
                border-top: 1px solid #ddd;
    
                
                
                overflow: auto;
            }
            .news-title{
          
                height: 40px;
                line-height: 40px;
                /* 为了体育两字上面的红线,设置下面 */
                border-top: 1px red solid;
                display: inline-block; 
    
                /*  设置红色到上面整体灰线中,不知为什么没效果
                    margin-top: -1px; 
                */
            }
            .news-title a{
          
                color: #40406B;
                font-weight: bold;
            }        
            
            .news-img{
          
                /* 设置图片容器宽高 
                注意,这个是用于div的,但是div会被内容撑开
                所以要用px固定住 */
                width: 300px; 
                height:150px;  
                
                /* 设置图片居中 ,好像没用*/
                margin: 0px auto;
    
            }
            .news-img .img-title{
          
                /* 设置在图片中 */
                margin-top: -25px;
                margin-left: 30px;
    
                color: #fff;
                font-weight: bold;
            }
    
            /* 设置新闻列表:整体 */
            .news-list{
          
                margin-top: 20px;
    
                padding-left: 14px;
            }
            
            /* 设置各条新闻边距 */
            .news-list li{
          
                margin-bottom: 10px;            
                margin-left: 8px;
    
                /* 设置字体颜色 */
                font-size: 14px;
                color:#666;
    
                /* 设置项目符号,也可以用伪类设置, */
                list-style: square;
                
            }
    
            li:hover{
          
                color: red;
            }
    
        </style>
    </head>
    <body>
        <div class="news-block">
            <h2 class="news-title">
                <a href="">体育</a> 
            </h2>
            <div class="news-img">
                <a href="">
                    <img src="demo.jpeg" alt="" class="news-img" ismap="ismap">
                    <h3 class="img-title">这个人叫啥,知道的告诉我一下</h3>
                </a>
            </div>
            <ul class="news-list">
                <a href="">
                    <li>这是一个列表01</li>
                </a>
                <a href="">
                    <li>这是一个列表02</li>
                </a>
                <a href="">
                    <li>这是一个列表03</li>
                </a>
                <a href="">
                    <li>这是一个列表04</li>
                </a>
                <a href="">
                    <li>这是一个列表05</li>
                </a>
            </ul>
        </div>
    </body>
    </html>

下一步可以是深入学习一下,伪类,伪操作

[Web_HTML5_CSS3]: https://www.bilibili.com/video/BV1XJ411X7Ud
[4471c8f1728c401085478973d6ca7fe2.png]: /images/20220829/76cde446356b4be0ad1cb0eeb2fe2625.png
[cbbda8b1c11f4ef287b55da16749321b.png]: /images/20220829/77fd460e97df42dc823d0bc217d72fcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70]: /images/20220829/aab9397af157449d97f356422a5eb6fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/d962a9eea5f64c40b766b70e409a2c44.png
[Link 1]: https://meyerweb.com/eric/tools/css/reset/reset.css
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_26_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/1ccd6a2bd31e4b2183f0956b9afe690c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_22_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/6d6672f46dcc4e5fbcb970bbd179e859.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_25_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/15f165698291420bbe3fd352c4f07341.png