第四次网页前端培训笔记

qq_57231850

已于 2022-02-08 23:49:05 修改

阅读量262

点赞数

分类专栏： html的学习文章标签：前端 html css

于 2022-02-08 23:39:37 首次发布

本文链接：https://blog.csdn.net/qq_57231850/article/details/122833053

版权

html的学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、总体概述

学习链接：

视频资料：

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

HTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibili

文字资料：

CSS 教程 | 菜鸟教程 (runoob.com)

本次的学习主要内容是HTML中CSS的盒子模型和常用属性，以及通过CSS实现的下拉菜单，导航栏，网页布局设置，以及其相关内容。

二、学习内容

1、CSS的盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
  <style type="text/css">
    #div1{
      position: absolute;/*绝对定位*/
      background-color: red;
      border:  50px black solid;
      width: 300px;
      padding: 10px;
      margin: 0;
      height:  300px;
      left: 100px;
      top: 100px;
    }

  </style>
</head>
<body>
<!--
  CSS盒子模型:
    CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括边距、边框、填充、和实际内容。
    盒模型允许我们再其他元素盒周围元素边框之间的空间放置元素。
    盒子模型包括：Margin(外边距):清除边框外的区域，外边距是透明的。
               Border(边框):围绕在内边距和内容外的边框。
               Padding(内边距):清除内容周围的区域，内边距是透明的。
               Content(内容):盒子的内容，显示文本和图像。
-->
<div id="div1"></div>
</body>
</html>

2、CSS的常用属性

CSS中拥有丰富的属性，详情可参考CSS参考文档。其中比较常用的有文本属性，表格属性，定位属性，内补丁属性，外补丁属性，文字属性，尺寸属性等多个属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式的绝对定位</title>
  <style type="text/css">
    #div1{
      position: absolute;/*绝对定位*/
      background-color: red;
      border:  1px black solid;
      width: 300px;
      height:  300px;
      left: 100px;
      top: 100px;
    }

  </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

每个属性都可以方便对网页中的内容进行调整，使整体看上更加美观且方便操作。

3、下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
        .div1{
            position: relative;
            display: inline-block;
        }
        .div2{
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
        }
        .div1:hover .div2{
            display: block;
        }

        .btn{
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        .div3{
            position: relative;
            display: inline-block;
        }
        .div4{
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .div4 a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .div4 a:hover{background-color: #f1f1f1}
        .div3:hover .div4{
            display: block;
        }
        .div3:hover.btn{
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
<div class="div1" style="float: right">
    <span>鼠标移到我这!</span>
    <div class="div2">
        <p>段落一</p>
        <p>段落二</p>
    </div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="div3" style="float: left">
    <button class="btn">下拉菜单</button>
    <div class="div4">
        <a href="https://www.baidu.com/">百度</a>
        <a href="https://www.bilibili.com/">哔哩哔哩</a>
        <a href="https://www.csdn.net/">CSDN</a>
    </div>
</div>
</body>
</html>

4、导航栏

1.水平导航栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>水平导航条</title>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover {
      background-color: #111;
    }
  </style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

2、垂直导航栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>垂直导航条</title>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
    }

    li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
    }

    li a.active {
      background-color: #4CAF50;
      color: white;
    }

    li a:hover:not(.active) {
      background-color: #555;
      color: white;
    }
  </style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

5、网页布局设置

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

头部区域：位于整个网页顶部，一般用于设置网页的标题或者网页的logo。

菜单导航区域：菜单导航条包含了一些链接，可以引导用户浏览其他页面。

内容区域：一般有三种形式:1 列：一般用于移动端。2 列：一般用于平板设备。3 列：一般用于 PC 桌面设备。

底部区域：底部区域在网页的最下方，一般包含版权信息和联系方式等。

<!--
    该段代码摘自菜鸟教程
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>网页布局</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial;
      padding: 10px;
      background: #f1f1f1;
    }

    /* 头部标题 */
    .header {
      padding: 30px;
      text-align: center;
      background: white;
    }

    .header h1 {
      font-size: 50px;
    }

    /* 导航条 */
    .topnav {
      overflow: hidden;
      background-color: #333;
    }

    /* 导航条链接 */
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    /* 链接颜色修改 */
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    /* 创建两列 */
    /* Left column */
    .leftcolumn {
      float: left;
      width: 75%;
    }

    /* 右侧栏 */
    .rightcolumn {
      float: left;
      width: 25%;
      background-color: #f1f1f1;
      padding-left: 20px;
    }

    /* 图像部分 */
    .fakeimg {
      background-color: #aaa;
      width: 100%;
      padding: 20px;
    }

    /* 文章卡片效果 */
    .card {
      background-color: white;
      padding: 20px;
      margin-top: 20px;
    }

    /* 列后面清除浮动 */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    /* 底部 */
    .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
      margin-top: 20px;
    }

    /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
    @media screen and (max-width: 800px) {
      .leftcolumn, .rightcolumn {
        width: 100%;
        padding: 0;
      }
    }

    /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
    @media screen and (max-width: 400px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }
  </style>
</head>
<body>

<div class="header">
  <h1>网页布局</h1>
</div>

<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>2019 年 4 月 17日</h5>
      <div class="fakeimg" style="height:200px;">图片</div>
      <p>一些文本...</p>
      <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>2019 年 4 月 17日</h5>
      <div class="fakeimg" style="height:200px;">图片</div>
      <p>一些文本...</p>
      <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;">图片</div>
      <p>关于我的一些信息..</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>一些文本...</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>底部区域</h2>
</div>

</body>
</html>

代码原网站：菜鸟教程在线编辑器 (runoob.com)

三、学习总结

本次主要学习了CSS中的一些更为深入的模块。

首先，应当知道CSS本质是一种盒子模型，我们应当知道盒子模型是怎样工作的，应当掌握盒子模型的四个部分，并熟练运用。

其次，学习了下拉菜单，导航栏和网页布局设置。这三块内容的学习，让我对一个网页的构成有了更清晰的了解，以及通过什么元素或控件，通过什么方式去构成一个完整的网页。

最后，CSS中的常用属性虽然极为繁琐，但大部分可以仅留下印象即可，在需要使用时查阅CSS的帮助文档即可，但是，一些必用的，如位置，字体，边距等属性，极为常用，是我们必须要记住的。

qq_57231850

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四次网页前端培训笔记

一、总体概述学习链接：视频资料：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibiliHTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibili文字资料：CSS 教程 | 菜鸟教程 (runoob.com)本次的学习主要内容是HTML中CSS的盒子模型和常用属性，以及通过CSS实现的下拉菜单，导航栏，网页布局设置，以及其相关内容。二、学习内容1、CS...
复制链接

扫一扫