网页核心页面设计（第8章）

news2024/12/12 21:59:17

一、伪元素

伪元素是 CSS 中的一种选择器，用于选择某些特定的元素或元素的一部分，而这些元素本身并不存在于文档的结构中。伪元素使得网页设计师可以更灵活地控制样式，从而可以为元素的内容、框架或文本提供额外的样式，增强网页的视觉效果和用户体验。
1、作业

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 24px;
            background-color: #f3f3f3;
            margin: 0 auto;        }
        div::before{
            content: "[";
            margin-right: 20px;
            /* display: none; */
        }
        div::after{
            content: "]";
            margin-left: 20px;
            /* display: none; */

        }
        div::before,div::after{
            transition: all .5s;
            opacity: 0;
        }
        div:hover::after,div:hover::before{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div>CSS</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 24px;
            background-color: #f3f3f3;
            position: relative;
            margin: 100px auto;        }

        /*before：聊天框  after:三角形*/
        div::before{
            content: "CSS伪类";
            width: 200px;
            height: 50px;
            position: absolute;
            top: -80px;
            left: 0;
            background-color:red;
            border-radius: 60px;
            text-align: center;
            line-height: normal;
        }
        div::after{
            content: "";
            position: absolute;
            top: -30px;
            left: 75px;
            width: 0;
            height: 0;
            border:20px solid transparent;
            border-top:20px solid red ;
        }
        div::after,div::before{
            opacity: 0;
            transition: all 1s;
        }
        div:hover::before,div:hover::after{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div>CSS</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
2、伪元素清除浮动

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 30px;
            color: white;
        }
        .floatbox{
            background-color: blue;
            float: left;
        }
        .box{
            background-color: red;
        }
        #wrap::after{
            content: "";
            display:block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="floatbox">float</div>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

二、BFC

BFC 的特点
独立性：BFC 内部的元素不会影响外部元素，外部元素也不会影响内部元素。这种独立性使得布局更加可控。

清除浮动：当 BFC 中的元素浮动时，它会包裹住这些浮动的元素，避免其影响到外部的布局，有助于解决清除浮动的问题。

高度计算：BFC 可以计算其内部元素的高度，避免父元素高度塌陷的问题。即使内部没有内容，BFC 也会根据内部元素的布局计算出高度。
1、盒子放置特点

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 触发BFC，div内部区域会有bfc的特点 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个p标签</p>
        <div style="width: 100px; height: 100px;">
            <p >这是第二个个p标签</p>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
2、margin重叠

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 触发BFC，div内部区域会有bfc的特点 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个p标签</p>
        <div style="width: 100px; height: 100px;">
            <p >这是第二个个p标签</p>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
3、左边界接触

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 触发BFC，div内部区域会有bfc的特点 */
            overflow: hidden;
        }
        p{
            width: 100px;
            background-color: blue;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个p标签</p>
       
            <p >这是第二个个p标签</p>
        
    </div>
</body>
</html>

在这里插入图片描述
4、不会和浮动盒子重叠

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 触发BFC，div内部区域会有bfc的特点 */
            /* overflow: hidden; */
        }
        #float-box{
            float: left;
        }
        #bfc-box{
            height: 300px;
            background-color: blue;
            overflow: hidden;
        }
        
    </style>
</head>
<body>
    <div id="float-box">
        
    </div>
    <div id="bfc-box"></div>
</body>
</html>

在这里插入图片描述
5、隔离容器

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 触发BFC，div内部区域会有bfc的特点 */
            /* overflow: hidden; */
        }
        #float-box{
            color: red;
            /* display: flex; */
        }
        #bfc-box{
            height: 300px;
            background-color: blue;
        }
        
    </style>
</head>
<body>
    <div id="float-box">
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
    </div>
    <div id="bfc-box"></div>
</body>
</html>

在这里插入图片描述
6、浮动元素高度计算

<!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>Document</title>
    <style>
        div{
            width: 300px;
            /* height: 300px; */
            background-color: red;
            /* 触发BFC，div内部区域会有bfc的特点 */
            overflow: hidden;
        }
        #bfc-box{
            background-color: blue;
            /* overflow: hidden; */
        }
        #bfc-box p{
            float: left;
            width: 100px;
        }
        
    </style>
</head>
<body>
    <div id="bfc-box">
        <p>这是一个p标签</p>
        <p>这是一个p标签</p>
    </div>
</body>
</html>

在这里插入图片描述
7、三栏式布局

<!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>Document</title>
    <style>
        #left,#right{
            width: 200px;
            height: 300px;
        }
        #left{
            float: left;
            background-color: yellow;
        }
        #right{
            float: right;
            background-color:green;
        }
        #main{
            /* width: 100%; */
            /* min-width: 300px; */
            height: 500px;
            background-color: greenyellow;
            /* 触发bfc */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
    <div id="main"></div>
    
</body>
</html>

在这里插入图片描述

三、IFC

IFC 的特点
行内布局：IFC 主要影响行内元素及它们在文本流中的排列方式。行内元素在一行中布局，它们的高度和宽度通常由内容决定，而不会产生块级元素的特性。

行内上下文：在 IFC 中，行内元素可以在一行内与其他行内元素、文本、图像等交错显示，但不会导致行高的变化（除非用 line-height 等属性进行调整）。

包含的元素：在 IFC 内，可以包含其他行内元素和块级元素，但块级元素会触发上下文的变化，通常会导致换行。

对齐与间距：IFC 允许使用 vertical-align 和 text-align 等属性来控制元素的对齐和间距。
1、简介

<!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>Document</title>
    <style>
        div{
            border: 1px solid red;
            width: 400px;
        }
    </style>
</head>
<body>
    <div>
        <span>这是span标签</span>
        <a href="#">百度一下</a>
        <input type="text">
        <button>登录</button>
    </div>
</body>
</html>

在这里插入图片描述
2、font-size

<!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>Document</title>
    <style>
        div{
            border: 1px solid red;
            width: 400px;
            
        }
        span{
           
        }
    </style>
</head>
<body>
    <div>
      整个ifc区域中只有文字<span>span中的 文字</span>
    </div>
</body>
</html>

在这里插入图片描述
3、font-family

<!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>Document</title>
    <style>
        div{
            border: 1px solid red;
            width: 400px;
            /* line-height: 2px; */
            font-family:'ca';
            font-size: 30px;
            /* line-height: 2px; */
            /* line-height: 1px; */
            line-height: 50px;
            font-size: 100px;
        }
        @font-face {
            font-family: "徐静蕾字体";
            src: url("font/徐静蕾字体.fon");
        }
        @font-face {
            font-family: "ca";
            src: url("font/Catamaran-Bold.ttf");
        }
        span{
         
        }
    </style>
</head>
<body>
    <div>
     <span>整个ifc</span> 
    </div>
</body>
</html>

在这里插入图片描述
4、line-height

<!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>Document</title>
    <style>
        div{
            border: 1px solid red;
            width: 400px;
            line-height: 2px;
        }
        span{
           /* line-height: 2;font-size的2倍 */
           /* line-height: 2px; */
        }
    </style>
</head>
<body>
    <div>
      整个ifc区域中只有文字span中的 文字
      整个ifc区域中只有文字span中的 文字
    </div>
</body>
</html>

在这里插入图片描述
5、verrical-align

<!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>Document</title>
    <style>
        div{
            border: 1px solid red;
            line-height: 160px;
            /* line-height: 148px; */
            font-family: "ca";
            
        }
        img,button,input{
            vertical-align: text-top;
        }
        img{
            /* height: 50px; */
        }
        span{
            
        }
        a{
            font-size: 140px;
        }

        
        @font-face {
            font-family: "ca";
            src: url("font/Catamaran-Bold.ttf");
        }
    </style>
</head>
<body>
    <div>
        
        这是
        <img src="1.png" alt="">
          这是
        <a href="#">百度一下</a>
        <input type="text">
        <button>登录</button>
    </div>
</body>
</html>

在这里插入图片描述

四、弹性布局

弹性布局（Flexbox）是一种用于设计网页布局的CSS布局模式，它提供了一种更有效的方式来布置、对齐和分配空间给容器内的项目。弹性布局特别适用于需要在不同屏幕上进行响应式设计的场合。
1、介绍

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            font-size: 30px;
            display: inline-block ;
        }
        #second{
            display: inline-flex;
        }

    </style>
</head>

<body>
    <div>1</div>
    <div id="second">2</div>
    <div>3</div>
</body>
</html>

在这里插入图片描述
2、子元素

<!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>Document</title>
    <style>
        #second{
            display: inline-flex;
            /* width: 1200px; */
            height: 500px;
            border:1px solid red;
            font-size: 30px;
            display:flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 0 auto;
        }
        #second div{
            width: 200px;
            height: 100px;
            margin-left: 20px;
            margin-top: 20px;
            background-color: red;
        }

    </style>
</head>

<body>
    <div id="second">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>
</html>

在这里插入图片描述
3、弹性容器-基础

<!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>Document</title>
    <style>
        #list{
            width: 60%;
            margin: 0 auto;
            /* height: 1000px; */
            height: 1000px;
            background-color: #f3f3f3;
            display: flex;
            /* flex-direction: column-reverse; 改变主轴*/  
            justify-content: center;
            align-content: center;
            /* align-items: stretch; */
            /* align-items: center; */
            flex-wrap: wrap;
        }
        #list div{
            width: 200px;
            height: 200px;
            background-color: tomato;
            /* line-height: 200px; */
            text-align: center;
            font-size: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="list">
        <div style="height: 150px;">1</div>
        <div style="height: 200px;">2</div>
        <div style="height: 300px;">3</div>
        <div style="height: 200px;">4</div>
        <!-- <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>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div> -->
    </div>
</body>
</html>

在这里插入图片描述
4、弹性容器-收缩比例

<!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>Document</title>
    <style>
        #list{
            width: 600px;
            margin: 0 auto;
            /* height: 1000px; */
            height: 1000px;
            background-color: #f3f3f3;
            display: flex;
            /* flex-direction: column-reverse; 改变主轴*/  
            /* justify-content: center; */
            /* align-content: center; */
            /* align-items: stretch; */
            /* align-items: center; */
            /* flex-wrap: wrap; */
        }
        #list div{
            width: 200px;
            height: 200px;
            background-color: tomato;
            /* line-height: 200px; */
            text-align: center;
            font-size: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="list">
        <!-- <div style="height: 150px;">1</div>
        <div style="height: 200px;">2</div>
        <div style="height: 300px;">3</div>
        <div style="height: 200px;">4</div> -->
        <div style="flex-shrink: 1;">1</div>
        <div style="flex-shrink: 1;">2</div>
        <div style="flex-shrink: 0;">3</div>
        <div style="flex-shrink: 0;">4</div>
        <!-- <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div> -->
    </div>
</body>
</html>

在这里插入图片描述

五、jquery基础

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档的遍历和操作、事件处理、动画以及 Ajax 交互。
1、基础

<!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>Document</title>
    <style>
      body {
        margin: 0;
      }
      header {
        height: 50px;
        background-color: #ccc;
        display: flex;
      }
      img {
        width: 10%;
      }
      ul {
        width: 90%;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
      }
      li {
        width: 20%;
        text-align: center;
        line-height: 50px;
      }
      .item {
        width: 300px;
        /* height: 400px; */
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        /* flex-grow: 1; */
        margin-left: 15px;
        transition: all 0.5s;
      }
      .item img {
        width: 100%;
      }
      .price {
        color: darkred;
        font-size: 24px;
        font-weight: bold;
      }
      main {
        width: 80%;
        margin: 0 auto;
        border: 1px solid red;
        /* height: 2000px; */
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: flex-start;
      }
      #first{
          background-color: darkred;
          order: 1;
      }
      #last{
        background-color: darkblue;
          order: -1;
      }
    </style>
  </head>
  <body>
    <header>
      <img src="images/logo.png" alt="" />
      <ul>
        <li>第1项哈哈哈</li>
        <li>第2项哈哈哈</li>
        <li>第3项哈哈哈</li>
        <li>第4项哈哈哈</li>
        <li>第5项哈哈哈</li>
      </ul>
    </header>

    <main id="list">
      <div class="item" id="first">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
      <div class="item" id="last">
        <img src="images/id1.jpg" alt="" />
        <p>[蜗牛]不锈钢装饰物品</p>
        <p class="price">￥ 998</p>
      </div>
    </main>
  </body>
</html>

在这里插入图片描述
在这里插入图片描述
2、字体图标设计

<!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>Document</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        a{
            color: red;
        }
    </style>
</head>
<body>
    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
    <a href="#">
        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
        百度一下</a>
</body>
</html>

在这里插入图片描述
3、实战

<!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>Document</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body{
            background-color: #f3f3f3;
            margin: 0;
        }
        header{
            height: 50px;
            background-color: black;
            display: flex;
            justify-content: space-between;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 2;
        }
        #logo{
            height: 50px;
            line-height: 50px;
        }
        #logo img{
            height: 30px;
            vertical-align: middle;
        }
       header ul{
            /* width: 90%;
            min-width: 700px; */
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            color: white;
            /* align-content: center; */
        }
       header ul li{
            line-height: 50px;
            /* padding:20px; */
            width: 100px;
            text-align: center;
            
        }
        #search-box{
            height: 500px;
            background-image: url("images/4.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
            background-attachment: fixed;
            position: relative;
           
        }
        #search-box .search{
            width: 500px;
            height: 200px;
            background-color: blue;
            position: fixed;
            top: 150px;
            left: 0;
            right: 0;
            margin:auto;
        
        }
        nav{
            background-color: #fff;
            color: gray;
            height: 50px;
        }
        nav ul{
            height: 100%;
            width: 80%;
            list-style: none;
            margin: 0 auto;
            padding: 0;
            display: flex;
            align-content: center;
            flex-wrap: wrap;
        }
        nav ul li{
            flex-grow: 1;
            text-align: center;
            height: 25px;
            border-right: 1px solid #ccc;
        }
        
        .noborder{
            border: none;
        }

        main{
            width: 80%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }
        main div{
            flex-grow: 1;
            width: 200px;
            height: 200px;
            background-color: darkred;
            line-height: 200px;
            font-size: 30px;
            color: white;
            text-align: center;
            margin-top: 15px;
            margin-left: 15px;
            
        }
        main div:hover{
            box-shadow: 0 0 10px 5px rgba(0,0,0);
        }
        #main{
            width: 100%;
            height: 2000px;
            position: relative;
            z-index: 1;
            background-color: #f3f3f3;
        }
        
    </style>
</head>
<body>
    <header>
        <div id="logo">    
            <img src="images/logo.png" alt="">
        </div>
        
        <ul>
            <li><i class="fa fa-edit"></i> 在线编辑</li>
            <li><i class="fa fa-edit"></i> 在线编辑</li>
            <li><i class="fa fa-edit"></i> 在线编辑</li>
            <li><i class="fa fa-edit"></i> 在线编辑</li>
            <li><i class="fa fa-edit"></i> 在线编辑</li>
            <li><i class="fa fa-edit"></i> 在线编辑</li>
            <li><i class="fa fa-edit"></i> 在线编辑</li>
        </ul>
    </header>
    <!-- 搜索区域 -->

    <div id="search-box">
        <div class="search">
            <input type="text"><button>登录</button>
        </div>
    </div>

    <div id="main">
        <nav>
            <ul>
                <li><i class="fa fa-edit"></i>网页模板</li>
                <li><i class="fa fa-edit"></i>网页模板</li>
                <li><i class="fa fa-edit"></i>网页模板</li>
                <li><i class="fa fa-edit"></i>网页模板</li>
                <li><i class="fa fa-edit"></i>网页模板</li>
                <li><i class="fa fa-edit"></i>网页模板</li>
                <li><i class="fa fa-edit"></i>网页模板</li>
                <li><i class="fa fa-edit"></i>网页模板</li>
                <li><i class="fa fa-edit"></i>网页模板</li>
                <li class="noborder"><i class="fa fa-edit"></i>网页模板</li>
            </ul>
        </nav>
    
    
    
        <main>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </main>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
4、边框阴影

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 200px auto;
            box-shadow: 0 0 3px 3px #aaa;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述
5、边框固定

<!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>Document</title>
    <style>
        #demo{
            width: 100%;
            height: 400px; 
            margin: 0px auto;
            box-shadow: 0 0 3px 3px #aaa;
            background-image: url("images/4.jpg");
            background-size: cover;
            margin-bottom: 0px;
            background-attachment: fixed;
        }
        #demo2{
            width: 800px;
            height: 2300px; 
            background-color: red;
            margin: 0 auto;
            background-image: url("images/id1.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <div id="demo2"></div>
    
</body>
</html>

在这里插入图片描述
在这里插入图片描述

🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2258440.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

黑马商城微服务复习（5）

黑马商城微服务复习（5）

MQ 一、同步调用和异步调用1. 同步调用2. 异步调用 二、RabbitMQ1. 基础使用2. 实际操作 怎么用?3. RabbitMQ虚拟主机 数据隔离4. 在JAVA中实现RabbitMQ5. 交换机种类 一、同步调用和异步调用 1. 同步调用 微服务一旦拆分&#xff0c;必然涉及到服务之间的相互调用&#xff…
阅读更多...
【MySQL】表的基本查询（上）

【MySQL】表的基本查询（上）

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…
阅读更多...
【Java学习笔记】Map接口和常用方法

【Java学习笔记】Map接口和常用方法

一、 Map接口实现类的 特点[很实用] key是自己存的java对象 value是一个固定的 //当有相同的 k ,就等价于替换. 二、 Map常用方法 &#xff08;根据键–>k&#xff09; 三、Map接口遍历方法 package com.hspedu.map_; import java.util.*; /** * author 韩顺平 * ver…
阅读更多...
MySQL8版本升级

MySQL8版本升级

1.官方升级手册必看 1.1 理解升级过程会做什么 手册网址&#xff1a;https://dev.mysql.com/doc/refman/8.0/en/upgrading.html 升级mysql 系统数据库&#xff08;默认的库&#xff09;&#xff0c;升级mysql 用户数据库&#xff08;用户创建的库&#xff09; 升级步骤分为…
阅读更多...
CTFshow-命令执行(Web29-40)

CTFshow-命令执行(Web29-40)

CTFshow-命令执行(Web29-40) CTFWeb-命令执行漏洞过滤的绕过姿势_绕过空格过滤-CSDN博客 总结rce&#xff08;远程代码执行各种sao姿势&#xff09;绕过bypass_远程命令执行绕过-CSDN博客 对比两者的源代码&#xff0c;我们发现&#xff0c;cat指令把flag.php的内容导出后依…
阅读更多...
【OpenCV】直方图

【OpenCV】直方图

理论 可以将直方图视为图形或曲线图&#xff0c;从而使您对图像的强度分布有一个整体的了解。它是在X轴上具有像素值(不总是从0到255的范围)&#xff0c;在Y轴上具有图像中相应像素数的图。 这只是理解图像的另一种方式。通过查看图像的直方图&#xff0c;您可以直观地了解该…
阅读更多...
OpenAI直播发布第4天：ChatGPT Canvas全面升级，免费开放！

OpenAI直播发布第4天：ChatGPT Canvas全面升级，免费开放！

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;专注于分享AI全维度知识&#xff0c;包括但不限于AI科普&#xff0c;AI工…
阅读更多...
PDF 文件如何转为 CAD 图纸？PDF2CAD 使用教程

PDF 文件如何转为 CAD 图纸？PDF2CAD 使用教程

在工程设计和建筑行业中&#xff0c;PDF 文件常常被用来分享和存档图纸。然而&#xff0c;当需要对这些图纸进行编辑或进一步开发时&#xff0c;静态的 PDF 格式就显得力不从心了。这时候&#xff0c;将 PDF 文件转换为可编辑的 CAD&#xff08;计算机辅助设计&#xff09;格式…
阅读更多...
JS进阶DAY3|事件（三）事件委托

JS进阶DAY3|事件（三）事件委托

目录 一、事件委托 1.1 概念 1.2 代码示例 二、tab栏切换案例 一、事件委托 1.1 概念 事件委托是一种在JavaScript中常用的技术&#xff0c;它利用了DOM事件冒泡的原理。事件冒泡是指当在DOM树中较低层次的元素上发生事件时&#xff0c;这个事件会向上冒泡到更高层次的元素…
阅读更多...
小白如何学习看懂CAD图纸？

小白如何学习看懂CAD图纸？

首先&#xff0c;你需要了解CAD图纸的基本构成&#xff0c;包括图例、尺寸标注、比例等等。接着&#xff0c;你可以通过一些专业的书籍、在线课程或视频教程来逐步学习如何识别和理解这些元素。但建议不要学的太复杂了。 掌握基本概念&#xff1a; 坐标系&#xff1a;了解CAD…
阅读更多...
让PPT不再“难搞”：智能工具如何改变办公体验

让PPT不再“难搞”：智能工具如何改变办公体验

PPT的世界是一场属于设计感与逻辑力的双重较量。那些字体配色的小心思&#xff0c;排版设计的大考验&#xff0c;无不让人抓耳挠腮。然而&#xff0c;科技的加持让这一切正悄然改变。比如&#xff0c;随着 ai生成ppt 工具的兴起&#xff0c;许多复杂操作正被重新定义&#xff0…
阅读更多...
大语言模型（LLM）与智能机器人的应用分析

大语言模型（LLM）与智能机器人的应用分析

系列文章目录 前言 近年来，大型语言模型（LLM）的集成彻底改变了机器人领域，使机器人能够以人类熟练程度进行交流、理解和推理。本文探讨了 LLM 对机器人的多方面影响，并针对在不同领域利用这些模型的关键挑战和机遇进行了研究。通过将 LLM 应用程序分类并分析核心机器人元素…
阅读更多...
【论文速读】| AttackQA：利用微调及开源大语言模型辅助网络安全运营的数据集的开发与应用

【论文速读】| AttackQA：利用微调及开源大语言模型辅助网络安全运营的数据集的开发与应用

基本信息 原文标题: AttackQA: Development and Adoption of a Dataset for Assisting Cybersecurity Operations Using Fine-Tuned and Open-Source LLMs 原文作者: Varun Badrinath Krishna 作者单位: SambaNova Systems 关键词: 网络安全、检索增强生成&#xff08;RAG&…
阅读更多...
Android 车载虚拟化底层技术-Kernel 5.10 -Android12(multi-cards)技术实现

Android 车载虚拟化底层技术-Kernel 5.10 -Android12(multi-cards)技术实现

详细代码实现见 Android Display Graphics系列文章-汇总​​​​​​Android Display Graphics系列文章-汇总 Android Display Graphics系列文章-汇总 Android Display Graphics系列文章-汇总 本文主要包括部分&#xff1a; 一、Android12的Kernel 5.10版本 1.1 Kernel 5…
阅读更多...
lqb_算法

lqb_算法

1.蓝桥杯2024年第十五届决赛真题- 蚂蚁开会 题目描述 二维平面上有 n 只蚂蚁&#xff0c;每只蚂蚁有一条线段作为活动范围&#xff0c;第 i 只蚂蚁的活动范围的两个端点为 (uix, uiy),(vix, viy)。现在蚂蚁们考虑在这些线段的交点处设置会议中心。为了尽可能节省经费&#xf…
阅读更多...
【银河麒麟高级服务器操作系统】修改容器中journal服务日志存储位置无效—分析及解决方案

【银河麒麟高级服务器操作系统】修改容器中journal服务日志存储位置无效—分析及解决方案

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn 服务器环境以及配置 【机型】 整机类型/架构&am…
阅读更多...
springboot422甘肃旅游服务平台代码-(论文+源码)_kaic

springboot422甘肃旅游服务平台代码-(论文+源码)_kaic

摘 要 使用旧方法对甘肃旅游服务平台的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在甘肃旅游服务平台的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的…
阅读更多...
决策曲线分析（DCA）中平均净阈值用于评价模型算法（R自定义函数）

决策曲线分析（DCA）中平均净阈值用于评价模型算法（R自定义函数）

决策曲线分析&#xff08;DCA&#xff09;中平均净阈值用于评价模型算法 DCA分析虽然不强调用来评价模型算法或者变量组合的优劣&#xff0c;但是实际应用过程中感觉DCA曲线的走势和模型的效能具有良好的一致性&#xff0c;其实这种一致性也可以找到内在的联系&#xff0c;比如…
阅读更多...
短信验证码burp姿势

短信验证码burp姿势

首先声明&#xff0c;本文仅仅作为学习使用&#xff0c;因个人原因导致的后果&#xff0c;皆有个人承担&#xff0c;本人没有任何责任。 在之前的burp学习中&#xff0c;我们学习了图片验证码的突破&#xff0c;但是现实中还有很多短信验证码&#xff0c;在此我介绍几种短信验…
阅读更多...
机器学习：全面学习路径指南

机器学习：全面学习路径指南

摘要&#xff1a; 本文精心规划了一条从入门到精通机器学习的学习路线&#xff0c;详细涵盖了基础理论构建、核心技术栈掌握、主流算法学习、实践项目锻炼以及前沿领域探索等多个关键阶段。通过逐步深入各个层面&#xff0c;介绍必备的数学知识、编程工具、经典与现代机器学习算…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023