div css制作网页实战笔记心得

下面是详细的“div css制作网页实战笔记心得”的完整攻略:

1.什么是div和css?

1.1 div是什么?

div是HTML中一个标签,它代表一个没有具体含义的元素容器,可以用来把网页内容划分成不同的块。我们可以在CSS中为它定义样式,使它的外观和行为与其它元素不同。

1.2 CSS是什么?

CSS(Cascading Style Sheets)翻译为层叠式样式表,是一种用来定义网页样式的语言。通过CSS,我们可以为网页元素定义外观、位置、动画等特性,让网页更加美观和易于操作。

2.如何用div和css制作网页?

2.1 HTML基本结构

HTML是整个网页的骨架,它定义了网页的结构。以下是一个典型的HTML结构:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <h1>网页标题</h1>
  </div>
  <div class="content">
    <p>这是内容区域。</p>
  </div>
  <div class="footer">
    <p>版权所有</p>
  </div>
</body>
</html>

上面的代码中,<html>标签包围整个网页内容,<head>标签包围了一些网页元数据(例如标题、样式表等),<body>标签包围网页的实际内容。<div>标签用来划分不同的内容区块,在CSS中为每个div指定样式。

2.2 CSS样式表书写

在HTML中引用一个CSS样式表,在<head>标签中使用<link>标签,例如:

<link rel="stylesheet" href="style.css">

这样会把当前目录下的“style.css”文件作为样式表导入到HTML页面里。下面是一个简单的样式表例子:

.header {
  background-color: #ccc;
  height: 60px;
  text-align: center;
  line-height: 60px;
}

.content {
  background-color: #f5f5f5;
  padding: 20px;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

上面的CSS样式表定义了三个类(class).header.content.footer。这些类分别对应上面HTML中的三个<div>标签。在CSS中,我们可以为不同的类定义不同的外观和行为,使页面变得美观、易于操作等。

3.示例说明

3.1 示例1:网页布局

下面是一个比较完整的示例,它演示了如何用div和CSS创建一个网页的布局效果。请参考下面HTML和CSS代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页布局示例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <h1>网页布局示例</h1>
    <ul>
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
      <li><a href="#">链接3</a></li>
    </ul>
  </div>
  <div class="content">
    <div class="aside">
      <h2>侧边栏</h2>
      <ul>
        <li><a href="#">侧边栏链接1</a></li>
        <li><a href="#">侧边栏链接2</a></li>
        <li><a href="#">侧边栏链接3</a></li>
      </ul>
    </div>
    <div class="main">
      <h2>主要内容</h2>
      <p>这里是主要内容,可以放一些文章或者图片等。</p>
    </div>
  </div>
  <div class="footer">
    <p>版权所有</p>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
}

.header {
  background-color: #ddd;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.header h1 {
  display: inline-block;
  font-size: 24px;
  margin-right: 30px;
}

.header ul {
  display: inline-block;
  list-style: none;
}

.header li {
  display: inline-block;
  margin-right: 20px;
}

.header li a {
  color: #333;
  text-decoration: none;
}

.content {
  display: flex;
  margin-top: 20px;
}

.aside {
  background-color: #eee;
  width: 250px;
  height: 400px;
  padding: 20px;
}

.aside h2 {
  font-size: 18px;
}

.aside ul {
  margin-top: 10px;
}

.aside li {
  margin-bottom: 10px;
}

.aside li a {
  color: #333;
}

.main {
  flex: 1;
  background-color: #f5f5f5;
  padding: 20px;
}

.footer {
  background-color: #333;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
}

上面的代码展示了一个常见的网页布局模式。其中,<div class="header">表示网页的头部,<div class="content">表示网页的正文内容,包括一个侧边栏和主要内容区块,<div class="footer">表示网页的底部。CSS中的样式则定义了这些元素的外观和布局特性,例如背景颜色、字体大小、间距等。

3.2 示例2:网页导航栏

下面是一个简单的示例,它演示了如何用CSS实现一个简单的网页导航栏。具体代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页导航栏示例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="navbar">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
}

.navbar {
  background-color: #333;
  height: 60px;
  line-height: 60px;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  float: left;
  margin-right: 20px;
}

.navbar li:last-child {
  margin-right: 0;
}

.navbar li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  height: 60px;
  line-height: 60px;
  border-bottom: 3px solid transparent;
}

.navbar li a:hover {
  border-bottom-color: #fff;
}

上面的代码中,<div class="navbar">表示网页导航栏,包括一个无序列表(<ul>)和若干个列表元素(<li>),每个列表元素包含一个超链接(<a>)。CSS样式表定义了这些元素的外观和排列方式,使网页导航栏更加美观和易于操作。其中,float: left 风格使得 li 元素左浮动,border 属性使得鼠标划过时链接底部呈现一条边框,为导航栏增强了焦点状态。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:div css制作网页实战笔记心得 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • css样式引入方式及优缺点介绍

    下面就是关于CSS样式引入方式及优缺点的完整攻略。 CSS样式的引入方式 在网页中,CSS样式一般通过以下三种方式进行引入: 1. 内联样式 内联样式就是将CSS样式直接写在HTML标签中的style属性里。 示例代码: <p style="color: red; font-size: 20px;">这段文字将会以红色和20p…

    css 2023年6月10日
    00
  • 一些CSS的设计原则浅谈

    一些CSS的设计原则浅谈 CSS(层叠样式表)是Web开发中最常用的样式定义方法,它可以对网站元素进行美化和布局控制。在使用CSS时,需要遵守一些基本的设计原则,以保证样式代码的复用、可扩展性和可维护性。下面是一些CSS的设计原则浅谈。 命名规范 命名规范是CSS设计的重要环节,好的命名规范可以使CSS的可读性和可维护性大大提高。一般来说,命名应该具有以下几…

    css 2023年6月9日
    00
  • 借助得力工具五分钟快速制作CSS导航菜单

    下面是关于“借助得力工具五分钟快速制作CSS导航菜单”的完整攻略: 什么是得力工具? 得力工具是一款能够帮助用户快速制作CSS导航菜单的在线工具,无需编写CSS代码,只需要使用简单的拖拽操作,就能够创建出漂亮且实用的导航菜单。 如何使用得力工具制作CSS导航菜单? 以下是使用得力工具制作CSS导航菜单的详细步骤: 步骤一:打开得力工具网站 在浏览器中输入得力…

    css 2023年6月10日
    00
  • 用CSS3写的模仿iPhone中的返回按钮

    下面我就为你详细讲解“用CSS3写的模仿iPhone中的返回按钮”的攻略。 一、概述 我们在开发WebApp和移动端页面时,常常需要使用到类似于iPhone中的返回按钮。而且,我们也经常可以看到网站使用CSS写的返回按钮样式。本文就是通过CSS3来写一个模仿iPhone中的返回按钮。 二、实现步骤 1. 基本样式 首先,我们需要做的就是基本样式的定义。我们可…

    css 2023年6月10日
    00
  • Java Selenide 简介与用法

    Java Selenide 简介与用法 简介 Java Selenide 是一个简单的 Selenium Java 框架,可以简化 Web UI 自动化测试。它使用选择器来定位 Web 元素,可以很方便地处理 Ajax 等异步加载,提供了很多有用的 API。相对于传统的 Selenium,Selenide 更易读易维护。 安装 Selenide 的依赖可以在…

    css 2023年6月9日
    00
  • jQuery中DOM树操作之复制元素的方法

    jQuery是一个用于JavaScript开发的快捷、简单的库,提供了许多操作DOM的方法,其中包括复制元素的方法。接下来,我将详细讲解如何使用jQuery复制元素的方法。 一、基本语法 复制元素的基本语法如下: $(selector).clone(); 其中,selector指定要复制的元素的选择器,可以选择复制该元素的所有子元素。该方法会返回一个副本元素…

    css 2023年6月9日
    00
  • JS图片懒加载库VueLazyLoad详解

    JS图片懒加载库VueLazyLoad详解 什么是图片懒加载 图片懒加载是一种技术手段,用于减少页面加载时的请求次数。它将一些图片的资源延迟加载,直到用户需要访问它们的时候才进行加载,从而提高页面的加载速度。 VueLazyLoad介绍 VueLazyLoad是一个基于Vue.js的图片懒加载库。它能够处理负责的图片加载,让网页的加载速度更快,用户体验更好。…

    css 2023年6月11日
    00
  • jQuery EasyUI实现右键菜单变灰不可用效果

    实现右键菜单变灰不可用的效果,需要对jQuery EasyUI组件中的menu、menuitem进行操作。下面是具体的步骤: 1.在EasyUI中定义菜单 首先在HTML文件中定义一个菜单: <div id="myMenu" style="width: 120px;"> <div id="m…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部