HTML+CSS个人主页资源-CSDN文库

共16个文件

jpg：9个

png：4个

project：1个

需积分: 43 26 浏览量 2018-04-19 21:20:52 上传评论 7 收藏 4.49MB RAR 举报

HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两种核心技术。HTML用于定义网页的结构和内容，而CSS则用于控制页面的样式和布局，使其看起来更加美观和专业。在"HTML+CSS个人主页"这个项目中，我们可以学到以下几个关键知识点： 1. **HTML基础**：HTML是网页的基础，它通过一系列标签来表示网页的各个部分，如标题（`<h1>`到`<h6>`）、段落（`<p>`）、链接（`<a>`）、图像（`<img>`）、列表（`<ul>`、`<ol>`、`<li>`）等。了解这些基础标签的用法是创建任何网页的第一步。 2. **CSS选择器**：CSS通过选择器来定位HTML元素，应用样式。如类选择器（`.class_name`）、ID选择器（`#id_name`）、元素选择器（`element_name`）等。理解如何正确地选择并影响页面上的特定元素是CSS的核心。 3. **CSS样式属性**：这包括颜色（`color`）、字体（`font-family`、`font-size`）、布局（`width`、`height`、`margin`、`padding`）、背景（`background-color`、`background-image`）、边框（`border`）等。掌握这些属性可以让你对页面的视觉效果有精确的控制。 4. **盒模型**：在CSS中，每个元素都可以视为一个盒子，包含内容、内边距（padding）、边框（border）和外边距（margin）。理解盒模型是理解页面布局的关键，它决定了元素占据的空间。 5. **响应式设计**：在个人主页中，可能会涉及到不同设备的兼容性。响应式设计允许页面根据访问设备的屏幕大小自动调整布局。这通常通过媒体查询（`@media query`）实现，根据设备特征应用不同的CSS规则。 6. **CSS预处理器**：虽然在这个项目中可能没有使用，但了解Sass或Less这样的CSS预处理器也是现代前端开发的一个重要方面。它们提供变量、嵌套规则等功能，让CSS编写更简洁、可维护。 7. **布局技术**：学习如何使用浮动（`float`）、定位（`position`）或者Flexbox和Grid布局来组织页面元素，以达到理想的效果。 8. **网页美化**：包括使用渐变、阴影、动画等CSS3特性来提升页面的视觉吸引力，以及如何创建自定义字体和图标。 9. **网页优化**：理解如何减少HTTP请求，压缩代码，优化图片等方法来提高网页加载速度和用户体验。在"个人主页HTML+CSS"这个文件中，开发者很可能是将HTML文件和CSS文件合并在一起，形成一个单一的HTML文件，这种方式在初级项目中常见，便于初学者理解和调试。通过查看这个文件，你可以学习到实际的代码结构和样式应用方式，从而加深对HTML和CSS的理解。

资源推荐

资源详情

资源评论

收起资源包目录

个人主页HTML+CSS.rar （16个子文件）

个人主页HTML+CSS

css

my.css 4KB

.project 2KB

index.html 14KB

img

4.jpg 3.98MB

zhuanfa.png 459B

pinglun.png 406B

tree.png 6KB

bookpic.jpg 31KB

zan.png 613B

1.jpg 37KB

me.jpg 21KB

7.jpg 40KB

9.jpg 338KB

2.jpg 17KB

8.jpg 23KB

5.jpg 27KB

<!DOCTYPE html> <html>  <head> <meta charset="UTF-8"> <title>邢cat的主页</title> <link rel="stylesheet" type="text/css" href="css/my.css" /> </head> <body>  <div class="header"> <div class="pic_box"> <img class="picture" src="img/me.jpg" /> </div>  <div class="my_name"> <span><h1>邢 Heng</h1></span> </div> </div>  <div class="nav"> <span> <a class="choose" style="margin-left: 0;" href="#">首页</a> <a class="choose" href="#photograph">相册</a> <a class="choose" href="#reading">读书</a> <a class="choose" href="#life">动态</a> </span> </div>  <hr align="center" width="50%" /> <hr align="center" width="40%" /> <hr align="center" width="30%" />  <div class="know_me"> <p> <a href="http://www.aiit.edu.cn/" target="_blank">安徽信息工程学院</a>1606班</p> <p>爱好读书</p> </div>  <p class="text" id="photograph">photo album</p> <div class="photograph"> <div class="pictures">  <ul class="box"> <li title="美丽文津"><img class="photo" src="img/1.jpg"></li> <li title="新芜图书馆"><img class="photo" src="img/9.jpg" /></li> <li title="文津的路"><img class="photo" src="img/4.jpg" /></li> <li title="亭子"><img class="photo" src="img/7.jpg" /></li> <li title="雾中体育馆"><img class="photo" src="img/5.jpg" /></li> <li title="夕阳下的湖"><img class="photo" src="img/8.jpg" /></li> </ul> </div> </div>  <div id="see_more_pic"> <div class="see_more_pic_right"> <a href="https://user.qzone.qq.com/1048261060/">查看更多</a> </div> </div>  <p class="text" id="reading">my books</p> <div class="reading">  <div class="reading_after"> <div> <h3>    已经阅读  :</h3> </div> <ol> <li>《A English Looks at the world》</li> <li>《二十四重人格》</li> <li>《岛上书店》</li> <li>《Oliver Twist》</li> <li>《人间失格》</li> <li>《中国通史》</li> <li>《大国的崩溃》</li> <li>《永恒的边缘》</li> <li>《爱你就像爱生命》</li> <li>《在细雨中呼喊》</li> <li>《人类简史》</li> </ol> </div>  <div class="reading_now"> <div class="reading_right_left">  <div class="book_pic"> <img src="img/bookpic.jpg" /> </div>  <div class="book_detil"> <span>正在阅读：《南渡北归》</span> <p>作者：岳南</p> <p style="text-align: left;">内容介绍：</p> <p style="text-align: left; letter-spacing: 3px;">     首部全景描述20世纪中国最后一批大师命运的史诗巨著。 </p> </div> </div>  <div class="book_sentence"> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜西风凋碧树。独上高楼，望尽天涯路。'此第一境也。'衣带渐宽终不悔，为依消得人憔悴'。此第二境也。众里寻他千百度，回头蓦见，那人正在灯火阑珊处，是第三境也。</p> <p>    王国维在他的《人间词话·贰陆》云：“'古今之成大事业、大学问者、必经过三种之境界：'昨夜

评论收藏

内容反馈