htmlcss实例小项目(html网页制作案例)

admin 2023年12月14日 05:54 443 0

很多朋友对于htmlcss实例小项目和html网页制作案例不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

一、html制作个人简历网页代码

以下是我用html的相关知识制作的个人简历网页，话不多说先看看最终效果：

如上所示项目一共分为5个部分，分别对应导航栏的5个内容。其中项目技能用的是echarts里的柱状图，作品展示用的是bootstrap里的轮播图，除此之外就是html的基础内容。下面我们展示一下项目的代码部分：

<!DOCTYPE html><html>

<title>我的个人简历</title>

<p style="font-size: 15px;">2018年升入陕西国防工业职业技术学院，<br/>学习软件编程，对编程有浓厚的兴趣，

在老师的指导，<br/>和自己的课下练习，渐渐对编程有了更深入的了解。<br/>在课余时间，

我喜欢唱歌、跑步和打乒乓球。<br/>喜好结交志同道合的朋友，一起分享学习的生活的经验。<br/>

有良好的团队意识，学习时认真负责。</p>

</button></a></td>

</button></a></td>

</button></a></td>

<div id="main" style="width:

50%;height:400px;left: 25%;"></div>

//基于准备好的dom，初始化echarts实例

var myChart= echarts.init(document.getElementById('main'));

data: ["Java语言","mysql数据库","Javascript语言","web开发","ssm框架","springboot框架"],axisLabel:{

data: [85, 95, 82, 90, 80, 80]

//使用刚指定的配置项和数据显示图表。

<li>Java基础:<br/>

我入门时首先学的就是Java基础，然后再到Java高级开发，<br/>

在学习过程中老师细致的教学为我们打下了牢固的java基础。</li>

<li>mysql数据库:<br/>

mysql数据库是我们大一第二学期开的课，配合Java高级开发一起学习的科目，<br/>

因为自己本身就喜欢数据库的一些东西，所有mysql数据库也有良好的基础。</li>

<li>Javascript语言：<br/>

在学JavaScript之前我有良好的html5和css基础，所学习JavaScript时也是十分顺利的掌握了课本里的内容。</li>

web开发是我最喜爱的科目之一，servlet的学习给我启发深刻。</li>

ssm框架相比springboot而言是比较繁琐的，但是在学习和理解起来却比springboot更容易让人掌握。</li>

<li>springboot框架:<br/>

springboot框架入门起来十分迅速，在基础的使用起来也是十分方便，但查看源码时，没有ssm容易让人理解。</li>

<li class="active"><a href="#car">新能源汽车项目</a></li>

<li><a href="#city">咕泡商城项目</a></li>

<h2 id="car">新能源汽车</h2>

<h5>企业saas工坊</h5>

<p>新能源汽车项目是我们掌握smm框架知识后第一个实战项目，该项目由工坊老师指导下，前后端都由我们个人独立完成的项目。

该项目用到了，html5+css3，mysql数据库，spring，mybatis，springmvc框架，ajax，JavaScript，web，bootstrap，echarts，sweetalert

等技术。项目从开始到完成我们用了2个月的时间。该项目的主要是写一个汽车app社交平台，包括用户登录注册，用户上传车辆信息，统计用户车辆，分析故障车辆原因，

以及导航、朋友圈等功能一体的汽车平台。该项目用户的使用方法如下：<p>1.新用户进行登录注册。</p>

<p>2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。</p>

<p>3.新用户上传自己车辆信息，并绑定账号。</p>

<p>4.新用户可以上传自己车辆故障，系统自动查询车辆故障原因以及维修方案。</p>

<p>5.用户可以添加车友，在车友圈发布求助信息等。</p>

<p>6.用户还可以进行地图导航，以及查询公交车，出租车，飞机等交通工具的时间和行程。</p>

<p>通过完成这个项目，让我获得了很大的进步。不论是前端知识还是后端知识，在该项目上

都得到了充分的展示。让我也一下子吸收了很多的知识与技能，为后面的项目打下了坚实的基础。</p>

<h5>企业saas工坊</h5>

<p>咕泡商城项目是我们学完springboot之后的实战项目，该项目由工坊老师指导下，前后端都由我们个人独立完成的项目。

该项目用到了，html5+css3,mysql数据库,springboot框架,maven,web,javascript,jquery,ajax,echarts,bootstrap等技术。

项目从开始到完成我们用了10天的时间。该项目主要是写一个网上商城电商购物平台，包括用户登录注册，用户绑定信息，上传头像、昵称等个人信息，

用户主要可以在该平台上面购买各种商品，每种商品都做好了分类管理，用户点击分类名称或者准确搜索都能显示出自己想要的商品。用户点击商品就可以

链接到商品详情页面，不论是购物还是浏览商品都非常的方便。该项目用户的使用方法：<p>1.新用户进行登录注册。</p>

<p>2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。</p>

<p> 3.用户自由购买和浏览商品信息。</p>

该项目让我们体验了springboot的配置强大之处，没有繁琐的多余配置文件，所有配置都由一个配置文件解决，简化了我们smm框架配置的痛苦。</p>

<h5>企业saas工坊</h5>

<p>爬虫项目是我们最近才做完的项目。该项目与以往项目不同，该项目是由工坊老师指导下，我们首次前后端分离合作的项目。一个团体3个人，分别做前端展示数据，后端爬取数据和数据清洗。

我在这个项目中做的是后端爬取数据。我用到了，httpclient，jsoup，webmagic，springboot，maven，mysql等技术。该项目主要是爬去51job网站上面的工作岗位，

我们主要爬取了与我们软件相关的工作岗位，共爬取了2万条数据处理并展示。该项目执行步骤如下：<p>1.后端爬取数据并存到数据库。</p>

<p>2.中间清洗数据，将数据改变为前端人员需要的格式。</p>

<p>3.前端人员根据需求展示数据。</p>

该项目让我们体会到了团队合作和团队分工明确的重要性，每个人做好属于自己的一份任务，环环相扣才能保质保量的完成项目。</p>

<span class="sr-only">Previous</span>

<td>就读于xx小学</td>

<td>就读于xx初中</td>

<td>就读于xx高级中学</td>

<td>就读于陕西国防工业职业技术学院</td>

</tbody></table></div>

  邮箱:3136484707@qq.com         

         电话号码：11111111111

         个人博客:https://me.csdn.net/qq_44892582</p>

二、用html制作一个个人网页要求有五个链接,每页都有css格式

1、h1就是选择器，意思是只要遇到h1，就使用该CSS的规则

2、选择器的种类很多，各有各的作用。我们来一一讲解。

3、顾名思义，HTML中有许多标签，而标签选择器就是用来给标签直接申明样式的，简单、实用、常用。

4、只要是p标签，其P标签内部的颜色，都是红色。

5、<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><style>p{ color:red;}</style></head><body><p>嘿嘿哦嘿嘿呀哦嘿嘿哦</p></body>

6、其中，<style>标签是样式标签，请将CSS放在其中

7、（这部分内容后续会介绍，这里只是先提一下）

8、也叫做类选择器，直接说概念估计你也不明白，直接上例子吧。

9、这就是一个class选择器，意思是有一种CSS的样式，其名字是alsp，谁想用谁用。

10、<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><style type="text/css">.alsp{color:red;}</style></head><body><p class="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol class="alsp"><li>嘿啥嘿</li><li>我想嘿嘿</li><li>专制各种不服</li></ol><p>世界为亡，死不投降</p></body>

11、通过.alsp定义一个class选择器。

12、在后面的代码中，哪个标签想用，就用class="alsp"去调用，就可以使用这件“衣服”来修饰自己了

13、ID和class很像，但是和class有一个区别。class像姓名，两个人是可以同名的，但是id像身份证，只有一个人可以使用。

14、#alsp{color:red;}</style></head><body><p id="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol><li>嘿啥嘿</li><li>我想嘿嘿</li><li>专制各种不服</li></ol><p>世界为亡，死不投降</p></body>

15、只能有一个标签使用该id，或者说该标签专属ID

16、这个很简单，前面用个*来表示，整个网页都会使用。这句话也是网页基本都要添加的，什么意思呢？自己试试看吧。

17、组合选择，小编是非常喜欢使用的，原因无他，懒而已。他可以减少代码量，并且方便、易读。

18、不过组合选择器的组合方式比较多，但也多很好理解。

19、h1{color:red; font-size:14px;}

20、这三个虽然标签不同，但是样式是一模一样的，所以，可以这样写：

21、h1,p,a,{color:red; font-size:14px;}

22、li是在ul之中的，算是ul的后代。通过.alsp li确定li是属于调用alsp类选择器里的li标签，其他的li标签并不会使用该样式。

23、<p class="alsp">p.alsp</p>

24、<a class="alsp">a.alsp</p>

25、alsp仍然是一种class选择器，但是他只有在p的标签下被使用才生效。

26、所以，第一行生效，p.alsp字样变红，第二行不生效

27、“伪”字暴露了他的本质，伪类选择器并不像其他选择器直接做用在标签上，但是他偏偏又是在标签上进行使用，所以称为“伪类选择器”。

28、一般情况正常运行，只有当达成条件的时候触发，才会执行伪类选择器所代表是css样式。

29、伪类选择器很多，但许多都是我们这辈子估计都用不到的。

30、OK，伪类选择器后续我会专门写一篇经验介绍，有点小多，这里也就不多说了。

31、在<head></head>中，加入<style></style>,并将相关的CSS样式放在其中

32、<link rel="stylesheet" type="text/css" href="index.css">

33、意思是，你专门创建一个index.css的文件，里面放上CSS样式，和内样式的语法一模一样，只是专门找了一个文件存放而已。

34、例如：<p style="color:#900">嘿嘿哦嘿嘿呀哦嘿嘿哦</p>

35、一般不要用，不过可以用来调试使用

三、css网页的几种布局实例

本文主要介绍了浅谈css网页的几种布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。

1、左边固定，右边自适应布局的两种实现方式

第一种实现方式通过负边距与浮动实现左边固定，右边自适应的布局。主要代码如下：

设置子元素的margin,然后父元素必须浮动。

用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。

<p class="right">-margin必须大于或等于自身的宽度才会上移</p>

</body>实现过程中需要注意的是:

1.自适应的容器需要容器包裹住，否则容器内的内容会被覆盖。

2.right容器的负边距必须大于或等于自身的宽度才会上移。

3.如果right容器负边距等于自身的宽度它会靠右对齐，如果负边距等于-100%，则会靠左对齐。

第二种通过浮动布局来实现左边固定，右边自适应的布局

@media(min-width: 650px) and(max-width: 1000px){

<p class="left">左边固定宽度，右边自适应</p>

</body>实现过程中需要注意的是： 1. left需要脱离文档流，而right只需要正常显示就可以。

2.left只是覆盖在right上边，因此想要让right内容完整显示需要给right padding-left或者margin-left。

<p id="head">即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置</p>

<p class="main">当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移</p>

</body>实现过程中需要注意:

1.中间自适应的p需要放在left和right容器前面并且内容p需要用父容器包裹

2.left和right容器向同一个方向浮动。

<p id="head">左右固定宽度并且向两边浮动，中间的p设置两边的margin</p>

<p class="main">该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了</p>

</body>实现过程中需要注意:

1.该方式只需要注意中间自适应的p需要放在left和right容器的后面。

<title>使用flex实现“双飞翼布局”</title>

display:-webkit-flex;//谷歌浏览器加前缀

<p class="left">flex语法我参照了阮一峰关于flex语法介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</p>

</html>如果未了解过flex布局请移至文末点击链接查看阮一峰大神写的关于flex语法

这边就不絮絮叨叨的讲一些基础的css定位知识了（ps:不会的请自行到w3c官网查阅），我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。

第一：使用多个fixed时，注意自己需要基于什么定位，因为如果父级有用transform属性时，可能会导致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：

在上图中我可以发现中间黑色的小框是基于父级来定位，并且宽度也基于父容器的50%。详细的请看下面代码：

<title>关于position的定位的坑</title>

background-color: rgba(0,0,0,0.3);

/*使用postion和 transform水平垂直居中*/

background-color: rgba(0,0,0,0.3);

transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

.dialog-button>.button-box{

background-color: rgba(0,0,0,0.2);

transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

background-color: rgba(0,0,0,0.2);

<p class="dialog-content">是否删除该项,点击确定</p>

OK，本文到此结束，希望对大家有所帮助。