网页设计大作业个人主页网站_兵马俑前端资源-CSDN文库

共30个文件

html：9个

css：8个

webp：5个

版权申诉

网页设计

html

5星 · 超过95%的资源 131 浏览量 2021-12-10 21:39:12 上传评论 4 收藏 431KB ZIP 举报

网页设计是IT领域中一个非常重要的分支，它涵盖了多种技术和工具的综合运用，尤其是对于创建个人主页网站来说。在这个项目中，我们主要关注的是前端开发，主要包括HTML、CSS以及可能涉及的一些JavaScript技术。 HTML（HyperText Markup Language）是网页内容的基础，它是网页结构的骨架。在"final-assign"这个压缩包中，你可以找到使用HTML编写的网页源代码。HTML通过各种标签来定义文本、图像、链接等元素，并组织它们在页面上的布局。例如，`<head>`标签用于定义页面元数据，`<body>`包含所有可见内容，`<h1>`到`<h6>`定义标题等级，`<p>`用于段落，`<img>`插入图片，`<a>`创建超链接等。在个人主页网站中，这些元素会被巧妙地组合起来，展示个人信息、作品集、联系方式等内容。 CSS（Cascading Style Sheets）则是用来控制网页样式和布局的关键。它允许我们将设计元素如颜色、字体、尺寸、对齐方式等与HTML结构分离，使得我们可以更方便地管理和修改网站的外观。在CSS中，你可以定义选择器，如类（`.class_name`)、ID（`#id_name`）或元素（`element`），然后应用样式规则。例如，`color`属性设置文本颜色，`font-size`调整字体大小，`margin`和`padding`控制元素周围的空间，`display`决定元素的显示方式（如块状或行内）。个人主页的CSS可能会包含丰富的定制，如背景图片、自定义字体、响应式布局等，以营造独特的视觉效果和用户体验。除了HTML和CSS，个人主页可能还会涉及到JavaScript，这是一种强大的客户端脚本语言，能够实现交互性和动态功能。例如，JavaScript可以用来创建动画效果、表单验证、响应用户点击事件或者与服务器进行异步通信（AJAX）。在"final-assign"中，如果包含JavaScript文件，那么它们很可能是用来增强网站功能和互动性的。这个“网页设计大作业个人主页网站”项目将涉及到前端开发的核心技术，通过HTML构建页面结构，CSS美化视觉呈现，以及可能的JavaScript提升交互体验。学习和实践这些技能不仅有助于创建个人主页，也能为未来的网页设计和开发工作打下坚实基础。在深入研究这个压缩包的内容时，可以进一步理解这些技术的用法和原理，提高自己的网页设计能力。

资源推荐

资源详情

资源评论

收起资源包目录

final-assign.zip （30个子文件）

final-assign

index.html 11KB

Message_Board.html 6KB

about.html 5KB

img

3.webp 13KB

4.webp 30KB

6.webp 17KB

center_bg

.keep 0B

1.jpg 18KB

7.png 85KB

.keep 0B

bk.png 224KB

.keep 0B

2.webp 18KB

5.webp 7KB

LICENSE 9KB

reward.html 5KB

mood.html 5KB

css

config.css 859B

.keep 0B

filecss_config.css 1KB

gallery_config.css 954B

subpage_config.css 1KB

Message_config.css 613B

footer_config.css 478B

main_config.css 7KB

header_config.css 1KB

gallery.html 7KB

file.html 6KB

Friends_account.html 5KB

detailed_list.html 5KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>主页</title> <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="./css/header_config.css"/> <link rel="stylesheet" href="css/config.css"/> <link rel="stylesheet" href="css/main_config.css"/> <link rel="stylesheet" href="./css/footer_config.css"/>  <script src="./js/sakura.js"></script> <script src="js/love.js"></script> </head> <body style="background-image: url(img/bg/bk.png);"> <header class="site_header"> <figure class="centerbg" style="background-image: url(./img/center_bg/girl2.webp);height: 1080px;"> <div class="header_info"> <h1 class="header_info_title"> Hi, Althumi </h1> <div class="header_info_content"> <p> <i class="fa fa-quote-left"></i> You got to put the past behind you before you can move on. <i class="fa fa-quote-right"></i> </p> <div class="shar_list"> <li id="bg_pre"> <img class="flipx" src="./img/7.png" style="transform: rotate(180deg);"> </li> <li id="qq"> <img class="qq" src="./img/7.png"> </li> <li id="github"> <img class="github" src="./img/7.png"> </li> <li id="bilibili"> <img class="bilibili" src="img/7.png"> </li> <li id="wangyiyun"> <img class="wangyiyun" src="./img/7.png"> </li> <li id="jianshu"> <img class="jianshu" src="./img/7.png"> </li> <li id="zhihu"> <img class="zhihu" src="./img/7.png"> </li> <li id="csdn"> <img class="csdn" src="./img/7.png"> </li> <li id="bg-next"> <img src="./img/7.png"> </li> </div> </div> </div> </figure> <div class="headertop-down"> <span><i class="fa fa-chevron-down" aria-hidden="true"></i></span> </div> </header> <div class="main"> <header class="main_header"> <div class="site_top"> <div class="site_branding"> <h1><a href="#" target="_self">たかぎ</a></h1> </div> <div class="user_head_photo"> <img src="img/1.jpg" width="30px" height="30px"/> <div class="user_head_photo_menu"> <div class="user_head_photo_menu_name"> Althumi </div> </div> </div> <div class="searchbox"> <i class="fa fa-search fa-2x" aria-hidden="true" style="font-size: 26px"></i> </div> <div class="top_nav"> <div class="lower"> <nav class="navbar" style="display: block !important;"> <ul> <li> <a href="./index.html" target="_self"> <i class="fa fa-fort-awesome"></i>首页 </a> </li> <li> <a href="./file.html" target="_self"> <i class="fa fa-archive faa-shake" aria-hidden="true"></i>归档 </a> </li> <li> <a href="./detailed_list.html" target="_self"> <i class="fa fa-list-ul faa-vertical" aria-hidden="true"></i>清单 </a> </li> <li> <a href="./mood.html" target="_self"> <i class="fa fa-calendar-o faa-tada" aria-hidden="true"></i>心情 </a> </li> <li> <a href="./gallery.html" target="_self"> <i class="fa fa-camera faa-flash" aria-hidden="true"></i> 画廊 </a> </li> <li> <a href="./Message_Board.html" target="_self"> <i class="fa fa-pencil-square-o faa-tada" aria-hidden="true"></i>留言板 </a> </li> <li> <a href="./Friends_account.html" target="_self"> <i class="fa fa-link faa-shake" aria-hidden="true"></i>友人帐 </a> </li> <li> <a href="./reward.html" target="_self"> <i class="fa fa-heart faa-pulse" aria-hidden="true"></i>赞赏 </a> </li> <li> <a href="./about.html" target="_self"> <i class="fa fa-leaf faa-wrench" aria-hidden="true"></i>关于 </a> </li> <li> <a href="#" target="_self"> <i class="fa fa-magic" aria-hidden="true" onclick="window.alert('未开发，敬请期待')"></i>实验室 </a> </li> </ul> </nav> </div> </div> </div> </header> <div class="main_content" style="background-color: rgba(255, 255, 255, 0.8);"> <div class="notice" style="margin-top: 20px;"> <i class="fa fa-bullhorn" aria-hidden="true"></i> <div class="notice-content">2021/6/18：Althumi决定通宵做完这个网页，尽管这不现实，但是喝了红牛就是现实！一盏灯，一台电脑，一个人，一个传奇！</div> </div> <div class="top_feature"> <h1 class="tf_title" style="font-family: 'Ubuntu', sans-serif;"> <i class="fa fa-anchor" aria-hidden="true"></i> <span> START:DASH!!</span> </h1> <div class="tf_content"> <a href="#" target="_blank"> <div class="img"> <img src="img/2.webp"/> </div> <div class="info"> <h3> 【大作业日志】 </h3> <p> 入坑前端就在今天这一天！ </p> </div> </a> </div> <div class="tf_content"> <a href="#" target="_blank"> <div class="img"> <img src="./img/3.webp" width="256px" height="160px" /> </div> <div class="info"> <h3> 【ICPC】拿牌最重要！ </h3> <p> 每天学习算法3小时，一年拿铜，两年拿银 </p> </div> </a> </div> <div class="tf_content"> <a href="#" target="_blank"> <div class="img"> <img src="./img/4.webp" /> </div> <div class="info"> <h3> 【四月是你的谎言】四月はあなたの嘘です。 </h3> <p> 妈的，好好看。555！ </p> </div> </a> </div> </div> <div class="content_area"> <main class="site_main"> <h1 class="main_title" style="font-family: 'Ubuntu', sans-serif;"> <i class="fa fa-envira" aria-hidden="true"></i>发现 </h1> <article class="post_content"> <div class="post_content_img"> <a href="#"> <img src="https://api.lixingyong.com/api/images?type=url&itype=image&kind=random" width="auto" height="100%"/> </a> </div> <div class="post_content_text"> <div class="post_date"> <i class="fa fa-clock-o" aria-hidden="true"></i>发布于2021/6/19  <i class="fa fa-fire" aria-hidden="true"></i> </div> <a class="post_title" href="#" target="_self"> <h3>【网页设计】二次元网站制作方法</h3> </a> <div class="post_meta"> <span> <i class="fa fa-eye" aria-hidden="true"></i> 1314w热度 </span> <span class="mid_num"> <i class="fa fa-commenting-o" aria-hidden="true"></i> 520w评论 </span> <span> <i class="fa fa-folder-open-o" aria-hidden="true"></i>开源项目 </span> </div> <div class="float_content"> <p> 学习博客框架体系Halo里的Sakura主题，能够轻松制作二次元博客网站。快人一步的体验到二次元与网页设计的结合更能充分个人对此项技能的兴趣！欧耶。 </p> </div> <div class="post_bottom"> <a href="#"> <i class="fa fa-ellipsis-h fa-2x" aria-hidden="true"></i> </a> </div>

评论收藏

内容反馈

版权申诉