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日

相关文章

  • js 右侧浮动层效果实现代码(跟随滚动)

    下面是详细讲解“js 右侧浮动层效果实现代码(跟随滚动)”的完整攻略。 概述 右侧浮动层效果是一种常见的网页设计方法,可以在页面中增加活力和美观度。本文将介绍如何利用 JavaScript 实现一个滚动时跟随的右侧浮动层效果。 实现步骤 HTML 在页面中添加一个右侧浮动层的 HTML 结构: <div class="right-float&…

    css 2023年6月10日
    00
  • 用JS实现一个页面多个css样式实现

    使用JS实现一个页面多个css样式的实现,可以通过DOM对象的style属性来操作指定元素的样式。 具体实现步骤如下: 1. 获取需要操作的元素 通过JS的getElementById、getElementsByClassName等方法获取需要操作的元素,例如: var box = document.getElementById(‘box’); 2. 给元素…

    css 2023年6月10日
    00
  • 不使用class和id进行网页布局的方法

    不使用class和id进行网页布局的方法是通过CSS选择器和HTML标签属性来实现网页布局的一种方式。以下是具体的攻略过程: 使用HTML标签属性进行区分 在HTML中每个标签都有若干个属性,比如a标签有href属性用于指定链接地址,img标签有src属性用于指定图片资源。因此可以使用这些标签本身所具有的属性来进行区分和样式的设置。例如,通过以下的代码来实现…

    css 2023年6月9日
    00
  • layui固定下拉框的显示条数(有滚动条)的方法

    针对“layui固定下拉框的显示条数(有滚动条)的方法”的问题,我提供以下完整攻略: 问题说明 在 layui 的下拉框组件中,当下拉列表数据过多的时候,下拉框会直接将所有数据显示出来,这样会让用户界面出现滚动条,用户体验不佳。因此我们需要对下拉框的显示进行优化,使其只显示固定数量的选项,当选项超出这个数量时,会出现滚动条。 解决方法 我们可以使用 CSS …

    css 2023年6月10日
    00
  • css中有序无序列表项list样式设置方法

    下面是 “CSS中有序无序列表项list样式设置方法” 的完整攻略: 理解有序列表和无序列表 在开始讲解样式设置方法之前,首先需要了解有序列表和无序列表的概念。 有序列表(Ordered List,OL) 有序列表是指按照顺序排列的列表,一般使用数字或字母来标识每个列表项。 例如: 第一项 第二项 第三项 无序列表(Unordered List,UL) 无序…

    css 2023年6月13日
    00
  • JavaScript解析JSON

    JavaScript解析JSON的步骤: 将JSON字符串转换为对象 通过对象属性访问JSON数据 组合JSON数据 以下是JavaScript解析JSON的完整攻略: 1. 将JSON字符串转换为对象 JavaScript中有一个JSON对象,它有两个方法:JSON.parse() 和 JSON.stringify()。其中,JSON.parse()用于将…

    Web开发基础 2023年3月30日
    00
  • css中position:fixed实现div居中上下左右居中

    首先,我们需要了解一下position属性的取值。CSS中的position属性常用的取值有:static、relative、absolute和fixed。 其中,fixed可以使元素固定在页面中的某一个位置,不随着滚动而改变位置,这就非常适合实现div居中上下左右居中的效果。 下面我们来详细讲解一下如何用position:fixed实现div居中上下左右居…

    css 2023年6月10日
    00
  • css 控制鼠标显示样式示例

    当我们在开发网站时,经常会遇到需要控制鼠标显示样式的情况,比如在图片上悬停时显示手型光标,或者在表单元素上悬停时显示输入光标等。在这种情况下,需要使用 CSS 的 cursor 属性控制鼠标显示样式。下面我将详细讲解“CSS 控制鼠标显示样式示例”的完整攻略。 1. 基础语法 CSS 的 cursor 属性用于设置鼠标指针的样式,其基本语法如下所示: sel…

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