HTML+CSS自学制作的第一个网页资源-CSDN文库

共41个文件

png：38个

css：2个

html：1个

65 浏览量 2023-12-01 23:12:43 上传评论收藏 1.1MB ZIP 举报

HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是网页设计的两大核心技术，它们共同构建了互联网上丰富多彩的用户体验。HTML负责定义网页的内容结构，而CSS则用于控制这些内容的呈现样式。 HTML是一种标记语言，它通过一系列标签来描述网页的各个元素，如标题、段落、图片、链接等。在"HTML+CSS自学制作的第一个网页"项目中，初学者通常会学习如何使用这些基本标签来构建一个简单的网页布局。例如，`<html>`标签定义了整个文档的起点，`<head>`包含了页面元信息，而`<body>`则包含了用户可见的内容。标题标签如`<h1>`到`<h6>`用来创建不同级别的标题，`<p>`用于创建段落，`<a>`用于创建超链接，`<img>`则用于插入图像。 CSS则为这些HTML元素提供了视觉样式。通过选择器（如元素选择器、类选择器、ID选择器等），我们可以指定元素的颜色、字体、大小、位置等属性。例如，`color`属性改变文本颜色，`background-color`设置背景色，`font-size`调整字体大小，`margin`和`padding`控制元素周围的空白区域。CSS还允许我们实现更复杂的布局，如浮动（`float`）、定位（`position`）以及盒模型（box model）的应用。在这个自学过程中，学习者可能会遇到以下关键概念： 1. **盒模型**：每个HTML元素都可以视为一个盒子，包含内容、内边距（padding）、边框（border）和外边距（margin）。理解盒模型对于精确控制元素的尺寸和布局至关重要。 2. **层叠顺序**：当多个CSS规则应用到同一元素时，它们的优先级决定了哪个规则生效。这涉及到CSS的选择器权重和`!important`声明。 3. **响应式设计**：利用媒体查询（`@media` rule）和百分比单位，可以让网页根据设备屏幕大小自动调整布局，提供良好的跨设备兼容性。 4. **Flexbox** 和 **Grid布局**：这两种现代布局模型使得创建复杂、灵活的网页布局变得更加简单，特别是对于处理一维（Flexbox）和二维（Grid）布局问题。通过实践"HTML+CSS自学制作的第一个网页"，初学者不仅能掌握基本的网页构建技能，还能体验到设计与技术的结合，为后续的前端开发学习打下坚实的基础。这个过程可能包括反复试验、查阅文档、解决问题，最终看到自己的成果在浏览器中鲜活展现，将带来巨大的满足感和成就感。

资源推荐

资源详情

资源评论

收起资源包目录

学成在线.zip （41个子文件）

学成在线

css

base.css 387B

index.css 7KB

index.html 16KB

uploads

course03.png 31KB

python02.png 28KB

banner.png 72KB

ai01.png 28KB

web_top.png 45KB

python_left.png 57KB

course08.png 34KB

web02.png 24KB

java03.png 24KB

course06.png 57KB

web_left.png 61KB

java05.png 25KB

ai02.png 21KB

python_top.png 56KB

ai06.png 22KB

java02.png 45KB

python04.png 26KB

course02.png 32KB

course01.png 36KB

course04.png 25KB

course05.png 36KB

ai05.png 24KB

course07.png 25KB

user.png 3KB

course09.png 39KB

web03.png 31KB

web04.png 34KB

course10.png 38KB

web01.png 27KB

ai03.png 23KB

java04.png 27KB

python03.png 26KB

python01.png 26KB

images

more.png 244B

right-hover.png 235B

logo.png 6KB

search.png 415B

right.png 212B

<!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="./css/base.css"> <link rel="stylesheet" href="./css/index.css"> </head> <body>  <div class="header"> <div class="wrapper">  <div class="logo"> <h1> <a href="#">学成在线</a> </h1> </div>  <div class="nav"> <ul> <li><a href="#" class="active">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </div>  <div class="search"> <input type="text" placeholder="请输入关键词"> <a href="#"></a> </div>  <div class="user"> <a href="#"> <img src="../学成在线/uploads/user.png" alt=""> <span>波仔学前端</span> </a> </div> </div> </div>  <div class="banner"> <div class="wrapper"> <div class="left"> <ul> <li><a href="#" class="active">前端开发</a></li> <li><a href="#">后端开发</a></li> <li><a href="#">移动开发</a></li> <li><a href="#">人工智能</a></li> <li><a href="#">商业预测</a></li> <li><a href="#">云计算&大数据</a></li> <li><a href="#">运维&测试</a></li> <li><a href="#">UI设计</a></li> <li><a href="#">产品</a></li> </ul> </div> <div class="right"> <h3>我的课程表</h3> <div class="content"> <dl><dt>数据可视化课程</dt><dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd></dl> <dl><dt>Vue3医疗项目课程</dt><dd><span>正在学习</span>-<strong>认识组合式API</strong></dd></dl> <dl><dt>React核心技术课程</dt><dd><span>正在学习</span>-<strong>配合TS使用</strong></dd></dl> <a href="#">全部课程</a> </div> </div> </div> </div>  <div> <div class="recommand"> <div class="wrapper"> <h3>精品推荐</h3> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">Node.js</a></li> <li><a href="#">Ajax</a></li> <li><a href="#">Vue2.0</a></li> <li><a href="#">Vue3.0</a></li> <li><a href="#">TypeScript</a></li> <li><a href="#">React</a></li> </ul> <a href="#" class="modify">修改兴趣</a> </div> </div> </div>  <div class="course"> <div class="wrapper"> <div class="hd"> <h3>精品推荐</h3> <a href="#" class="more">查看全部</a> </div> <div class="bd"> <ul> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course01.png" alt=""> </div> <div class="text"> <h4>JavaScirpt数据看板项目实战</h4> <p><span>高级</span><i>1125</i>人在学习</p> </div> </a></li> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course02.png" alt=""></div> <div class="text"> <h4>Vue.js实战——面经前栈项目</h4> <p><span>高级</span><i>2726</i>人在学习</p> </div> </a></li> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course03.png" alt=""></div> <div class="text"> <h4>玩转Vue全家桶，iHRM人力资源项目</h4> <p><span>高级</span><i>9456人在学习</i></p> </div> </a></li> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course04.png" alt=""></div> <div class="text"> <h4>Vue.js实战医疗项目——优医问诊</h4> <p><span>高级</span><i>7192人在学习</i></p> </div> </a></li> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course05.png" alt=""></div> <div class="text"> <h4>小程序实战：小兔鲜电商小程序项目</h4> <p><span>高级</span><i>2103在学习</i></p> </div> </a></li> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course06.png" alt=""></div> <div class="text"> <h4>前端Flutter开发实战</h4> <p><span>高级</span><i>2841人在学习</i></p> </div> </a></li> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course07.png" alt=""></div> <div class="text"> <h4>熟练使用React.js——极客园H5项目</h4> <p><span>高级</span><i>95682人在学习</i></p> </div> </a></li> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course08.png" alt=""></div> <div class="text"> <h4>熟练使用React.js——极客园PC端项目</h4> <p><span>高级</span><i>904人在学习</i></p> </div> </a></li> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course09.png" alt=""></div> <div class="text"> <h4>前端实用技术，Fetch ApI实战</h4> <p><span>高级</span><i>1516人在学习</i></p> </div> </a></li> <li><a href="#"> <div class="pic"><img src="../学成在线/uploads/course10.png" alt=""></div> <div class="text"> <h4>前端高级Node.js零基础入门教程</h4> <p><span>高级</span><i>2766人在学习</i></p> </div> </a></li> </ul> </div> </div> </div>  <div cl

评论收藏

内容反馈