Skip to content

H
HTML入门级练手项目_个人介绍主页

whkgogo / HTML入门级练手项目_个人介绍主页
9 个月 前同步成功

通知 2
Star 0
Fork 0
H
HTML入门级练手项目_个人介绍主页

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 ed57113e 编写于 作者: W whk
浏览文件
操作

whkgogo的个人网页的index首页基本开发完

上级 ab4615b9
展开全部 隐藏空白更改
内联 并排
Showing with 2991 addition and 45 deletion
css/font-awesome.min.css 0 → 100644
浏览文件 @ ed57113e
此差异已折叠。
css/style.css
浏览文件 @ ed57113e
@import url("//at.alicdn.com/t/font_2695405_j7jy3hdngl.css");
/* 首先要清除样式，因为浏览器有默认样式，需要进行清除 */
*{
* {
padding: 0;
margin: 0;
box-sizing: border-box;
......@@ -7,35 +9,66 @@
}
/* 设置主要内容的样式 */
html,body{
html,
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* 一个比较好的字体样式，可以根据自己的喜好选择 */
}
/* 设置a标签的样式 */
a{
a {
color: #333;
text-decoration: none;
/* 将a标签的下划线去除 */
}
/* 清楚浮动的div样式 */
.clr{
clear: both;
}
/* 设置标题标签的样式 */
h1,h2,h3{
h1,
h2,
h3 {
padding-bottom: 20px;
/* 设置这些元素的下内边距为20px */
}
/* 设置p标签的样式 */
p {
margin: 10px 0;
}
/* 容器样式，使用的页面可能会很多所以统一进行设置 */
.container{
margin: 20px 0;
.container {
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
/* 防止margin塌陷和清除浮动 */
padding: 0 20px;
font-size: 15px;
}
/* 暗色的按钮样式 */
.btn_about_dark {
background: #444;
color: coral;
}
/* header的样式设置 */
.index_header {
width: 100%;
text-align: center;
}
/* 文字的样式 */
.text_primary {
color: #FF7F50;
}
/* 设置导航栏样式 */
#navBar{
#navBar {
background: #333333;
color: white;
overflow: auto;
......@@ -46,33 +79,201 @@ h1,h2,h3{
/* 导航栏中的a标签之前设置的颜色#333和导航栏背景颜色冲突
所以要重新给定导航栏中的a标签的颜色*/
#navBar a{
color: white;
}
/* 导航栏中的whkgogo文字部分是h1，需要该部分左浮动*/
#navBar h1{
float: left;
padding-top: 20px;
}
/* 导航栏中的列表是ul标签，需要右浮动，并且需要清除默认的样式 */
#navBar ul{
float: right;
list-style: none;
/* 清除默认样式 */
}
/* 导航栏标签列表中的li标签样式 */
#navBar ul li{
float: left;
}
/* 导航栏li标签列表中的a标签样式 */
#navBar ul li a{
display: block;
/* 此元素将显示为块级元素，此元素前后会带有换行符。 */
padding: 20px;
text-align: center;
}
\ No newline at end of file
#navBar a {
color: white;
}
/* 导航栏中的whkgogo文字部分是h1，需要该部分左浮动*/
#navBar h1 {
float: left;
padding-top: 20px;
}
/* 导航栏中的列表是ul标签，需要右浮动，并且需要清除默认的样式 */
#navBar ul {
float: right;
list-style: none;
/* 清除默认样式 */
}
/* 导航栏标签列表中的li标签样式 */
#navBar ul li {
float: left;
margin-top: 5px;
}
/* 导航栏li标签列表中的a标签样式 */
#navBar ul li a {
display: block;
/* 此元素将显示为块级元素，此元素前后会带有换行符。 */
padding: 20px;
text-align: center;
}
/* 给导航栏的列表添加效果：鼠标移动到文字上面时底部颜色有变化，并且文字颜色也有相应的改变 */
#navBar ul li a:hover,
#navBar ul li a.current {
transition: 0.5s;
background: #444;
color: coral;
}
/* 设置主页的背景图片 */
#showcase {
background: url(../img/index_showcase.jpg) no-repeat center center/cover;
/* cover是为了能让图片能全覆盖 */
height: 900px;
}
/* 设置主页的文字样式 */
#showcase .showcase_content {
color: #FFFFFF;
text-align: center;
padding-top: 170px;
display: inline-block;
/* 让其中的元素能够换行显示 */
}
/* showcase的文字中的h1标签样式设置*/
#showcase .showcase_content h1 {
font-size: 80px;
line-height: 1.2em;
margin: 50px;
}
#showcase .showcase_content p {
font-size: 15px;
line-height: 1.7em;
padding-bottom: 20px;
margin: 50px;
}
/* 首页跳转到关于我的a标签 */
#showcase .showcase_content a {
font-size: 18px;
color: white;
padding: 13px 20px;
background: #FF7F50;
display: inline-block;
}
/* “关于我”鼠标移入的样式设置 */
#showcase .showcase_content a:hover {
transition: 0.5s;
background: #FFFFFF;
color: #FF7F50;
/* 鼠标移入后会改变背景颜色 */
}
/* home_info部分内容 */
#home_info {
height: 400px;
margin-top: 5px;
/* home_info元素的高度为400px */
}
/* info的图片部分*/
#home_info .home_info_image {
float: left;
width: 50%;
background: url(../img/info1.jpg) no-repeat center center/cover;
height: 100%;
}
/* info中的文字介绍部分 */
#home_info .home_info_content {
float: right;
width: 50%;
text-align: center;
height: 100%;
padding: 50px 80px;
overflow: hidden;
background: #333333;
color: #FFFFFF;
}
/* info中的h1标签样式 */
.home_info_content h1 {
font-size: 40px;
}
/* 介绍中的p标签样式 */
.home_info_content p {
font-size: 20px;
margin-bottom: 40px;
overflow: hidden;
}
/* info中的a标签样式 */
.home_info_content a {
font-size: 18px;
color: white;
padding: 13px 20px;
background: #FF7F50;
display: inline-block;
}
/* info中的a标签鼠标移入的样式 */
.home_info_content a:hover {
background: #FFFFFF;
color: #FF7F50;
transition: 0.5s;
}
/* 更多内容部分 */
/* 更多内容分为三块内容，more_item是其中一块内容 */
/* 整体样式 */
.more_content {
height: 400px;
text-align: center;
}
/* 每一块内容的样式设置 */
/* 亮色调 */
.more_item_light {
width: 33.333%;
height: 100%;
background: #e7e7e7;
padding: 50px;
overflow: hidden;
float: left;
margin-top: 5px;
border-right: #999 1px solid;
color: #333;
}
/* 暗色调 */
.more_item_dark {
width: 33%;
height: 100%;
background: #333;
padding: 50px;
overflow: hidden;
float: left;
margin-top: 5px;
border-right: #999 1px solid;
color: #FFFFFF;
}
/* 小图标+文字居中样式 */
.more_icon {
text-align: center;
}
/* 小图标和文字中的h1标签 */
.more_icon h1 {
margin-top: 10px;
}
/* 底部的版权申明部分 */
#main_footer {
width: 100%;
height: 50px;
text-align: center;
background: #333333;
color: white;
bottom: 0;
line-height: 50px;
font-size: 15px;
}
fonts/fontawesome-webfont.svg 0 → 100644
浏览文件 @ ed57113e
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
index.html
浏览文件 @ ed57113e
......@@ -6,15 +6,20 @@
<!-- META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据 -->
<meta charset="utf-8" />
<!-- 网页的描述 -->
<meta name="description" content="欢迎来到whkgogo的个人网空间"/>
<meta name="description" content="欢迎来到whkgogo的个人网空间" />
<!-- 网页的关键词 -->
<meta name="keywords" content="whkgogo的个人博客"/>
<meta name="keywords" content="whkgogo的个人博客" />
<!-- 网页的作者 -->
<meta name="author" content="whk"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<meta name="author" content="whk" />
<!-- 引入自己编写的CSS文件 -->
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<!-- 引入图标CSS文件 -->
<!-- 网址：http://www.fontawesome.com.cn -->
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css"/>
<title>whkgogo的主页</title>
</head>
<body>
<!-- 顶部导航栏 + 主页大图 -->
<header class="index_header">
<nav id="navBar">
<div class="container">
......@@ -23,20 +28,85 @@
</h1>
<ul>
<li>
<a href="index.html">首页</a>
<a class="current" href="index.html">首页</a>
</li>
<li>
<a href="about.html">关于我</a>
<a href="about.html">关于我 ></a>
</li>
<li>
<a href="contact.html">与我联系</a>
</li>
</ul>
</div>
<div id="showcase">
<div class="container">
<div class="showcase_content">
<h1><span class="text_primary">欢迎来到</span>whkgogo的空间</h1>
<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
<a href="about.html" class="btn_about">关于我 ></a>
</div>
</div>
</div>
</nav>
</header>
<!-- info部分内容 -->
<div id="home_info">
<!-- 介绍中的图片位置 -->
<div class="home_info_image">
</div>
<!-- 介绍中的文字信息 -->
<div class="home_info_content">
<h1><span class="text_primary">whkgogo</span>不甘平凡</h1>
<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！
做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
<a href="about.html" class="btn_about_dark">关于我 ></a>
</div>
</div>
<!-- 更多内容部分 -->
<div id="more_content">
<div class="more_item_dark">
<div class="more_icon ">
<i class="fa fa-eye fa-3x" class="icon-cangchucangku"></i>
<h1>专注</h1>
</div>
<div id="more_text">
<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！
做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
</div>
</div>
<div class="more_item_light">
<div class="more_icon">
<i class="fa fa-cogs fa-3x" class="icon-cangchucangku"></i>
<h1>创新</h1>
</div>
<div id="more_text">
<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！
做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
</div>
</div>
<div class="more_item_dark">
<div class="more_icon">
<i class="fa fa-users fa-3x" class="icon-cangchucangku"></i>
<h1>协作</h1>
</div>
<div id="more_text">
<p>做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！
做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！做好每一件与我相关的事情，不负青春，不负信任，不忘初心，牢记使命！</p>
</div>
</div>
</div>
<!-- 上一个div里面设置了float浮动样式，因为没有清除浮动，所以会影响之后的元素
为了解决这个问题，所以要在这个元素后面添加一个div标签用来清除元素，起到隔断浮动的作用-->
<div class="clr"></div>
<footer id="main_footer">
<p class="footer_p">whkgogo &copy; 2021 All Rights Reserved</p>
</footer>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或